сбой кэша работника службы

#javascript #caching #service-worker #progressive-web-apps

#javascript #кэширование #service-worker #progressive-веб-приложения

Вопрос:

Я разрабатываю прогрессивное веб-приложение с намерением кэшировать все ресурсы для использования в автономном режиме. Вот мой service worker

     self.addEventListener('install', function(e) {
        e.waitUntil(
           caches.open('default-cache').then(function(cache) {
              return cache.addAll([
                 '/',
                 '/index.html',
                 '/bundle.js',
                 '/libraries/p5.dom.min.js',
                 '/libraries/p5.min.js',
                 '/libraries/p5.sound.min.js',
                 '/sound/spokesm4v.mp3',
                 '/css/flexboxgrid.min.css',
                 '/images/icon-192.png',
                 '/manifest.json',
            ])
        }).then(function() {
            return self.skipWaiting();
        }));
    });

    self.addEventListener('activate', function(e) {
        e.waitUntil(self.clients.claim());
    });

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

Независимо от того, подключен я к Сети или нет, работнику службы не удается кэшировать некоторые ресурсы (в данном случае bundle.js ) и нарушает работу моей системы, основанной на кешировании, даже несмотря на то, что я регистрирую сообщение об успешном завершении после регистрации worker.

https://postimg.org/gallery/2yo1ig35y/

1. Как и в justmarkup, я не получаю никакой ошибки: (Однако после возврата вам не хватает точки с запятой cache.addAll . Кроме того, регистрация и установка service worker выполняются отдельно, поэтому сообщение об успешной регистрации не означает, что service worker установил и кэшировал ресурсы. Просто К вашему сведению.

2. В каких браузерах вы тестируете?

3. Я тестирую на настольном компьютере и мобильном Chrome

Ответ №1:

Я не вижу проблемы, из-за которой происходит сбой кэширования bundle.js но при открытии coloursel.io Я вижу в консоли, что в вашем sw.js «Неперехваченная ошибка ссылки: событие не определено в sw.js:27»

Если вы измените

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

Для

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

работник службы должен работать так, как ожидалось.

1. Отличная уловка, но я пытался решить свою проблему, изменив параметры, вокруг которых вы и видели. Думаю, я забыл изменить его обратно. Основная проблема с кэшированием пакета возникает, вероятно, один раз из каждых десяти или около того переходов на страницу, и воспроизвести причину чрезвычайно сложно. Здорово, что он кэшировался для вас, но это означает, что вы являетесь одним из счастливых случаев, когда это разрешается.

Ответ №2:

Попробуйте использовать sw-precache, должно быть проще