问题标签 [service-worker-events]

sw.js我有这个从互联网上获得的服务工作者文件 ( )：

在我网站的每个页面上，比如index.html, about.html, contact.html，我都有以下代码：

我在每个页面上都有此代码的原因是因为我的网站上有很多页面，并且如果用户登陆我网站的任何页面，我希望浏览器缓存所有文件。

现在举个例子，当用户访问 时about.html，Service Worker 会缓存列出的所有文件sw.js并缓存当前页面，即使它没有列出在sw.js. 这正是我想要的，因为我的网站上有数百个页面，我不想在sw.js文件中手动列出所有这些页面。问题是，当我sw.js更新. 每当用户再次访问此页面时，都会显示旧文件，而所有其他文件都是新文件。sw.jsabout.htmlabout.html

我该如何克服这个问题？我想绝对删除我的网站缓存的所有文件，而不仅仅是列出的文件sw.js，因为about.html没有列出，所以这个缓存的页面不会更新。

基本上这个问题： https ://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17360912/

Service Worker：注册期间未发送凭据
作者：Yannick S.
创建时间：2018 年 5 月 3 日

在经过身份验证的场景中使用 navigator.serviceWorker.register('service-worker.js') 注册服务工作人员时，获取服务工作人员的请求会省略带有凭据的 Authorization 标头，从而导致 401 错误。（其他浏览器在获取 service worker 时会发送凭据。） register 返回的 promise 被 TypeError: invalid 参数拒绝。

这似乎也适用于 Chrome 和 Firefox，我在请求中没有看到 Authorization 标头。有一个选项用于register(file, { scope })但仅用于指定服务工作者范围。

是否有类似links传递凭据的选项？
<link crossorigin="use-credentials">

我正在使用 Angular 服务工作者进行离线缓存，大多数情况下，该应用程序将仅在离线模式下使用，因此在初始应用程序启动时，我想在缓存完成后显示“应用程序准备使用”快餐栏，以使确保所有后台缓存都已完成，并且应用程序已完全准备好离线。是否有检测缓存完成过程的选项？因为我在官方文档中找不到任何东西，谷歌搜索也没有帮助。

关于这个 api https://developer.mozilla.org/en-US/docs/Web/API/Cache，我还想设置cache lifetime.

比方说，cache this request for no longer than 10 minutes

我正在为我的论文研究服务人员。我了解生命周期的工作原理，但我无法理解服务人员的默认更新行为。

当安装一个新的 service worker 时，当安装一个旧的 service worker 时，service worker 将不得不等待激活。使用 self.skipWaiting() 和 self.clients.claim() 可以完全激活 service worker 并控制页面。我不明白为什么这不是默认行为。我能找到的主要原因是保持代码和数据的一致性（https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694）。有了对生命周期的一些基本了解，当服务工作者更新或我遗漏了什么时，难道不能同时保持代码和数据的一致性吗？还有其他原因吗？

这种行为在过去是否也有所不同？之后是否添加了 skipWaiting() 和 clients.claim() ？

我们正在使用 Workbox 来预缓存“下一个”页面的一些资产，但我们的资产 URL 包含部署的日期和哈希值。例如“/css/2019-05-15/f00ba5/home.css”。

我们面临的问题是如何将 URL 的变化部分（“2019-05-15/f00ba5”）传递给 service worker，并使 Workbox 预缓存资产列表。

我们正在使用 Workbox，我们尝试使用 workbox-window 从网页向 SW 发送消息，直到这里......它成功了！

但是现在 SW 知道哈希，我们不知道如何利用它，因为如果我们从事件侦听器内部调用 workbox.precaching.precacheAndRoute() 方法，workbox.precaching 模块的导入会以某种方式失败.

在 page.html

在 service-worker.js

我得到错误

我希望它能够工作并预缓存precacheManifest数组中的文件。

我们正在使用工作箱。如果用户打开已安装的 PWA 并且有新版本可用，我们会以编程方式刷新页面。

如果我们在应用程序位于用户设备的后台时这样做，那将是更好的用户体验。

我没有在谷歌和 SO 上找到任何参考。

有这方面的例子吗？如果我做一个，有人会觉得有用吗？

我很惊讶这些天这不是事实上的方法，但也许我在这里遗漏了一些东西......

我正在考虑以下方法：

1. Service Worker 正在从服务器轮询以检查是否有新版本可用（或通过 WebSocket 连接）

2. 如果找到新版本，服务工作者会检查应用程序是否处于活动状态/在前台。如果是，通知用户新版本，并提供更新的刷新。如果不是，则以编程方式进行重新加载，并在加载时恢复应用程序的状态。

如果有人知道对此有更好的方法，我将不胜感激。

问题声明：

Refused to execute script from 'https://something.test.in/21.13888aeefb423ea1abff.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

可能导致问题的软件包：

• 反应样板v3.4.0
• 反应v15.4.1
• Webpack v2.3.3
• 离线插件v4.5.2

问题是随机复制的，无法通过任何方法追踪

问题的可能原因： 部署后服务人员更新和安装

针对上述原因申请的解决方案：

结果：问题未解决

用于生产的 Webpack 配置：

Service Worker 不会安装，并且会一直处于冗余状态。刷新页面将添加更多处于冗余状态的服务工作者（灰色指示符）。

我在 self.addEventListener 函数参数中尝试了 console.log("installed") 并且它有效。Service Worker 被标记为已激活并正在运行（绿色指示灯）

下面会让service worker变得多余

下面将工作，但它不缓存文件

我希望安装服务工作者并能够缓存文件，但它会进入冗余状态。

我正在构建一个第三方推送通知解决方案，以集成到许多属性中。其中一些属性正在使用其他 3rd 方服务以及侦听推送事件的服务工作者。所以我现在注册了两个服务人员来监听同一个事件，这会造成混乱。

我已经阅读了服务工作者范围，但这似乎并没有解决我的问题。我看不到将推送通知限制在范围内的方法。

我只是不明白吗？