问题标签 [workbox-window]

我目前正在使用最新的 Workbox 版本 4.3.1 workbox-window，我正在通过监听waiting事件为用户提供页面重新加载，我正在使用Workbox 文档的Advanced Recipes页面上提供的代码。

页面上的代码：

服务工作者文件中的代码：

我已经对其进行了测试，它工作得很好，我可以向用户显示一个小吃栏，让他们知道有更新，当他们接受时，SKIP_WAITING会向服务人员发送一条消息来调用skipWaiting()。

假设用户不接受重新加载提示并刷新页面或导航到另一个页面，新的服务人员将一直等待并且不会激活，这是正常行为，但我的问题是如何显示此重新加载提示用户是否刷新或导航到另一个页面？似乎该waiting事件只触发一次。

我正在从 v3 迁移到 v4 ，在我的 vuejs 应用程序中使用 workbox-window(CDN) 和 workbox-webpack-plugin。

它在本地使用 http-server 可以正常工作，但是在部署后，我收到此错误并且无法安装服务工作者。

我该如何解决？

我的window.js中有这个...

...在我的 sw.js 中，我有...

我尝试通过 e.ports[0] 中的 MessagePort.postMessage() 发送，但没有成功。我觉得这是基本的东西，尤其是使用 Workbox 类，但我就是无法让它工作。

我最后的手段是使用 BroadcastChannel（带有 polyfill），但我首先尝试这个，因为它可能不需要任何 polyfill 才能工作。

Polymer 3 SPA 试图从 sw-precahe 迁移到 Workbox。我使用 workbox-window 模块将生命周期集成到应用程序中，以使用户能够了解新版本。

我使用 5.0.0-beta 版本能够使用 update() 功能，但是这个问题在 v4.3.1 上也有效。创建服务工作者并运行我的 SPA 后，我在 logger.js 中得到“未定义进程”。

我已经尝试包含不同版本的工作箱构建文件，如果我包含 umd 版本，它可以工作，但是我的 SPA 是为 ES6 模块构建的，所以我想使用这些导入。

我的目标是了解为什么这会失败，因为我意识到我可能在我的配置中做错了什么。所以，任何建议表示赞赏！

平台

工作箱版本

5.0.0-rc.0

我正在使用 workbox-windowupdate()方法来触发 service worker 更新检查，如workbox issue #2130中所述。这个问题似乎也与工作箱问题 #2301中的观察有关。

如果找到更新，则加载新的 service worker 并进入等待状态。我监听这个事件（waiting和externalwaiting，在两种情况下都做同样的事情），并询问用户是现在还是以后安装更新。

大多数情况下，waiting事件被触发，如果用户接受更新，则服务工作者被激活，我们可以重新加载页面以完成更新过程：

如果waiting事件被触发，这个过程可以正常工作。

1. 对导致 service worker 文件更改的应用程序进行小幅更新。
2. 按“检查更新”按钮。
3. 找到新的服务人员并提示用户安装更新
4. 页面已重新加载。

但是如果externalwaiting事件被触发，那么这段代码就不起作用。新的 service worker 仍处于等待状态，我可以在 Chrome 开发工具中看到。

跳过旧服务人员收到的等待消息

如果用户确认他们想要更新SKIP_WAITING消息，那么旧的、激活的服务工作者定义会接收到该消息。

这是我的日志的摘录，可以证明这一点。

• 来自应用程序/客户端的日志条目以“应用程序”为前缀，后跟应用程序版本。
• Service Worker 的日志条目以“Service Worker”为前缀，后跟每个 Service Worker 实例唯一的 DOB 时间戳。

在线的

1. 用户刚刚按下了“检查更新”按钮。
2. 一个新的 service worker 版本被发现2019-11-05 @ 15:23:14并且正在被解析。我们称之为 SWv2。
3. Workbox 由 SWv2 加载。
4. SWv2install事件处理程序被执行。
5. 执行 Workbox 窗口externalinstalled事件处理程序。
6. 执行 Workbox 窗口externalwaiting事件处理程序。
7. 工作框窗口externalwaiting事件处理程序SKIP_WAITING使用workboxWindow.messageSW()
8. Service Worker v1 (loaded on 2019-11-05 @ 15:20:03) 接收到跳过等待消息。什么都没发生。SWv2 保持等待状态。

与普通等待事件对比

在以下日志中，您可以看到SKIP_WAITING等待的 service worker 收到了消息： v 2019-11-05 @ 16:07:32。因此更新过程成功完成。

有时它只是挂起......

有时，当有新的 Service Worker 版本可用时，事情就会陷入困境。waitingor事件处理程序永远不会被externalwaiting触发。

发生这种情况时，控制台中没有错误，新版本的 service worker 也没有错误。

解除绑定的唯一方法是停止活动的服务工作者，取消注册并重新加载。

为什么这很重要？

在我敢发布这个应用程序之前，我需要确保更新过程在所有平台上都能完美运行......

如果用户在我发布更新时遇到这些问题中的任何一个，他们将难以获得它，而我对此无能为力。乘以安装数量 == 非常头疼。

这一切都归结为三个问题： 按重要性排列：

1. 如何处理externalwaiting以便加载和激活新版本的 service worker？如何确保SKIP_WAITING等待的服务人员收到消息？
2. 为什么生命周期事件在普通品种和外部品种之间有所不同？
   • 出于测试目的，我每次都对服务人员进行相同的更新（预缓存文件的新版本）。
   • 我只在一个选项卡中加载了应用程序。
   • 从普通事件到外部事件的转变似乎是随机的。
3. 为什么该过程有时会在生命周期的等待阶段之前卡住，我该怎么办？

我正在使用 Workbox Webpack 插件 (v4.3.1) 来生成服务工作者脚本和 Workbox-Window (v4.3.1) 插件来注册它。

在开发环境（我使用 webpack 开发服务器）上一切正常，但是在生产版本中，我在 Chrome（v78）开发控制台上收到以下错误：

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:4321/') with script ('http://localhost:4321/undefined'): A bad HTTP response code (404) was received when fetching the script.

（注意：我使用本地 Nginx 服务器来测试我的生产版本）

我像这样使用 Workbox Webpack GenerateSW：

我确认，在构建之后，会生成服务工作者脚本 (service-worker.js) 并且它在 dist 文件夹中。

我正在使用 Workbox-Window 插件来注册上述服务工作者脚本：

我猜这个问题与我使用 Nginx 测试产品构建的事实无关，也与提供给 Workbox 构造函数的服务工作者脚本的 url 或路径无关，因为使用 ServiceWorker Web API 而不是 Workbox Window API ，它工作正常：

为什么在完全相同的条件下，使用 Workbox Window API 注册 Service Worker 失败？undefined您可以在错误日志中看到的那个是从哪里来的？？？

* 编辑 *我在 Workbox GitHub repo 上打开了一个问题。你可以在这里找到它。

我的项目有一个使用 Workbox 的服务工作者的旧部分实现。我一直在努力更新它并在此过程中添加功能。在这个过程中的某个地方，我在开发控制台（Chrome 版本 81.0.4044.129）中丢失了 Workbox 日志。

我不确定这发生在什么时候，因为我在尝试升级和添加工作箱窗口时并没有过多关注它们，但我现在希望它们回来。

我正在使用 workbox-webpack-plugin 和 workbox-window 的 v5.1.3。

我的 webpack 配置如下所示：

我的服务工作者文件如下所示：

该应用程序本身是一个 React 应用程序，最初是使用 create-react-app 创建的，但后来被弹出。我只在进行生产构建时查找日志，然后使用http-server包在 localhost 上运行。

我检查了工作箱调试页面，这就是我在该行中添加的原因，self.__WB_DISABLE_DEV_LOGS = false但这没有任何区别。

有什么想法可以让我找回日志吗？当我尝试向服务人员添加移动功能时，这将使我的生活变得更加轻松。我还仔细检查了 Chrome 开发者工具中的所有日志级别，包括详细日志。

我还添加了自己的日志，它们确实出现了，所以我知道正在调用服务人员。

我有一个使用Laravel Mix Workbox的 Laravel Vue PWA 。

在 webpack.mix.js 我有：

请注意，这里我已手动添加index.php为附加清单条目。这是因为其中包含的 htmlindex.php是我的应用程序外壳，需要缓存以使我的应用程序可以脱机使用。

在我的主要app.js我有：

我正在使用Workbox Window，因为它声称可以让一切变得更容易。

注意我在precacheAndRoute这里打电话，否则我得到错误createHandlerBoundToURL('/index.php') was called, but that URL is not precached.我不明白为什么这是必要的，因为我可以看到它index.php已经在传递给precacheAndRoute我的server-worker.js.

我尝试使用 Workbox WindowmessageSW函数而不是传递'CACHE_URLS'，index.php但这并没有解决错误。

这段代码的目的是注册一个导航路线，这样我就可以根据谷歌关于导航请求的文档返回所有导航请求的特定响应。

我现在可以在 Chrome 中查看该站点，查看 Service Worker 是否已安装，但是当我检查“离线”并重新加载页面时，我只会收到“无互联网”消息。

查看网络，我可以看到请求/dashboard失败。

如何让我的网站离线工作？

为什么服务工作者不使用缓存index.php来响应请求？

workbox-webpack-plugin在我当前使用带有 ( ) 和工作箱 ( )的 webpack 的项目中，workbox-window我遇到了一个错误，当页面加载到“深层 url”时，服务工作者将永远不会响应消息，例如“/my-path/is-nested” . 它将在“/my-path”上工作。

在最小的可重现环境中，这应该会发生。

• 在新选项卡中，访问应用程序（例如通过https://my-app.my-name.company-dev-envs.cloud/some-unique-id）
• ServiceWorker 通过 workbox ( .register())注册
• 注册时，messageSW用于询问软件的“版本”
• ServiceWorker 使用event.ports[0].postMessage指示版本的字符串进行响应

如果站点在“深层”路径中访问，例如 /some-unique-id/test，消息传递将永远无法工作。

Workbox 确实成功地“注册”了——但不会触发任何事件（除非externalactivated在Update on ReloadApplication > Service Worker 选项卡中选择了）Serviceworker 将被报告为“活动且正在运行”，而不会显示其他服务工作者。它似乎也可以处理获取。只有消息和事件永远不会通过wbWorkbox Window 实例响应/触发。

“应用程序”选项卡报告服务工作者处于活动状态并正在运行：

index.js（应用程序的主要入口）

离线.js

sw.js

webpack.config.js（为简洁起见）

使用的版本：

查看此演示以查看问题（来源）

这是我在 sw 注册和刷新的 react spa 中的实现。

问题是当我在当前 sw 上触发手动更新并接受新版本（例如SKIP WAITING在活动 sw 中发送发布消息事件）并且在新 sw 被激活后我看不到controlling事件被触发