Кэширование работника службы PWA / обновление ожидаемого поведения

Question

Я пытаюсь разобраться с кэшированием работника сервиса для приложения Ionic Angular.

Моя цель - сделать всплывающее предупреждение: "Доступно новое обновление, нажмите, чтобы перезагрузить приложение",

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

Я использую четыре файла:

• сервис-worker.js
• index.html
• myapp.page.ts
• .htaccess

В service-worker.js я:

• назвать кеш
• установить CACHE_VERSION для использования при обновлении
• используйте панель инструментов для установки приоритета сети / кэша

,

'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'my-cache'
};

const CACHE_VERSION = 1;

self.toolbox.router.get('assets/*', self.toolbox.cacheFirst);
self.toolbox.router.get('build/*', self.toolbox.networkFirst);
self.toolbox.router.get('/', self.toolbox.networkFirst);
self.toolbox.router.get('manifest.json', self.toolbox.networkFirst);

В index.html я:

• создайте обещание, чтобы мы могли подключиться к onupdatefound работника сервиса из myapp.page.ts

,

 <script>
    // make the whole serviceworker process into a promise so later on we can
    // listen to it and in case new content is available a toast will be shown
    window.isUpdateAvailable = new Promise(function(resolve, reject) {
      // checks if serviceWorker is supported and disable service workers while developing
      if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
        // register service worker file
        navigator.serviceWorker.register('service-worker.js')
          .then(reg => {
            reg.onupdatefound = () => {
              const installingWorker = reg.installing;
              installingWorker.onstatechange = () => {
                switch (installingWorker.state) {
                  case 'installed':
                    if (navigator.serviceWorker.controller) {
                      // new update available
                      console.log("new update available");
                      resolve(true);
                    } else {
                      // no update available
                      resolve(false);
                      console.log("up to date");
                    }
                    break;
                }
              };
            };
          })
          .catch(err => console.error('[SW ERROR]', err));
      }
    });
  </script>

В myapp.page.ts я следовал за этой статьей: https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717:

• слушайте обещание, которое мы создали в index.html
• всплывающее предупреждение
• когда пользователь нажимает перезагрузить, удалите кэш и перезагрузите страницу

,

public ngOnInit () {

    // listen to the service worker promise in index.html to see if there has been a new update.
    // condition: the service-worker.js needs to have some kind of change - e.g. increment CACHE_VERSION.
    window['isUpdateAvailable']
      .then(isAvailable => {
        if (isAvailable) {

          console.log('Update is available');

          const alert = this.alertController.create({
            title: 'New Update available!',
            message: 'Please reload the app to continue.',
            buttons: [
            {
              text: 'Reload',
              handler: () => {
                caches.delete("my-cache");
                location.reload(true);                
              }
            }]
          });
          alert.present();
        }
      });
  }

В.htaccess я:

• установите заголовки для service-worker.js, чтобы он не кэшировался:

,

  <Files service-worker.js>
    <IfModule mod_headers.c>
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires 0
    </IfModule> 
</Files>

Затем я увеличиваю значение const CACHE_VERSION, чтобы вызвать изменение в файле service-worker.js.

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

Это ожидаемое поведение или я что-то упустил? Спасибо!

Answer 1

Работник сервиса не обновляется, пока страница не будет перезагружена.

Чтобы он обновлял работника службы без перезагрузки страницы пользователем, вы можете использовать метод update() работника службы: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

Например, чтобы проверять нового работника службы каждые полчаса:

 setInterval(() => {
    console.log("force check our service-worker from the server")
    reg.update();
 }, 1800000);