问题标签 [service-worker-events]

当PWA 应用程序请求用户权限（如地理位置和通知）时，添加到主屏幕的安装横幅不会显示在适用于 android 的 chrome 浏览器上

我也尝试使用beforeinstallprompt事件来实现这个功能，但它没有被触发

服务工作者.js

索引.html

你们能告诉我你对此的反馈吗

感谢 Sahadev Dodiya

我使用 service worker 拦截对安全资源的 HTTP 请求并向请求添加授权标头（如果用户已经登录）。现在，我有一个场景，服务工作者拦截一个 POST 请求以注入授权标头。但是，服务工作者没有接收到请求有效负载中的数据，因此没有请求有效负载（参见屏幕截图 2）。因此，nodejs 中的后端验证逻辑失败，因为没有接收到有效负载数据。理想情况下，除了授权标头之外，后端代码还应该接收有效负载数据以保存在数据库中。有什么指导吗？

下面的第一个屏幕截图是带有有效负载的原始请求。第二个到服务工作者的请求没有任何请求有效负载。

这是我拦截获取请求的服务工作者代码：

问候， 桑托什

我的单页 Web 应用程序是用 PWA 编写的。它是一个托管在 IIS 下的 ASP.NET Web API 应用程序。我的应用程序使用了一个服务工作者，它预先缓存了我的应用程序外壳。当用户单击应用程序时，其他内容将写入 indexedDB 或在 service worker 缓存中即时更新。

我对代码更改有疑问。当我更新代码并刷新浏览器时，我可以直接在 javascript 和 html 代码中看到我的更改。当我离线时，我的应用程序依赖于我的 service worker 中的代码。此代码仍然是旧代码。当我重新加载我的应用程序时，它似乎没有更新。我的服务人员看起来像这样：

为了注册服务工作者，我的代码如下所示：

因此，当服务工作者注册时，它还会检查更新。但是，它仅在服务工作者代码本身发生更改时更新。当我的应用程序外壳中的代码被更改而不更改服务工作者代码本身时，不是这样。

当我更改我的应用程序代码并刷新我的页面时，如何确保重新加载我的 service worker 中的代码？

我是服务人员的新手，我正在为我的 react 项目编写自定义 sw.js 以支持 pwa。它在后端有 graphql 实现。我已经缓存了 graphql 响应的响应，但如果用户离线，则无法提供服务。这是自定义 sw.js 代码段：

预期行为：sw.js 应获取所需的“/graphql”缓存数据。实际行为：它无法识别并回退到offline.html

图片链接： https ://i.stack.imgur.com/pV3jk.png

我有一个 SPA https://example.com/customer/app。

当您访问该页面时，如果您没有登录，SPA 会附加#/login到 url，所以现在它显示为https://example.com/customer/app#/login.

有一个服务工作者正在运行，安装了 scope /customer/app。

当应用程序离线时，我试图从我的服务人员返回 200 响应。为简单起见，我目前对我的应用程序中的所有内容都使用了一个虚拟响应：

customer-sw.js 内容如下：

这意味着Hello world如果服务工作者安装正确，每个请求都应该产生一个简单的（就好像它是一个以这种方式缓存的页面）。唯一的问题是我不能让它工作，除非在 url 的末尾有一个斜杠，即/customer/app/而不是/customer/app. 请求会/customer/app导致检索实际页面，而请求/customer/app/（或任何其他低于此的请求）会导致Hello world.

我想我会发布这个问题，以防其他人对为什么他们不能让他们的服务人员用缓存页面做出响应感到困惑。似乎秘诀是确保您在网址末尾使用斜杠。我希望Google 的文档能指出这个小细节。

然而，出于好奇，有没有办法让它工作/customer/app？现在看起来我需要重定向/customer/app到/customer/app/并进行测试以确保没有任何损坏。

我是 Service Worker 领域的初学者，现在我可以显示通知，但我的要求是使用从推送事件收到的数据更新 DOM。我尝试使用 postMessage api。但我不明白如何使用。我尝试使用 [ Chrome ServiceWorker postMessage的答案， 但我无法使用它。谁能帮我举个例子，这样我就可以理解并完成这个！？在 Main js..我正在使用 initializeUI() 我正在为 user:: 调用 sendMessage 和订阅

在 sw.js 中

谢谢

我正在尝试在 ReactS 制作的 PWA 中实现 Web 推送。它甚至取得了一些成功，但我在更新 service worker 时遇到了麻烦，尤其是在 iOS 上。当我按下按钮启用通知时，需要一段时间来更新 SW，然后注册它并隐藏通知消息。那是在Android上，因为在iOS上它根本不起作用。
我的文件

我的 service-worker-custom.js

我的 index.html

我正在尝试使用 ServiceWorker 实现不同的缓存策略。对于以下策略，实施方式是完全明确的：

1. 先缓存
2. 仅缓存
3. 网络优先
4. 仅限网络

例如，在尝试实现缓存优先策略时，在 service-worker 的 fetch 钩子中，我将首先向 CacheStorage（或任何其他）询问请求的 URL，然后如果存在respondWith它，如果不存在respondWith网络请求的结果.

但是对于根据这个工作箱定义的 stale-while-revalidate 策略，我有以下问题：

1. 首先是关于机制本身。stale-while-revalidate 是否意味着在网络响应之前使用缓存然后使用网络数据或仅使用网络响应来更新您的缓存数据以供下次使用？
2. 现在，如果网络被缓存以备下次使用，那么哪些场景包含它的真实用例？
3. 如果网络响应应该在应用程序中立即被替换，那么如何在 service worker 中完成呢？因为钩子将通过缓存数据解析，然后网络数据无法解析（使用respondWith）。

我正在尝试以双向方式与客户沟通服务工作者。我的目标是将请求的处理委托给客户端，并以适当的响应返回给服务人员。步骤顺序如下：

服务人员：

1. Service Worker 收到请求
2. 它检查它是否必须被忽略或正确管理
3. 带有请求和相关 ID 的消息被创建
4. 消息通过 Incoming 消息发送给客户端
5. 对 {id: event} 在消息存储中注册

客户：

1. 请求消息来自传入通道
2. 消息被解构以获取相关 ID 和请求
3. 为请求创建适当的响应
4. 响应和相关 ID 通过 Outgoing Channel 发送回工作人员

服务人员：

1. 响应消息来自传出通道
2. 消息被解构以获取相关 ID 和响应
3. 此 ID 的待处理消息是从消息存储中检索的
4. 为响应创建一个新的 Response 对象
5. 响应对象通过返回respondWith

这是我的服务人员：

这是我的客户：

当我运行此代码时，会发出以下消息错误。请参阅 Service Worker 代码中的 [1]。请注意整个通信流程已正确执行。

如果我没有误解的话，这意味着当工作人员被放弃去寻找客户端时，获取事件就完成了。所以我的方法是无效的。我的问题是：在请求-响应过程通过消息事件拆分的情况下，如何进行这种双向通信？

当浏览器从服务器请求图像时，调用会被后端的 API 控制器接收。在那里，必须在返回图像之前进行授权检查，以检查请求是否被允许。

所以我需要添加授权标头，在寻找最佳解决方案时，我发现了这篇文章：https ://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/和我对使用 Service Worker 的解决方案 4 很感兴趣。

我做了我自己的实现，我注册了一个 serviceWorker：

这是在我的 imageInterceptor 中：

当我运行我的应用程序时，我在控制台中看到注册似乎已成功执行，因为我看到打印了 console.logs（ServiceWorker 处于活动状态，onLoad 被调用并成功注册，范围正确：https://localhost:44332/api /图像网关/

但是当我通过网关加载图像（https://localhost:44332/api/imagesgateway/.. .）时，我仍然得到 400 并且在后端放置断点时，我看到身份验证标头仍然为空。此外，我没有在控制台中看到“获取事件触发”消息。在另一篇文章中，我可以通过以下设置看到注册的服务人员：chrome://inspect/#service-workers，但我在那里也看不到我的工作人员。

我的问题是：为什么没有添加授权标头？是不是因为，虽然注册似乎成功了，但实际上并非如此，因此我也没有在 inspect#service-workers 中看到该工作人员？