2017-10-24 2 views
0

서비스 근로자를 사용하여 웹 서버의 파일을 캐시하기 시작했습니다. Google이 제안한 정확한 코드를 사용하고 있습니다. HERE. 서비스 작업자 스크립트를 내 사이트 루트 폴더에 업로드하고 서비스 작업자가 파일을 캐시하도록하려는 페이지에 링크를 포함 시켰습니다.JS Service Worker가 실행되고 싶지 않습니다.

서비스 근로자가 urlsToCache 변수에있는 파일 만 캐시하고 서비스 작업자는 서비스 작업자 스크립트가 호출 된 (연결되어있는) 페이지에서만 작업한다는 인상하에있었습니다.

내 사이트에 서비스 직원이 아무 것도하지 않기를 바라는 몇 페이지가 있습니다. 그러나, 그것은 여전히 ​​어떻게 든 참조되고있는 것으로 보인다. 해당 페이지에는 서비스 작업자 스크립트에 대한 링크가 전혀 포함되어 있지 않습니다. 나는 때마다 나는 내 콘솔에서 다음과 같은 오류가 나타납니다 POST 방법을 사용하여 AJAX 명령을 실행하는 것으로 나타났습니다 : cache.put(event.request, responseToCache);

URL입니다 내 AJAX 호출 :

Uncaught (in promise) TypeError: Request method 'POST' is unsupported

at service-worker.js:40

at anonymous

라인 (40)이 코드 조각입니다 를 가리키고 있습니다. 내 서비스 작업자 스크립트에 대한 링크도 포함되어 있지 않습니다.

제 질문은 두 가지 질문입니다.

1.) 누구든지 내가 받고있는 오류 메시지를 이해하고 해결 방법을 알고 있습니까?

2.) 서비스 담당자 스크립트가 처음에 스크립트에 연결되지 않은 페이지에서 실행되는 이유는 무엇입니까? 여기

내가 사용하고 전체 서비스 작업자 스크립트입니다 서비스 노동자가 독립적으로 귀하의 웹 사이트의 실행 설치되면

var CACHE_NAME = 'my-site-cache-v1'; 
var urlsToCache = [ 
    'assets/scripts/script1.js', 
    'assets/scripts/script2.js', 
    'assets/scripts/script3.js' 
]; 

self.addEventListener('install', function(event) { 
    // Perform install steps 
    event.waitUntil(
     caches.open(CACHE_NAME) 
     .then(function(cache) { 
       console.log('Opened cache'); 
       return cache.addAll(urlsToCache); 
     }) 
    ); 
}); 


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

     return fetch(fetchRequest).then(
      function(response) { 
      // Check if we received a valid response 
       if(!response || response.status !== 200 || response.type !== 'basic') { 
        return response; 
       } 

       var responseToCache = response.clone(); 

       caches.open(CACHE_NAME) 
       .then(function(cache) { 
        cache.put(event.request, responseToCache); 
       }); 

       return response; 
      } 
     ); 
     }) 
    ); 
}); 

답변

1

, 모든 요청은 가져 오기 - 이벤트 핸들러를 통해 갈 것입니다 서비스 노동자를 의미 다른 페이지도 제어합니다.

서비스 근로자는 캐시 된 urlsToCache뿐만 아니라 fetch-eventhandler (38-41 행)에서 페치 된 즉시 응답을 캐시합니다. 이것은 또한 첫 번째 질문에 대한 답변으로 연결됩니다. 코드는 http 메소드와 상관없이 모든 응답을 캐시하지만, HTTP POST 응답을 캐시 할 수 없다는 오류 메시지가 표시됩니다.

+0

이제는 더 좋습니다. 서비스 작업자를 통해 특정 페이지가 캐시되지 않도록 차단할 수 있습니까? – Austin

+0

물론 fetch 이벤트 핸들러에서 자신 만의 로직을 정의 할 수 있습니다. –

+0

감사합니다. 그게 내가 끝내고 지금은 잘 작동하는 것 같습니다. – Austin