서비스 근로자가 오프라인 모드로 작동하지 않는 이유

Question

앱에 오프라인 액세스를 제공하려고합니다. 그러나 코드가 작동하지 않습니다.

캐시가 생성되고 모든 파일을 저장하지만 오프라인 모드에서 페이지를 다시로드 할 때 데이터 만로드되고 스타일은 적용되지 않습니다.

크롬 버전 : 버전 61.0.3163.100

는 //

가

if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js') 
     .then(function() { 
      console.log('service worker reistered'); 
     }); 
} 

// 서비스 작업자 JS

self.addEventListener('install', function (event) { 
     event.waitUntil(
     caches.open('static').then(function (cache) { 
      return cache.addAll([ 
       '/', 
       'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', 
       'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', 
       '/index.html', 
       '/styles.css', 
       '/app.js' 
      ]); 
     }) 
    ); 
}); 

Answer 1

당신은 당신의 service-worker.js에 fetch 핸들러를 필요 app.js. install 처리기 내부의 캐시에 항목을 추가하는 동안 캐시에서 항목을 제공하여 fetch 이벤트에 응답하지 않습니다.

install, activate 및 fetch 이벤트를 사용하여 캐시를 미리 캐시하고 콘텐츠를 제공하는 몇 가지 기본적인 예가 있습니다 (예 : this sample).

더 많은 자동화 된 솔루션으로, 내가 작업하는 Workbox과 같은 도구를 웹 응용 프로그램의 빌드 프로세스에 통합하여 필요한 로컬 리소스가 자동으로 미리 캐싱되고 최신 상태로 유지되도록하는 것이 좋습니다. 사용자를 대신하여 서비스 작업자 파일을 생성 할 수 있습니다.