2017-01-12 4 views
5

Служба рабочий код, я в настоящее время экспериментирует с внешностью, как это частичноУправление службы рабочий кэш

self.addEventListener('install', function(event) { 
    event.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       '/react-redux/node_modules/react/dist/react-with-addons.js', 
       '/react-redux/node_modules/react-dom/dist/react-dom.js', 
       '/react-redux/a.js' 
      ]); 
     }) 
    ); 
}); 

С конечно стандартный выборки прослушиватель события, который возвращает из кэша, или запускает сетевой запрос, если элемент не там.

Но что, если, как в примере выше, a.js, и только a.js будет обновлён, как я получаю работника службы, чтобы обновить этот файл, но только этот файл; и как я могу обеспечить, чтобы в следующий раз, когда пользователь просматривает мою страницу, они не будут вытащить теперь устаревшую версию файла у рабочего?

Лучшее, что я могу себе представить, что бы добавить попойку кэша этих файлы URLs, например

'/react-redux/node_modules/react/dist/react-with-addons.js?hash=1MWRF3...'

обновит любой модуль загрузчика я использую, чтобы запросить эти файлы с тем же самым, током hash/cache buster, а затем в событии установки SW перебирайте текущие ключи кеша и удаляйте все, что устарело, и добавьте все, что отсутствует.

, похоже, решает обе проблемы: когда файл обновляется, сетевой запрос, который был отправлен, не будет соответствовать чему-либо в текущем рабочем месте, и поэтому произойдет тот же сетевой резерв; и вставка выборочного кэша в событии установки Service Worker не будет пытаться добавить что-то в кеш, который уже существует и текущий.

И, конечно, код Service Worker будет меняться по мере изменения этих значений хэша (автоматически из процесса сборки), и поэтому получение SW для повторной установки при изменении файлов также произойдет.

Но я не могу не думать, что есть более простой способ. Здесь?

ответ

5

Ваше понимание того, что должно в идеале произойти, и трудности с обеспечением эффективного и надежного обновления кэшированных активов, происходит на месте.

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

+0

Отлично - посмотрим на эти ресурсы. Благодаря тонну. Итак ... ты знаешь/работаешь с Джейком Арчибальдом? :) –

+3

Да, у меня есть честь быть сотрудником Джейка! –

+0

Итак, sw-precache - как в мире он интегрируется с загрузкой на стороне клиента/модулем? Вы можете использовать Webpack, SystemJS или другие параметры - делает ли sw-precache правильный URL-адрес для использования, и вы несете ответственность за их синхронизацию с вашим загрузчиком? –

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