问题标签 [angular-service-worker]

如何处理 Angular Service Worker 中的推送通知点击。SWPush 没有任何方法。

我尝试引用一个侦听“notificationclick”事件处理程序的js，但它从未在单击通知按钮时被触发。

我尝试使用新的 Angular 5 服务工作者缓存来自 REST API 或 websocket 的数据。我的 ngsw-config.json 包含：

"dataGroups": [{ "name": "api-freshness", "urls": [ "https://firestore.googleapis.com/" ], "cacheConfig": { "maxSize": 100, "maxAge": "1h", "timeout": "10s", "strategy": "freshness" } }]

我也尝试了这两个来源，但没有设法缓存数据，当我关闭 wifi 时，数据不可用：

• https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/

• https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

资产渲染良好。

我在用：

• Ubuntu 14.0.4 上的 chrome 63
• @角/cli：1.6.4
• 角度：5.2.1

这是我的网络电话：

我在 localhost 上运行，在这个特定的应用程序中，我试图连接到 firebase ，但是在尝试连接到本地 rails 服务器时它也没有成功。

我在这里想念什么吗？

我正在尝试使服务人员与 API 请求进行角度工作。我希望该应用程序可以离线工作，并且我有以下配置：

这是我离线时 xhr 选项卡的样子：

这是用户请求的内容：

如您所见，用户的 API 调用无法解析。

这是user在线时的响应：

所以我正在用 Angular 创建 ASP.NET MVC 应用程序。对于我的应用程序，我需要服务人员，所以我发现 angular 有它自己的（https://www.npmjs.com/package/@angular/service-worker）。于是我安装了，发现需要注册才能工作。我从 github（https://github.com/webmaxru/pwatter/tree/ngsw/src/app）举了一个例子。当我尝试注册并运行所有内容时，我总是收到此错误：

我读到我需要使用 HTTPS 和/或生产模式而不是开发，所以我尝试了各种组合但没有任何效果......有人可以解释一下我做错了什么吗？

这是我的 app.module.ts （没有导入）：

背景： 我在处理使用 angularfire2 v5 和 Angular v5 的项目时遇到了问题。问题是我想使用启用持久性的 service worker 和 firestore 来提供离线支持。但是，没有安装服务工作者。我的假设是，为 firestore 启用持久性会导致无法安装 service worker。

问题： 启用持久性的 Firestore 可以与 Service Worker 一起使用吗？

在以前版本的 Angular 服务工作者实现中，配置选项之一是"routing". 这可以在这个未回答的 SO 问题中看到，在这个Angular CLI 问题中被引用，剩下的最好的文档似乎是Stephen Fluin（在 Angular 团队中）的博客文章，以及来自 Alex Rickabaugh的I/O 演讲（来自谷歌）。

使用 Angular 5，ServiceWorkerModule已经很好地构建了，现在可以使用该ngsw-config.json文件处理大部分配置。但是，在angular.io 指南或文档中的任何地方，都不再提及如何处理路由重定向。所以我最终遇到了以下问题：当我访问了我的应用程序并离线时，我直接访问它时仍然可以访问该应用程序：https ://jackkoppa.github.io/cityaq-sw-issue 。但是，在加载应用程序时会重定向到search路由，大多数用户会尝试从https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai之类的 URL 加载（为简单起见，我现在只谈论 Chrome 桌面和移动设备，并尽可能使用隐身模式）。

当您尝试在离线时访问该 URL 时，您会立即收到 504 - Gateway Timeout。发生这种情况是因为 service worker 只缓存了索引，并且不知道其他路由应该重定向到索引以便它可以加载。我相信 Angular 服务工作者实现的先前迭代可以通过设置重定向到给定路由的索引来处理这种情况。有没有办法在当前的 Angular 5+ngsw-config.json或生成的ngsw.json文件中处理这个重定向？除此之外，应该如何在单独的服务工作者 JS 文件中处理解决方法？

我无法让我的 angular5 服务人员工作。我有两个主要问题：

1. 服务工作者不会缓存用作背景图像的资产图像
2. 在模拟网络断开连接后，Service Worker 最初从缓存中拉取文件（除了前面提到的非缓存文件），但在第二次刷新后它会遇到错误。

以下是我的问题的更详细报告。您可以通过克隆我为突出显示位于此处的此问题而制作的 repo 来跟进。

我使用提供的 --service-worker 标签创建了应用程序。然后，我确保遵循此处Angular 文档中列出的 5 个步骤，即：

1. 添加了 Service Worker 包。
2. angular-cli.json 将 service-worker 设置为 true
3. 在 app.module.ts 中导入并注册 Service Worker
4. ngsw-config.json 是按照文档中的描述生成和配置的。
5. 运行 ng build --prod 以在我的应用程序的 dist 文件夹中生成包。

我使用 node/express 和 server.js 文档为我的应用程序提供服务。当我在隐身窗口中打开应用程序时（按照文档的建议），我看到我的服务人员已注册，并且缓存存储了我的包和索引文件。它还缓存在 img 标签中使用的图像，但它不会缓存在我的 css 背景图像中指定的图像。当我通过选中我的服务人员上的脱机框然后刷新我的页面来模拟网络问题时，页面会正确显示除需要背景图像的部分之外的所有内容。

但是当我第二次刷新应用程序或打开另一个选项卡（在同一个隐身窗口上，因此服务工作者仍然注册并且缓存仍然处于活动状态）时，会出现最终/主要问题。在这一点上，我什么都没有显示。控制台给了我三个错误：

1. GET http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
2. 提取脚本时发生未知错误。
3. 加载资源失败：net::ERR_INTERNET_DISCONNECTED

最后一个错误来自 ngsw-worker.js。我不太确定如何处理这些错误。我想也许一个新的服务人员正在尝试注册，但我不确定为什么会发生这种情况......

这是我要求的 ng-config.json 文件：

对此的任何帮助将不胜感激！谢谢大家

更新

所以我注意到，当我在没有服务器运行的情况下转到 localhost:3000 时，我得到了错误：

我也得到错误：

来自我所有的资源

更新2

我一直在使用节点测试这个项目，以提供一个快速应用程序，该应用程序将所有请求定向到位于 dist 文件夹中的我的 Angular 应用程序（在运行 ng build --prod 后生成）。我决定在一个简单的 http-server 上测试它。我还发现直接重新加载会破坏我的服务人员，但是如果我导航到另一个页面，然后返回到我的原始页面，服务人员可以工作（奇怪但与这个问题无关）。

我仍然无法让服务人员与 express 合作......

因此，在 2 天里，我的 Angular5 服务人员遇到了一些问题，但我认为我已经将其范围缩小到我为应用程序提供服务的方式。您可以从我发布的这个 SO question中详细阅读我是如何走到这一步的，或者您可以阅读摘要：

服务工作者在从http-server.

我现在看到的主要问题是，当我使用应用程序为我的应用程序提供服务时node/express，我的开发工具中的网络选项卡会为我提供网络离线时的状态504。localhost:3000就好像服务人员没有指向localhost:3000/index.html. 但这在为 http-server 提供文件时不是问题。

这是我的server.js文件，我有节点使用它来服务我的角度应用程序：

有谁知道为什么会这样？

额外信息

1. 我使用标签 --service-worker 启动了我的 Angular 应用程序，正如 Angular文档所描述的那样，没有额外的自定义。
2. 没有控制台错误。唯一的错误是网络选项卡中的 504 状态。
3. 在这两种情况下，都会安装一个服务工作者，并且所有应该缓存的文件都被缓存。

如果您想自己测试一下： 1.在此处下载此测试存储库。2. 运行npm install。然后运行ng build --prod。3. 测试 http-server 运行 npm install http-server。导航到 dist 文件夹并运行http-server -p 4200. 4. 测试快速服务器导航到根目录并运行node server.js

更新

（对不起，我的缺席，我有真正的工作要照顾，但我准备用新的想法来解决这个问题）

我注意到，如果我通过检查我的开发工具上的离线按钮来模拟服务器处于离线状态，那么运行我的服务器的控制台仍然会收到请求。但是当我在 devtools 中检查网络工具栏时，它说这些请求正在由 service worker 提供服务。这些请求尝试为我的背景文件提供服务，但失败并出现 504 not found 错误，仅获取 index.html 文件和元素文件中的图片。此外，这些请求仅在导航到不同页面后才有效，在刷新后永远不会。

如果我在终端中关闭服务器，服务人员只会尝试localhost:3000从服务人员那里获取信息，但这会失败并出现 504 错误。屏幕上没有显示任何其他内容，并且网络选项卡除了更新的 service worker 文件之外没有其他请求。

我对这些发现并不完全了解，再次感谢任何帮助

我想知道是否可以在开发模式（不是生产模式）测试 pwa 并注册 serviceworker

当我在 dist 文件夹中进行 ng build --prod 然后 launchhttp-server 时它工作正常，但是当我在没有构建的情况下进行服务时，它给了我 chrome 错误：Service Worker 未能注册

prod 和 dev 上的程序是否相同？与灯塔一样，审计让我对 prod 上的 serviceworker 没问题，但在同一个项目的 dev 中却不行

任何帮助或链接将不胜感激

谢谢

如何每分钟轮询服务器以检查服务人员更新？

我使用了 SWUpdate angular 的可用方法，但它不轮询服务器，而是在页面刷新时获取更新和缓存，这不是必需的。

我遇到了 checkForUpdate() 方法，它非常相似，但不确定它是如何工作的？

任何帮助将不胜感激。

上面的代码在第二次重新加载时从缓存中获取数据。