ServiceWorker更新后如何刷新页面?

2024-01-10

我查阅了很多有关 Service Workers 的资源:

  • 更新您的 ServiceWorker https://jakearchibald.com/2014/using-serviceworker-today/#updating-your-serviceworker
  • ServiceWorker:Web 平台的革命 https://ponyfoo.com/articles/serviceworker-revolution
  • 杰克阿奇博尔德很可爱SVGOMG https://github.com/jakearchibald/svgomg/blob/6c21157b65dd779bbf2dd2adf9831aaf71d4bb08/src/js/sw/index.js.

但是,我一生都无法弄清楚如何在安装新的 ServiceWorker 后更新页面。无论我做什么,我的页面都停留在旧版本上,只有硬刷新(Cmd-Shift-R)才能修复它。不能同时使用 1) 关闭选项卡、2) 关闭 Chrome 或 3)location.reload(true)将服务新内容。

我有一个超级简单的示例应用程序 https://github.com/nolanlawson/serviceworker-update-demo主要基于 SVGOMG。安装时,我使用缓存一堆资源cache.addAll(),我也这样做skipWaiting()如果当前版本的主版本号与活动版本号不匹配(基于 IndexedDB 查找):

self.addEventListener('install', function install(event) {
  event.waitUntil((async () => {
    var activeVersionPromise = localForage.getItem('active-version');
    var cache = await caches.open('cache-' + version);
    await cache.addAll(staticContent);
    var activeVersion = await activeVersionPromise;
    if (!activeVersion ||
      semver.parse(activeVersion).major === semver.parse(version).major) {
      if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
        self.skipWaiting();
      }
    }
  })());
});

我正在使用受 semver 启发的系统,其中主版本号表明新的 ServiceWorker 无法热插拔为旧的 ServiceWorker。这适用于 ServiceWorker 端 - 从 v1.0.0 到 v1.0.1 的更新会导致工作线程在刷新时立即安装,而从 v1.0.0 到 v2.0.0,它会等待选项卡关闭并重新打开,然后再重新安装。安装。

回到主线程,我在注册后手动更新 ServiceWorker - 否则页面永远不会收到有新版本的 ServiceWorker 可用的备忘录(奇怪的是,我发现 ServiceWorker 文献中很少提到这一点):

navigator.serviceWorker.register('/sw-bundle.js', {
  scope: './'
}).then(registration => {
  if (typeof registration.update == 'function') {
    registration.update();
  }
});

但是,无论我将版本增加到 1.0.1 还是 2.0.0,提供给主线程的内容始终停留在旧版本的页面上(“我的版本是 1.0.0”)。

我有点困惑在这里。我希望找到一个优雅的 semver-y 解决方案来实现 ServiceWorker 版本控制(因此我使用require('./package.json').version),但在我当前的实现中,用户永远停留在旧版本的页面上,除非他们硬刷新或手动清除所有数据。 :/


发现问题——你需要避免any在 ServiceWorker JS 文件本身上缓存标头。将缓存设置为max-age=0立即解决了问题:https://github.com/nolanlawson/serviceworker-update-demo/pull/1 https://github.com/nolanlawson/serviceworker-update-demo/pull/1

为杰克·阿奇博尔德(Jake Archibald)纠正我的错误干杯:https://twitter.com/jaffathecake/status/689214019308224513 https://twitter.com/jaffathecake/status/689214019308224513

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ServiceWorker更新后如何刷新页面? 的相关文章

随机推荐

  • Flutter - 使用 showDialog 时无法在父树中找到块

    我在一个小应用程序中使用 Flutter 和 flutter bloc 并且我使用 MultiBlocProvider 在主主页中使用我需要的多个 BlocProvider 并且在主页下有一个 MainWidget 它可以通过以下方式轻松访
  • 为什么以及何时在 asp.net 中重写和使用 OnPreRender

    我正在编写由另一位开发人员编写的代码 如下所示 protected override void OnPreRender EventArgs e PopulateGrid base OnPreRender e 我会打电话给PopulateGr
  • BroadcastReceiver和Activity之间的通信 - android

    我的应用程序中有一个广播接收器 每次用户接到来电时都会触发该接收器 现在 当它发生时 我需要广播接收器在特定活动中调用特定方法 现在 我试图使这个方法成为静态的 从而可用 但有些东西告诉我这是一个非常糟糕的主意 因此 我尝试在我的活动中实例
  • 如何在倒排索引结构中搜索短语查询?

    如果我们想在倒排索引结构中搜索像 t1 t2 t3 这样的查询 t1 t2 t3必须排队 我们应该采取哪些措施 1 首先我们搜索 t1 术语并找到包含 t1 的所有文档 然后对 t2 和 t3 执行此操作 然后找到 t1 t2 和 t3 位
  • 从 visio 检测 IE 上的事件

    我可以在 IE 页面上的按钮和 visio 事件之间建立链接吗 例如 只需单击 IE 页面上的按钮即可更改形状的颜色 除非您也可以访问 IE 中的 HTML 内容 否则这并不容易 但是您可以使用 VBA 类 该类实现 withevents
  • 控制狂:提交被拒绝。 Bitbucket 中不允许 Foxtrot 合并

    究竟是什么原因Control Freak Commit rejected Foxtrot merges not allowed 我们经常收到此错误 这是由于以下原因的组合造成的pull rebase and amend用户在提交时 需要明确
  • 在自定义组件中,在样式标签中加载样式更快还是使用链接标签更快?

    我正在开发一些自定义组件 我想知道在模板内的样式标签中加载样式或使用链接标签是否是最佳实践 rel stylesheet 来调用样式 使用样式标签 const template document createElement template
  • 用 OCaml 编写解释器 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在大学学习一门课程 要求我从操作语义开始 用 OCaml 编写一种语言的解释器 不幸的是 除了课程
  • Objective-C 接口的前向声明

    我如何转发声明这个对象 interface MyClass NSObject
  • Node.js 和 Microsoft SQL Server

    有什么方法可以让我的 Node js 应用程序与 Microsoft SQL 进行通信吗 我还没有见过任何 MS SQL 驱动程序吗 我正在将一个非常简单的应用程序放在一起 并且需要能够与现有的 MS SQL 数据库进行通信 否则我会使用
  • 使用 Google 脚本将图像保存到电子表格

    我正在尝试使用 jSignature 将签名板添加到 Google 表格 我添加了一个记录签名的对话框 如下所示 Code gs function showDialog var html HtmlService createHtmlOutp
  • 无法通过android NDK(camera2 api)获取相机列表

    尝试使用 Qt5 12 3 和 android ndk 构建应用程序 但无法通过 ACameraManager getCameraIdList 获取相机列表 手机 索尼 xperia XA1 Ultra Qt 5 12 3 NDK r19c
  • “ngserve”命令适合生产吗?

    我正在使用 Angular 7 构建一个小项目 当你运行时 ng serve NodeJS 服务器启动来处理请求 每个请求是否会阻塞直到处理完成 我们正在尝试评估在生产中使用它与使用更传统的应用程序服务器相比有多有效 Run build p
  • Kotlin:对以函数作为参数的函数进行单元测试

    我有一个从存储库中检索项目列表的函数 我没有使用常规回调 而是传入一个函数并使用结果调用它 但是如何对这种功能进行单元测试呢 是否有某种方法可以验证传入的函数是否正在被调用 或者我应该重构并使用常规回调并使用模拟回调接口对其进行测试 My
  • 如何从 HTML 中获取所有 标记之间的数组中的文本?

    我想在所有之间获取数组中的文本 span span 来自 HTML 的标签 我尝试过使用此代码 但它只返回一次 preg match span lt span gt is row tbl highlighted icon content m
  • 用于分配分片索引的 Zookeeper

    我在网上看到过一些关于使用 Zookeeper 在服务器上线时为其分配分片编号的帖子 假设您正在跨集群对数据进行分片 但我一生都找不到如何执行此操作的 Java 代码示例 有人已经可以使用这个了吗 谢谢 跨集群分片数据有很多细节 例如复制和
  • Numpy 数组:序列太大

    我有一个大小的数组11称为 波长 和更大的尺寸数组n称为 MN 而 模型 是一个m by n array 我正在这样做 for i in xrange 10 len wavelength 2 y np empty model MN i fl
  • 如何使用“chosen.js”插件在 MVC 3 中实现多重选择

    如何实施chosen http harvesthq github io chosen MVC 3 的插件 对于这种类型的输出 这是我的代码 如何使 selected js 与 javascript MVC 一起工作 这是我的下拉列表的代码
  • 如何覆盖android中的操作栏后退按钮?

    我想自定义操作栏中的活动后退按钮 而不是硬键后退按钮 我已经覆盖了onBackPressed 方法 它适用于我的模拟器后退按钮 但不适用于操作栏后退按钮 我希望它能通过操作栏发生 我怎样才能做到这一点 这是我的代码 Override pub
  • ServiceWorker更新后如何刷新页面?

    我查阅了很多有关 Service Workers 的资源 更新您的 ServiceWorker https jakearchibald com 2014 using serviceworker today updating your ser