Question

我正在努力使服务人员缓存Ionic Angular应用程序。

我的目标是弹出警报：“有可用的新更新，请单击以重新加载应用程序”，

我相信我已根据阅读情况遵循了所有正确的做法，但是由于我无法可靠地获取更新后弹出的警报，因此缺少了一些东西。它会弹出，但最多可能需要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 I：

创建一个承诺，以便我们可以从myapp.page.ts进入服务工作者的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中，我：

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

例如，每半小时检查一次新的服务人员：

VBoxManage guestproperty get vm "/VirtualBox/GuestInfo/Net/0/V4/IP"

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

1 个答案: