오랜 시간 대기 서비스 근로자에게 요청

Question

서비스 근로자가 캐시의 항목으로 응답하기를 기다리는 시간이 예상보다 빠르다는 것을 알고 있습니다. 나는 sw-precache과 맞춤 서 비스 작업자와 같은 대기 시간을 보았습니다.

이것이 대기 시간 시간의 가능한 원인은이며 어떻게 줄일 수 있을까? > 서비스 노동자 탭 -

self.addEventListener('fetch', function(event) { 
    event.respondWith(
     caches.match(event.request).then(function(response) { 
      if (response) { 
       return response; 
      } 
      return fetch(event.request); 
     }) 
    ); 
}); 

Answer 1

당신이 응용 프로그램에서 당신의 크롬 개발 도구에서 확인 '재 장전에 업데이트'를해야합니까 : 같은 사용자 정의 서비스 작업자에

내 fetch 이벤트가 보인다?

그렇다면 모든 서비스 근로자 코드를 다시 실행하면 문제가 발생할 수 있습니다. 각 재 부하시 sw-precache을 사용할 때 코드가 상당히 복잡 할 수 있습니다.

Answer 2

이벤트이 이상한 대기 시간의 가능한 원인에 대해 답변을 드릴 수는 없지만이를 줄이는 방법을 알고 있습니다.

우리는 event.respondWith()를 사용하여 서비스 작업자의 패치 이벤트를 인터셉트 할 수 있습니다. 어떻게 든 내 경우에는 내 페이지에서 내 서비스 작업자 기본값이 스크립트 태그를 통해 공급 업체의 자바 스크립트를로드하여 캐시 후 네트워크 (자산의 경우) 또는 네트워크 전용 (데이터 페치의 경우)을 수행하는 모든 가져 오기 이벤트를 가로 챌 필요가있는 경우 :

if (shouldLoadOfflinePage) { 
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage))); 
} else if (shouldFromCache) { 
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request)); 
} else { 
    fetchEvent.respondWith(fetch(fetchEvent.request)); 
} 

마지막 블록은 수행이 거의 필요없는 네트워크 전용 요청을 차단합니다. 이 불필요한 블록은 어떻게 든 차단 부하가 발생합니다 (하지만 난 어떤 블록을 모르는) :

long request to serviceworker wait time: ~400ms

그래서 내가 (마지막 블록을 제거하여 물론) 불필요한 가져-차단을 차단하지 않기로 결정 :

if (shouldLoadOfflinePage) { 
    fetchEvent.respondWith(cacheManager.fromCache(new Request(offlinePage))); 
} else if (shouldFromCache) { 
    fetchEvent.respondWith(cacheManager.fromCache(fetchEvent.request)); 
} 

내 페이지는 위의 파일을로드하는 데 16ms 만 필요합니다.

희망이 도움이 될 것입니다.