Служебный работник незарегистрирован в автономном режиме

Question

Таким образом, я создал и успешно зарегистрировал Работника Службы, когда браузер находится в сети. Я вижу, что ресурсы правильно кэшируются с помощью DevTools. Проблема заключается в том, что когда я переключаюсь в автономный режим, работник службы, похоже, отменил регистрацию, и, таким образом, отображается только страница офлайн-страницы google.

Код.

'use strict'; 
var CACHE_NAME = 'v1'; 
var urlsToCache = [ 
    '/' 
]; 

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) { 
     // Cache hit - return response 
     if (response) { 
      return response; 
     } 

     // IMPORTANT: Clone the request. A request is a stream and 
     // can only be consumed once. Since we are consuming this 
     // once by cache and once by the browser for fetch, we need 
     // to clone the 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; 
      } 

      // IMPORTANT: Clone the response. A response is a stream 
      // and because we want the browser to consume the response 
      // as well as the cache consuming the response, we need 
      // to clone it so we have two streams. 
      var responseToCache = response.clone(); 

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

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

И тестовый сценарий, если это помогает.

'use strict'; 
if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js').then(function(registration) { 
    // Registration was successful 
    console.log('ServiceWorker registration successful with scope: ', registration.scope); 

    var serviceWorker; 
    if (registration.installing) { 
     serviceWorker = registration.installing; 
    } else if (registration.waiting) { 
     serviceWorker = registration.waiting; 
    } else if (registration.active) { 
     serviceWorker = registration.active; 
    } 

    if (serviceWorker) { 
     console.log('ServiceWorker phase:', serviceWorker.state); 

     serviceWorker.addEventListener('statechange', function (e) { 
     console.log('ServiceWorker phase:', e.target.state); 
     }); 
    } 
    }).catch(function(err) { 
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err); 
    }); 
} 

Редактировать: Проверка консоли Я нашел эту ошибку. sw.js:1 An unknown error occurred when fetching the script.

Aslo, согласно предложению, я добавил этот код, но проблема не устранена.

this.addEventListener('activate', function(event) { 
    var cacheWhitelist = ['v2']; 

    event.waitUntil(
    caches.keys().then(function(keyList) { 
     return Promise.all(keyList.map(function(key) { 
     if (cacheWhitelist.indexOf(key) === -1) { 
      return caches.delete(key); 
     } 
     })); 
    }) 
); 
}); 

Answer 1

Проблема, по-видимому, исправлена. Для всех здесь, из Google, попробуйте перезапустить браузер.

Answer 2

похоже, что вы еще не добавили какое-либо событие активации, которое предназначено для рендеринга кешированных элементов, когда доступно. Надеюсь, код поможет вам.

self.addEventListener('activate', function(e) { 
    /*service worker activated */ 
    e.waitUntil(
     caches.key().then(function(keyList) { 
     return Promise.all(keyList.map(function(key) { 
     if(key){ 
      //remove old cache stuffs 
      return caches.delete(key); 
     } 
     })); 
     }) 
    ); 
});