ServiceWorker 내가 오프라인 기능의 혜택 싶습니다

Question

작업을로드하는 페이지를 새로 고침, 그래서 의지를 설치하는

self.addEventListener('install', function (event) { 
    event.waitUntil(caches.open(cacheName).then(cache => cache.addAll([ 
     "/", 
     self.location.href 
    ]))); 

    self.skipWaiting(); 
}); 

CSS를 같은 페이지 그 자체 및 기타 자산을 설치에 캐시하십시오 만들고 JS 있어요 작업자를 위해 단 한 번만 실행하면, 매주 또는 적어도 수시로 자산이 새로 고쳐 지도록 할 수 있습니까?

Answer 1

새 캐시 이름 당신이 당신의 웹 사이트의 새로운 버전을 배포 할 때마다 정의하여이를 얻을 수 있습니다

//change cache name with each deploy 
var staticCacheName = 'NewWithEachDeploy'; 

self.addEventListener('install', function (event) { 
    event.waitUntil(
    caches.open(staticCacheName).then(function (cache) { 
     return cache.addAll([ 
     'index.html', 
     '...' 
     ]); 
    }) 
); 
}); 

그런 다음에 모든 이전 캐시를 삭제 활성화하십시오.

self.addEventListener('activate', function (event) { 
    event.waitUntil(caches.keys().then(function (keyList) { 
     return Promise.all(keyList.map(function (cacheKey) { 
      //delete all caches which do not equal with the current cache name (staticCacheName) 
      if (cacheKey !== staticCacheName) { 
       console.log('[ServiceWorker] Removing old cache', cacheKey); 
       return caches.delete(key); 
      } 
     })); 
    })); 
}); 

이렇게하면 모든 리소스가 한 번에 업데이트됩니다. 그렇지 않으면 문제가 생길 수 있습니다. 예를 들어 캐쉬 된 HTML은 최신 버전으로 업데이트되지만 JS 파일은 여전히 ​​오래된 것으로 별자리가 잘 어울리지 않을 수 있습니다.

Answer 2

바닐라 JS를 사용하여 캐시 만료를 구현하는 것은 다소 어려울 수 있지만 Google에서는 Workbox을 사용해 볼 수 있습니다. 이 개념은 cache expiration입니다.

슈퍼 기본 예제 :

const cacheExpirationPlugin = new workbox.cacheExpiration.CacheExpirationPlugin({ 
    maxEntries: 50, 
    maxAgeSeconds: 24 * 60 * 60 
}); 

당신은 그것을 here에 대한 자세한 내용을 읽을 수 있습니다.