[SNS] facebook에 url공유를 했는데, 자꾸 이전정보가 나온다면?

페이지를 찾지 못한다면?

 

그건 페이스북에 해당 url에 대한 cache가 남아있어서이다.

 

아래 url로 들어가서 원하는 url을 입력하고 테스트 해보면 확인 가능하고, cache도 지워진다.

 

 

https://developers.facebook.com/tools/debug

 

 

 

 

 

Posted by 홍반장水 홍반장水

Caching jQuery selections in an object

 

 

Before

 

jQuery(document).ready(function() {

jQuery('#some-selector').on('hover', function() {
jQuery(this).fadeOut('slow').delay(400).fadeIn();
console.log(jQuery(this).text());
});
jQuery('#another-element').on('hover', function() {
jQuery(this).slideUp();
});
jQuery('#some-selector').on('click', function() {
alert('You have clicked a featured element');
});
jQuery('#another-element').on('mouseout', function() {
jQuery(this).slideUp();
});
});

 

After

 

var someNamespace_Dom = {
 someSelector : 'jQuery("#some-selector")',
 anotherElement: 'jQuery("#another-element")',
};

jQuery(document).ready(function() {
 someNamespace_Dom.someSelector.on('hover', function() {
  jQuery(this).fadeOut('slow').delay(400).fadeIn();
  console.log(jQuery(this).text());
 });
 someNamespace_Dom.anotherElement.on('hover', function() {
  jQuery(this).slideUp();
 });
 someNamespace_Dom.someSelector.on('click', function() {
  alert('You have clicked a featured element');
 }); 
 someNamespace_Dom.anotherElement.on('mouseout', function() {
  jQuery(this).slideUp();
 });
}); 

Posted by 홍반장水 홍반장水

iOS6 SAFARI BUG (iOS6 사파리 버그 - AJAX, SPINNING, ...)

아이폰5 발표가 되고 조금 지나서 iOS6도 공개가 되었다.


업데이트평은

인터넷 접근 속도가 빨라졌다.

OS 전체적으로 조금 빨라졌다 라는 평이 많고..

일부 아이폰 4이하 기기를 사용하시는 분들은 느려졌다는 의견도 좀 있다.



뭐.. 그런저런 이야기는 지나가고..


개발을 하고 사용하다 보니 문제가 발생했다.

바로바로...

AJAX caching bug


사이트에서 페이지가 바뀌지 않은 상태에서

AJAX를 재호출 했을 경우 이전에 받았던 데이터를 그냥 계속 불러오는 버그가 발생하였다.


예상되는 버그 시나리오



* 최초로 A data("test.jsp")를 요청

   1. 서버로 A data를 요청

   2. 서버에서 Safari로 전달

   3. Safari에서는 해당 데이터를 캐쉬에 저장

   4. A data 제공


* 이후에 A data("test.jsp")를 요청

   1.  Safari Cache에 해당 데이터가 있는지 확인

   2.  Cache에 있는 A data 제공



해당 문제가 발생하는 이유

브라우저가 인터넷 속도를 빠르게 하기 위해서 캐시를 사용을 하게 된다.

이럴 경우 같은 주소에 대해서는 캐시를 사용하면서 생기는 문제로 보인다.



해결책


1. 주소에 쓰레기 값을 붙여서 새로운 주소로 인식하도록 한다.

ex) test.jsp?timeStamp=93939393


2. meta cache control을 추가해준다.

ex) <meta http-equiv="Cache-Control" content="no-cache" />


3. 서버 HEADER를 추가해준다.

ex) header('cache-control: no-cache');



1, 2번을 함께 적용하여 해결을 했다.


관련 URL를 참고하면 자세한 정보가 나와있으니 참고하도록.





아......... 애플.. ㅡ.ㅡ;;


ps.

iOS6 Webview에서도 동일한 증상이 발견된다.

즉............. 어플도 확인해봐야한다는 말씀?!



관련 URL

Understanding the iOS6 AJAX bugs

http://www.devthought.com/2012/09/22/understanding-the-ios6-ajax-bugs/

1. The spinning bug

2. The AJAX cache bug

3. The long-polling bug


Is Safari on iOS 6 caching $.ajax results?

http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results


AJAX Web Apps In iOS 6 Are Sort Of Broken

http://techcrunch.com/2012/09/21/ajax-web-apps-in-ios-6-are-sort-of-broken/



Posted by 홍반장水 홍반장水

네이티브앱을 만들기만 하던 시대를 지나 이젠 웹으로 앱을 만드는게 보편화 되어버린 시대로 도달했다.

하이브리드앱은 이미 많은 검증을 거쳤고, 상용화되서 시장을 점유하고 있는것이 사실이다.

대표적인 앱제작플롯폼으로 "폰갭(http://phonegap.com/)"을 들 수 있다.

폰갭,앱스프레소, 티타늄들 많이 있지만, 폰갭이 가장 간단하고 사용하기 좋은거 같다. 


자바스크립트를 이용한 처리가 작년만 해도 느렸지만, 하드웨어 성능도 향상되고, 자바스크립트 엔진 성능도 향상되어 지금은 네이티브 API를 사용하는것을 거의 따라잡았다고 볼 수 있다.

오프라인에서는 HTML5 캐시 또는 Web Storage 기능등이 있기때문에 온라인이 아니더라도 일반적인 정보를 보여줄 수 있게되었다. (Web Storage, Web SQL DB, IndexedDB ) 캐시 기능은 문제가 캐시가 잘 변경이 되지 않는다는 단점이 있긴 하지만. 오프라인에서도 화면을 잘 보여준다. 서버 셋팅만 잘 해두었다면 말이다.


HTML5 application Cache

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

  1. Offline browsing - users can use the application when they're offline
  2. Speed - cached resources load faster
  3. Reduced server load - the browser will only download updated/changed resources from the server

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Application cache is supported in all major browsers, except Internet Explorer.


* 일단 서버에서 manifest 타입이 웹에서 활성화 되어야 한다.

   contentType = "text/cache-manifest" 이 적용되어야 한다.

   (contentType만 맞추면 jsp 파일로 구현가능하다. )


1. manifest 파일에 애플리케이션 캐시정책이 기록되어 있다.

    - 어떤 파일을 캐시할지, 오프라인에서 어떤 파일을 보여줄 것인지 등등

2. 처음 화면 접속시 manifest 파일의 내용을 캐시를 해둔다. 

3.두번째 부터는 manifest 파일이 갱신되지 않았으면 캐시를 불러온다.

4.갱신이 되어있어도 일단 캐시를 불러오고, 백그라운드로 업데이트를 한다.

   그래서, 갱신해도 처음에는 이전 캐시를 보여주고 새로고침을 한번 더하거나 하면 갱신된 내용을 보여준다.


웹이 발전하는것은 결국 사용자 편의성을 위한 것이지, 어떤 특정한 기술로 인해 편의성을 져버린다면 그 서비스는 퇴화될것이다 .







Posted by 홍반장水 홍반장水

인터넷에 연결 되어 있지 않더라도 웹 어플리케이션을 실행 할 수 있도록

HTML5 에서는 어플리케이션 캐시를 지원한다.

 

두 부분으로 나누어 생각 해 볼 수 있다.

1. manifest file
2. JavaScript

매니페스트 파일은 캐시될 자원들, 즉 HTML, JavaScript, CSS, Image 등을 기술하는 파일이고
자바스크립트는 캐시된 파일을 업데이트하기 위해 사용한다.


* Application Cache 지원여부 확인

if (window.applicationCache) {
console.log("지원함");
} else {
console.log("지원안함");
}

    Application Cache 상태

    Window.applicationCache.status 를 확인하면 현재 캐쉬의 상태를 알 수 있다. 다음과 같이 6개의 상태값을 가질 수 있다. 각 상태값은 applicationCache 에 대문자로 된 상수로 선언되어 있다.

    if ( window.applicationCache.status == window.applicationCache.UPDATEREADY) { // 작업진행 }

  • 0 – UNCACHED
    페이지가 캐쉬를 사용하지 않거나, 맨 처음 접속시에 캐쉬가 다운로드 되기 전까지는 UNCACHED 상태이다.
  • 1 – IDLE
    브라우저가 최신버전의 Application Cache 로 업데이트되었고, 더 이상 다운로드 할 업데이트 버전이 없는 상태
  • 2 – CHECKING
    Manifest 파일이 업데이트 되었는지를 체크하는 상태 ( 현재 캐쉬된 Manifest 파일과 서버의 Manifest 파일을 바이트단위로 비교한다 )
  • 3 – DOWNLOADING
    캐쉬할 파일들을 다운로드 하는 상태 ( 2번 단계에서 Manifest 파일이 업데이트되었다고 알게 되었을 때 )
  • 4 – UPDATEREADY
    새로운 캐쉬의 다운로드가 끝나고 사용할 준비가 되었을 때 ( 아직 이 캐쉬가 사용된건 아님 )
  • 5 – OBSOLETE
    Manifest 파일 자체를 찾을 수 없을 때, 상태는 OBSOLETE로 지정되며 캐쉬는 삭제된다.


처음으로 웹 페이지가 로드 된 후에는 매니페스트 파일에 지정된 자원들은
웹 서버에서 가져오는 것이 아니라 어플리케이션 캐시에서 가져온다.

1. 매니페스트 파일

1.1. CACHE MANIFEST 로 시작한다.
1.2. 캐시 할 URL 들
1.3. 주석은 # 로 시작하고 한 줄만 허용한다.
1.4. 온라인 될 때 접근 해야 할 웹주소는 NETWORK: 으로 표시한다.
1.5. NETWORK: 줄 다음에 부가적으로 캐시 할 파일은 CACHE: 로 지정한다.
1.6. 선택사항으로 FALLBACK: 을 지원하는데 첫번째 항목에서 자원을 찾지 못하는 경우
두 번쨰 항목을 지정할 수 있다.

매니페스트 파일을 선언하는 HTML 파일은 자동적으로 어플리케이션 캐시에 저장된다.
따라서 그 파일을 매니페스트 파일에 넣을 필요가 없다.

HTML 파일에 매니페스트 파일을 선언하기 위해서는 다음과 같이 한다.

<html manifest="myapp.manifest">

만일 매니페스트 파일이 변경되면 자동적으로 어플리케이션 캐시가 업데이트 된다.
웹 서버에 있는 자원이 변경되거나 매니페스트 파일의 날짜가 바뀐다고 해도 자동적으로
업데이트 되지 않는다. 반드시 매니페스트 파일의 내용이 바뀌어야 한다.
주석만 바뀌어도 된다.

어플리케이션 캐시는 DOMWindow 의 속성으로 다음과 같이 얻어 낼수 있다.

cache = window.applicationCache;

수동적으로 업데이트 할려면 다음과 같이 하면 된다.

if(window.applicationCache.status = window.applicationCache.UPDATEREADY)
{
window.applicationCache.update();
window.applicationCache.swapCache();
}

아직 자바스트립트를 사용하여 어플리케이션 캐시에 자원을 더하거나 뺄 수는 없다.

어플리케이션 캐시 이벤트를 처리하기 위해서는 다음과 같이 한다.

cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);


Posted by 홍반장水 홍반장水

Ajax에서 Cache가 나를 괴롭힐때!!!


그런적 없던 Ajax가 갑자기 한 페이지에서 Cache를 물고 있으면서 동일한 값을 계속 토해내고 있다 .


어떻게 해결할 것인가?


호출 Url에 파라미터를 붙여 랜덤하게?

   


  Url += "?_cache_false" + Math.floor(Math.random() * 99999);


이렇게 해도 안되면


$.ajax(){

  ...

  , cache:false

  ...

}


요렇게 해보자.


하지만, cache가 우리에게 주는 장점은 쓸 수 없을것이다.

Posted by 홍반장水 홍반장水
TAG ajax, cache, jQuery