온라인/오프라인 웹 앱에 대한 HTML5 캐시 매니페스트를 올바르게 무효화하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1715568

문제

현재 Cache Manifest를 사용하고 있습니다(설명대로). 여기).이를 통해 사용자가 오프라인일 때 애플리케이션을 실행하는 데 필요한 리소스를 효과적으로 사용할 수 있습니다.

불행하게도, 그것은 너무 잘 작동합니다.

캐시 매니페스트가 로드된 후 Firefox 3.5+는 캐시 매니페스트에서 명시적으로 참조된 모든 리소스를 캐시합니다.그러나 서버의 파일이 업데이트되고 사용자가 온라인 상태에서 페이지를 강제로 새로 고치려고 하면(캐시 매니페스트 자체 포함) Firefox는 아무것도 가져오는 것을 절대적으로 거부합니다.애플리케이션은 마지막으로 캐시된 지점에서 완전히 정지된 상태로 유지됩니다.질문:

  1. 저는 Firefox가 네트워크 연결이 실패할 때 캐시된 리소스에만 효과적으로 의존하기를 원합니다.FALLBACK 블록을 사용해 보았으나 소용이 없었습니다.이것이 가능합니까?
  2. #1이 가능하지 않은 경우, 사용자가 개인 데이터를 지우지 않고 페이지를 강제로 새로 고치고 이 캐시를 우회할 수 있습니까(ctrl-F5는 이를 수행하지 않으며 놀랍게도 브라우저의 캐시도 지우지 않음)?또는 캐시 매니페스트 메커니즘이 만료 헤더를 지원하며 이에 대한 동작이 어디에나 문서화되어 있습니까?
도움이 되었습니까?

해결책

나는 이것을 알아 냈다고 생각합니다. 캐시-관리에 오류가 있으면 (예 : 참조 파일이 존재하지 않음) Firefox는 ApplicationCache 관련 처리를 완전히 중지합니다. 즉, 캐시 캐시 관리를 포함하여 캐시에서 아무것도 업데이트하지 않습니다.

이것이 문제라는 것을 밝히기 위해, i 모질라에서 일부 코드를 빌렸다 그리고 이것을 응용 프로그램의 새로운 (비 캐 형) HTML 파일로 삭제했습니다. 최종 메시지는 Cache-Manifest에 문제가있을 수 있으며 (누락 된 파일이 있는지 확인)에 문제가있을 수 있다고 언급했습니다.


// Convenience array of status values
var cacheStatusValues = [];
 cacheStatusValues[0] = 'uncached';
 cacheStatusValues[1] = 'idle';
 cacheStatusValues[2] = 'checking';
 cacheStatusValues[3] = 'downloading';
 cacheStatusValues[4] = 'updateready';
 cacheStatusValues[5] = 'obsolete';

 // Listeners for all possible events
 var cache = window.applicationCache;
 cache.addEventListener('cached', logEvent, false);
 cache.addEventListener('checking', logEvent, false);
 cache.addEventListener('downloading', logEvent, false);
 cache.addEventListener('error', logEvent, false);
 cache.addEventListener('noupdate', logEvent, false);
 cache.addEventListener('obsolete', logEvent, false);
 cache.addEventListener('progress', logEvent, false);
 cache.addEventListener('updateready', logEvent, false);

 // Log every event to the console
 function logEvent(e) {
     var online, status, type, message;
     online = (isOnline()) ? 'yes' : 'no';
     status = cacheStatusValues[cache.status];
     type = e.type;
     message = 'online: ' + online;
     message+= ', event: ' + type;
     message+= ', status: ' + status;
     if (type == 'error' && navigator.onLine) {
         message+= ' There was an unknown error, check your Cache Manifest.';
     }
     log('
'+message);
 }

 function log(s) {
    alert(s);
 }

 function isOnline() {
     return navigator.onLine;
 }

 if (!$('html').attr('manifest')) {
    log('No Cache Manifest listed on the  tag.')
 }

 // Swap in newly download files when update is ready
 cache.addEventListener('updateready', function(e){
         // Don't perform "swap" if this is the first cache
         if (cacheStatusValues[cache.status] != 'idle') {
             cache.swapCache();
             log('Swapped/updated the Cache Manifest.');
         }
     }
 , false);

 // These two functions check for updates to the manifest file
 function checkForUpdates(){
     cache.update();
 }
 function autoCheckForUpdates(){
     setInterval(function(){cache.update()}, 10000);
 }

 return {
     isOnline: isOnline,
     checkForUpdates: checkForUpdates,
     autoCheckForUpdates: autoCheckForUpdates
 }

이것은 확실히 도움이되었지만 모질라의 기능을 최소한 오류 콘솔에 인쇄하는 기능을 확실히 요청해야합니다. 이름이 변경된 파일처럼 사소한 문제를 진단하기 위해 이러한 이벤트에 첨부 할 수있는 사용자 정의 코드가 필요하지 않아야합니다.

다른 팁

나는 코드를 사용했습니다 HTML5 암석 : 캐시를 업데이트하십시오:

window.addEventListener('load', function(e) {
  if (window.applicationCache) {
    window.applicationCache.addEventListener('updateready', function(e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
          // Browser downloaded a new app cache.
          // Swap it in and reload the page to get the new hotness.
          window.applicationCache.swapCache();
          if (confirm('A new version of this site is available. Load it?')) {
            window.location.reload();
          }
        } else {
          // Manifest didn't changed. Nothing new to server.
        }
    }, false);
  }
}, false);

부인 성명:매니페스트와 캐시에 대한 내 경험은 모두 Safari와 FF가 일부를 다르게 처리할 수 있다는 것입니다.

  1. 당신 말이 맞습니다.찾을 수 없는 매니페스트에 나열된 파일이 있는 경우 캐싱이 발생하지 않습니다.

  2. 온라인 상태이더라도 브라우저는 매니페스트 파일만 확인합니다.매니페스트 파일을 기다리는 동안 캐시에서 사이트를 계속 로드하므로 렌더링이 지연되지 않습니다. 하지만 이는 첫 번째 로드 시 변경 사항이 표시되지 않음을 의미합니다.

  3. 다음에 사이트를 로드할 때 이전 로드에서 매니페스트가 변경된 경우 새 파일이 로드됩니다.

변경 사항을 보려면 항상 두 번 다시 로드해야 합니다.실제로 업데이트를 확인하기 위해 3번이나 새로고침을 해야 할 때도 있었습니다.이유를 모르겠어요.

디버깅할 때 PHP를 사용하여 즉시 매니페스트 파일을 생성하므로 파일 이름에 오타가 발생할 가능성이 없습니다.또한 업데이트를 강제하기 위해 매번 무작위로 버전 번호를 생성하지만 여전히 테스트용 오프라인 웹앱이 있습니다.

완료되면 PHP 파일은 저장된 매니페스트 데이터를 일정한 버전 번호로 에코할 수 있으며 캐시는 항상 사용됩니다.

최근 매니페스트와 캐시를 다루면서 배운 몇 가지 사항이 있습니다.훌륭하게 작동하지만 혼란스러울 수 있습니다.

만료일이 없습니다.캐시를 취소하려면 매니페스트 파일을 아무것도 포함하지 않도록 변경하고 다시 로드해야 합니다.Safari에서 사용자 캐시를 지우면 캐시된 파일이 모두 지워집니다.

나는 같은 문제가 있었다 : 일단 Firefox가 오프라인 파일을 저장하면, 그것을 다시로드하지 않을 것이다. Chrome은 예상대로 작동했으며 매니페스트 파일을 확인하고 매니페스트 파일이 변경되면 모든 것을 다시로드했습니다. Firefox는 서버에서 매니페스트 파일을 다운로드하지 않았으므로 변경 사항을 알 수 없었습니다.

조사 후 Firefox가 캐시 매니페스트 파일 (오프라인 캐시가 아닌 구식 캐시)을 캐싱하고 있음을 알았습니다. 매니페스트 파일의 캐시 헤더 설정 Cache-Control: no-cache, private 문제를 해결했습니다.

캐시 매니페스트를 무효화하고 HTML5 로컬 스토리지를 제거하는 Firefox 애드온을 만들었습니다.

http://sites.google.com/site/keigoattic/home/webrelated#toc-firefox-html5-offline-cache-and-loc

오류 콘솔에서 아래 코드를 입력하여 캐시 매니페스트를 무효화 할 수도 있습니다.

// invalidates the cache manifest
var mani = "http://.../mysite.manifest"; // manifest URL
Components.classes["@mozilla.org/network/application-cache-service;1"].getService(Components.interfaces.nsIApplicationCacheService).getActiveCache(mani).discard();

또는 주소 표시 줄에서 아래 코드를 입력하면 수동으로 업데이트 될 캐시가 시행됩니다.

javascript:applicationCache.update()

흠, 방금 캐시에서 update ()에게 전화를 걸었고, 매니페스트 파일을 편집 한 후, 전체 확인/다운로드/ready 시퀀스를 수신했고, 하나의 재 장전과 JS 중 하나에서 만든 텍스트 변경을 수행했습니다. 내 앱의 초기 페이지에 표시되는 파일이 즉시 나타납니다.

다시로드가 하나만 있으면됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top