问题标签 [angular-service-worker]

不确定这是潜在的错误还是我做错了什么。

我正在使用基于 cli 的应用程序，@angular/serviceworker 5.1.0 @angular/cli 1.6.0 软件的实现完全由书

我将尝试描述发生了什么：

考虑一个正在运行 Service Worker 的应用程序。SW 缓存来自 的数据ngsw.json。

现在，我将ng build --prod使用新的 budle 哈希部署一个新文件。

当前运行的应用程序的 ServiceWorker 将加载旧的缓存文件，除非明确要求通过SwUpdate服务进行更新。没关系。

但事情就是这样。打开新选项卡并加载应用程序的新实例后，它仍会加载旧文件。在网络日志中没有获取 new ngsw.json。

两个选项卡是否使用相同的 ServiceWorker？

ServiceWorker 如何知道何时检查 new ngsw.json？

最奇怪的事情：有时按下 F5 后，ServiceWorker 仍在加载旧文件。有时它会加载新文件。有时它会尝试使用旧哈希获取文件并失败（404）！

到目前为止，我还没有弄清楚任何模式。

浏览器缓存是否可能导致问题？我尝试将服务器响应标头添加到no-cache并过期：0 但没有区别。

我已经@angular/service-worker在几个项目中成功使用了该模块，但在我的最新项目中遇到了一个似乎无法调试的静默失败问题。我的配置和设置与其他项目相同，并且输出的构建（通过 CLI v1.6.2）似乎是正确的：

距离（部分）

我最初的想法是我的环境变量有问题，所以我通过日志记录以确保enabled在true构建之后，甚至在所有环境中对其进行硬编码只是为了测试：

然而，当我运行应用程序时，无论是在本地使用http-server还是在启用了 prod 模式的开发或 qa 环境中，都没有在开发工具中注册服务工作者，控制台中也没有错误或警告：

服务人员选项卡

有没有人知道在这种情况下可能导致静默失败的原因是什么？我已经绞尽脑汁，将工作解决方案与此进行比较，似乎无法提出解决方案。另外，有没有办法进一步调试这种类型的场景？

提前感谢您的帮助！

我在我的 Angular 应用程序中使用服务人员。我的资产文件夹中的所有文件都被缓存，正如我的ngsw-config.json文件中所声明的那样。

我的资产文件夹中有 .svg 和 .png 文件。当我为生产构建我的应用程序并第一次访问我的网站时，一切工作正常，但是一旦我重新加载页面，我的控制台中就会出现以下错误。

未捕获（承诺中）错误：哈希不匹配（cacheBustedFetchFromNetwork）

仅当浏览器尝试获取 .svg 文件时才会出现此问题。它适用于 .png 文件

我将所有 .svg 文件加载到<img>标签中。

我想知道是我做错了什么，还是 Angular Service Worker 有问题？

Angular 团队做得很好，并在版本 5 中引入了服务工作者支持。文档非常有帮助，阅读相关文章后我真的可以看到事情是如何工作的，但是其中没有涉及一个主题。这一切在不支持服务工作者的浏览器中是如何工作的。

这就是所说的：

您的应用程序必须在支持服务工作者的 Web 浏览器中运行。目前，支持最新版本的 Chrome 和 Firefox。要了解其他支持 service worker 的浏览器，请参阅 Can I Use 页面。

Can I Use在相对重要的浏览器中显示对该功能的支持很差。我可以在不工作的 IE11 中幸存下来，但 Safari（尤其是移动设备）是我不希望不受支持的东西。

因此，我的目的是了解 Angular Service Worker 模块、服务、这些服务提供的事件等将如何在不支持 Service Worker 的浏览器上运行。

所有这些都会默默地失败吗？事件会被触发吗？会ngsw-worker.js被要求吗？是否会将某些内容缓存在 IndexedDB 而不是 service worker 中？

该解决方案看起来很酷，但是我无法回答我应该使用它的问题吗？直到我知道上述问题的答案。

使用 Angular 5.1.2 Angular-cli 1.6.3

所有文件都很普通。dist 文件夹已创建

我的 ngsw-config.json

}

我的 app.module.ts 使用

我正在使用香草 environment.ts 和 environment.prod.ts

主要的.ts

不知道还有什么要检查的

我有一个角度应用程序，只要按照以下步骤添加 serviceWorker：

https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md#service-worker https://angular.io/guide/service-worker-getting-started

…我的 API 请求不再有Origin请求标头，这似乎导致我的 API 服务器不返回Access-Control-Allow-Origin响应标头，从而导致浏览器错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。

只需删除 serviceWorker 并取消注册它就会使行为恢复正常。

如何在继续使用我的 RESTful API 的同时实现 serviceWorker？

所有请求都受到影响，但有些请求是由oidc-client; 所有其他看起来像：

更新1：

手动设置Origin我得到：

拒绝设置不安全的标头“Origin”

手动设置Access-Control-Allow-Origin什么都不做，因为它是一个响应头。

Fetch API 有一个Request.mode，当设置为时'cors'将发送一个OPTIONS带有Origin正常标头的请求。我会尝试明确设置它，但我无法研究或在文档中找到如何用角度设置它HttpClient

更新2：

我尝试将其中一个请求转换为使用 Fetch API。所以我设置 Request.mode为'cors'，但我仍然没有得到Origin请求标头和Access-Control-Allow-Origin响应标头。

TLDR

一旦注册了服务工作者，浏览器就不再使用 CORS，即使mode: 'cors'客户端明确设置。如何使用 Service Worker 和 CORS？

我正在尝试使用 Angular Service Worker，一切正常，除了dataGroups不适合我。

这就是我的ngsw-config.json：

在我的网络选项卡中，我看到服务人员总是进行服务器调用然后回退到缓存。见附图。

数据组 - 性能

请注意，我正在调用的 API 位于不同的服务器上，localhost 与 some-server:8000，我尝试使用不同的 URL 进行不同的操作： "/shipments/**" "/shipments" "http:some-server:8000/shipments/**"等等，但没有一个起作用。

我的环境：

• @角5.1.1
• 服务工作者 5.1.2
• Angular-Cli 1.6.0

我正在使用 angular5 开发一个应用程序，通过 ng-cli 使用服务人员，但我意识到在第一次加载应用程序外壳后，它不会刷新。使用 ? 构建后，如何将新文件版本推送到我的应用程序ng build？我可以直接手动重写 sw.js，但由于它是通过 cli 生成的，所以我不喜欢影响任何我不知道的用途。

我整天都在寻找这个答案，但是由于服务人员对于 ng-cli 的 1.6 版本是新的，所以我没有找到任何答案。

我什至在 ng-cli 1.6 之前为 angular 4 和非官方服务工作者实现找到了一个类似线程的线程，但我不相信这种方法，因为它不是官方的，所以我想知道你们是否可以帮我找到一种控制它安装外壳和查找新版本的方式的方法。

谢谢

我正在使用@angular/service-worker。

我不知道如何处理推送和通知点击事件。有谁知道扩展 Angular (ngsw-worker.js) 自动生成的服务工作者的方法？

我发现了一个与这个问题相关的问题。有谁知道目前是否有任何解决方法？

谢谢。

我们正在创建一个 PWA Web 应用程序，目前，我们正在使用 sw-precache 库来生成服务工作者文件，该文件按预期工作。现在我们添加了 FCM 服务工作者，用于在离线时监听传入的消息，但它会覆盖我们现有的服务工作者。

那么我们如何将 firebase 服务工作者与使用 sw-precache 生成的现有服务工作者集成呢？

我尝试了几种方法，当前代码：

更新1：我也尝试useServiceWorker(registration)过，它注册了主要的服务工作者，但是当我在我的服务中初始化firebase时，它期望firebase-messaging-sw.js加载，所以它在控制台中抛出了一些错误。

服务代码：

控制台错误：

也尝试了以下答案，但没有成功： https ://stackoverflow.com/a/46171748/3037257