2016-10-21 2 views
1

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

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) и ломает мой кэш-первая система, даже если я вхожу успех сообщение при регистрации работника.

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

+0

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

+0

Какие браузеры вы тестируете? – Salva

+0

Я тестирую на рабочем столе и мобильном хроме –

ответ

1

Я не вижу проблемы, что кэширование не выполняется для bundle.js, но при открытии coloursel.io я могу видеть в консоли, что есть ошибка JavaScript в вашем sw.js «неперехваченным ReferenceError: событие не определено в 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); 
     }) 
    ); 
}); 

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

+0

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

0

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

+0

Предлагая библиотеку в полном порядке, но это единственное в ответе не отвечает на вопрос OP вообще. –

Смежные вопросы