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

沙龙怪物

我试图让服务人员缓存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中,我:

  • 创建一个承诺,以便我们可以从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并返回到该应用程序已打开的版本(选项卡)或打开该应用程序的新选项卡时,它应该弹出警报或至少显示有更新的控制台日志。这不是立即发生,而是可能需要一天的时间才能发生。

这是预期的行为还是我缺少什么?谢谢!

沙龙怪物

在重新加载页面之前,不会更新服务工作者。

要使其在不重新加载页面的情况下更新Service Worker,可以使用Service Worker的update()方法:https : //developer.mozilla.org/zh-CN/docs/Web/API/ServiceWorkerRegistration/update

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

刷新时激活更新的服务工作者

如何卸载服务工作者?

Javascript服务工作者:从缓存中获取资源,但也进行更新

服务工作者和客户端请求“缓存控制”:“无缓存”

WebView:以编程方式清除服务工作者缓存

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

具有SSL证书缓存的服务工作者

notificationclick事件服务工作者

由于PWA服务工作者缓存,Auth basic 401页面不提示输入凭据

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

在服务工作者中服务之前,可以编辑缓存的index.html吗?

PWA-服务工作者(反应)如何工作?

Angular PWA错误无法安装站点:未检测到匹配的服务工作者

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

使用Workbox CLI及其服务工作者生成器的PWA无法离线工作

服务工作者中的XMLHttpRequest

离子 PWA 服务工作者 - 没有 CORS

使用 PWA 服务工作者在离线模式下保存/提供 Web 服务

React PWA:如何正确设置清单文件并注册服务工作者

服务工作者从磁盘缓存中缓存资源

服务工作者在反应中缓存的路由

Vue CLI 4 - 清单中的 PWA 插件预缓存无法获取 index.html 并且未注册服务工作者

在线时影响非 GET 请求的服务工作者 - @angular/pwa

创建反应应用程序 pwa 打字稿模板无法检测服务工作者

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api