Получите обновленные файлы и удалите старый кеш в сервисном работнике - PullRequest
Новая
       8

Получите обновленные файлы и удалите старый кеш в сервисном работнике

0 голосов
/ 19 декабря 2018

Я пытаюсь создать простой автономный доступ с помощью сервисного работника.

HTML: 

<html>
    <body>
        Hello World
    </body>
    <script src="sample.js"></script>
</html>

sample.js: 

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sample-service.js');
};

sample-service.js: 

var sampleCache = "sample1";
var cacheFiles = ['sample.html', 'sample.js'];

self.addEventListener('install', function (e) {
    e.waitUntil(caches.open(sampleCache).then(function (cache) {
        return cache.addAll(cacheFiles);
    }));
});

self.addEventListener('activate', function (event) {
    event.waitUntil(caches.keys().then(function (cacheNames) {
        return Promise.all(cacheNames.filter(function (cacheName) {
            if(cacheName!=sampleCache)
            return true;
        }).map(function (cacheName) {
            return caches.delete(cacheName);
        }));
    }));
});

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

Я считаю, что автономная часть работает нормально.Я могу получить доступ к html-файлу, даже если сервер не работает.Однако если я обновлю html и изменим номер версии моего кеша в sample-service.js, я увижу две вещи:

  • Обновленный HTML-код не отображается
  • Более старыйкеш не удаляется.

PFB снимок экрана:

enter image description here

Куда я иду не так?Я даже закрыл вкладку и открыл ее снова.Я даже перезапустил браузер.Но обновленный HTML-контент не отображается.

...