registerNavigationRoute: precached index.html не обновляется NetworkFirst - PullRequest
Новая
       66

registerNavigationRoute: precached index.html не обновляется NetworkFirst

0 голосов
/ 24 мая 2018

Контекст

У меня есть SPA, использующий webpack, vueJS и Workbox.В сервис-работнике у меня есть следующие строки (): 

workbox.precaching.precache([
  '/index.html'
])

workbox.routing.registerNavigationRoute('/index.html', {
  blacklist: [
    /.*\.css/,
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
  ]
})

Проблема

Когда приложение создается впервые, app.jsфайл теперь называется app.xxxxxxxx.js (например).Поэтому, когда клиент использует работника сервиса, он предварительно кэширует файл index.html со следующей строкой внутри:

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

, когда я обновляю приложение и перестраиваю его, app.js файл будет называться app.yyyyyyyy.js и НО клиент все равно будет кэшировать файл index.html, используя старый файл app.xxxxxxxx.js, поэтому приложение не будет работать (очевидно ...)

Ожидаемое поведение

Работник службы, похоже, получает предварительно кэшированный файл index.html с использованием стратегии CacheFirst.Я думаю, это будет работать, если он использует стратегию NetworkFirst.

Возможно ли это сделать?

- РЕДАКТИРОВАТЬ -

Я забыл уточнить: каждый .js файл кэшируется с использованием стратегии NetworkFirst: 

workbox.routing.registerRoute(
  /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/,
  workbox.strategies.networkFirst({
    cacheName: 'assets-cache',
    plugins: [
      new workbox.expiration.Plugin({})
    ],
  })
)

1 Ответ

0 голосов
/ 24 мая 2018

Вы должны использовать workbox-webpack-plugin, чтобы автоматически сделать «моментальный снимок» ваших локальных webpack ресурсов и заставить его сгенерировать «предварительный кэш-манифест» всех файлов, которые в итоге были переданы вна workbox.precaching.precache([]).

Это гарантирует, что при каждом повторном развертывании index.html Workbox будет обновлять ранее кэшированную запись.Я бы порекомендовал прочитать этот материал о том, как ведет себя предварительное кэширование.

(Когда вы заходите на свой сайт по http://localhost URL-адресу, должно быть сообщение об ошибке, зарегистрированное в консоли JS на вашем компьютере.предупреждение браузера об этом, когда в манифесте с предварительным кэшированием есть записи, которые, как представляется, вводятся «вручную». Однако это легко пропустить.)

...