서비스 담당자에게 캐시 문제가 발생했습니다

Question

저는 서비스 작업자에게 더 좋습니다. static 및 dynamic 캐싱을 구현하려고합니다.

정적 캐시 요청에 단일 파일을 추가하면 모든 파일을 가지고 있습니다. 현재, 오프라인 모드에서 시작할 때 모든 파일이 서비스 작업자로부터 실행 중입니다. 누군가 나를 도와주세요.

이것은 index.html에있는 코드입니다.

요청 (페이지)의 일부가 캐시 (브라우저의 로컬 저장소에 저장)하는 정적 캐싱에서

 self.addEventListener('install',function(event) 
     { 
     console.log('[service worker]Installing service 
     worker....',event); 
     event.waitUntil(caches.open('static') 
     .then(function(cache) 
     { 
      console.log('[Service Worker] Precaching App Shell'); 
      cache.addAll([ 
         '/', 
         '/signin.html', 
         ]); 
    }) 
) 
}); 

Answer 1

, 그것은 일반적으로 서비스 노동자의 install 이벤트에서 이루어집니다. 반면에 동적 캐싱 페이지 &은 사용자가 요청 (가져 오기) 할 때마다 파일이 캐시되므로 서비스 작업자의 fetch 이벤트를 사용합니다.

그래서, 당신의 install 경우에 당신이 cache.addAll 서비스 노동자에 '/'를 추가 할 때이 '/' 즉 루트 디렉토리를 표시하는 데 필요한 모든 파일과 자원을 추가합니다. 이제

, 캐시 된 파일을 사용할 수 있도록하고이 같은 것을 구현해야합니다동적 캐싱을 구현할 수 :

self.addEventListener('fetch', function (event) { 

    event.respondWith(
     caches.match(event.request)  // if data has been cached already 
     .then(function (response) { 
      if (response) { 
      return response; 
      } else {    // else fetch from internet & cache in DYNAMIC cache 
      return fetch(event.request) 
       .then(function (res) { 
       return caches.open(CACHE_DYNAMIC_NAME) 
        .then(function (cache) { 
        cache.put(event.request.url, res.clone()); 
        return res; 
        }) 
       }) 
       .catch(function (err) {   //fallback mechanism 
       return caches.open(CACHE_STATIC_NAME) 
        .then(function (cache) { 
        if (event.request.headers.get('accept').includes('text/html')) { 
         return cache.match('/offline.html'); 
        } 
        }); 
       }); 
      } 
     }) 
    ); 
});     

참고 : 당신이 수도 로컬 스토리지를 크롤 링을 통해 방지하기를 실제로 저장소에 파일을 저장하기 전에 몇 가지 전략을 구현하고 싶습니다.
자세한 내용은 this을 읽고 전략에 대해 자세히 알아보십시오.