PWA 服务工作者缓存/更新预期行为

Question

我正在尝试为 Ionic Angular 应用程序缓存 Service Worker。

我的目标是弹出一个警告：“有新的更新可用，点击重新加载应用程序”，

我相信根据我的阅读，我已经遵循了所有正确的做法，但我缺少一些东西，因为我无法可靠地在更新后弹出警报。它会弹出，但最多可能需要 24 小时 - 这是预期的行为吗？

我正在使用四个文件：

• service-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 中我：

• 创建一个承诺，以便我们可以从 myapp.page.ts 挂钩到 service worker 的 onupdatefound

.

 <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 I 中：

• 设置 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

在页面重新加载之前，Service Worker 不会更新。

要在不重新加载页面的情况下更新 service worker，你可以使用 service worker 的 update() 方法： https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

例如每半小时检查一次新的 Service Worker：

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