Как мне на самом деле отобразить мой обновленный index.html из Workbox? - PullRequest
Новая
       10

Как мне на самом деле отобразить мой обновленный index.html из Workbox?

0 голосов
/ 14 сентября 2018

У меня полностью статичный сайт - index.html и некоторые файлы CSS / JS / PNG.Я хотел бы использовать работника службы для кэширования всех из них.Кажется, что Workbox должен сделать это легко.Вот мой sw.js: 

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute('/index.html');

А вот мой скрипт сборки: 

const workboxBuild = require("workbox-build");

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = async () => {
  console.log("Generating sw.js...")

  const {count, size, warnings} = await workboxBuild.injectManifest({
    swSrc: "src/sw.js",
    swDest: "build/sw.js",
    globDirectory: "build",
    globPatterns: [
      "**/*.{js,css,html,png}",
    ]
  })

  warnings.forEach(console.warn);
  console.log(`${count} files will be precached, totaling ${size} bytes.`);
}

buildSW();

Кажется, что все работает нормально.Запускается скрипт сборки, сервисный работник активирован, и мой сайт продолжает работать, даже когда я не в сети.Фантастика!

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

Precaching 1 file. 35 files are already cached.

Я считаю, что это правильно, оно кэширует новый индекс.HTML после отображения кэшированного.Тогда при следующей перезагрузке должен отобразиться новый index.html, верно?

Неверно!Перезагрузите снова, и старый index.html все еще отображается.Повторите это много раз, без изменений.Чтобы на самом деле увидеть новый index.html, нормальная перезагрузка никогда не сработает, мне нужно сделать ctrl + shift + R.

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

РЕДАКТИРОВАТЬ: Я поставил нелепоПростой пример этой проблемы на GitHub .Я чувствую себя очень глупо - пример очень прост, но я до сих пор не могу понять, почему он ведет себя так, как он.

1 Ответ

0 голосов
/ 16 сентября 2018

Хорошо, я тупо разобрался с ответом вскоре после создания награды. Как говорит https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle:

"После успешной установки обновленный работник будет ждать, пока существующий работник не будет контролировать нулевых клиентов. (Обратите внимание, что клиенты обновляются во время обновления.)"

Таким образом, обновление никогда не переключится на новую версию, вы должны полностью закрыть все открытые вкладки своего приложения и затем снова перейти к нему. Это похоже на работу.

...