问题标签 [angular-service-worker]

所以我在 Stackblitz 编辑器中打开了我的 PWA。之后，我复制了应用程序的 URL 并在新窗口中打开它。然后我使用 lighthouse Chrome 扩展来测试 PWA，但我得到一个错误“多个选项卡正在由同一个服务人员控制”我该如何克服这个错误？我尝试在编辑器本身中进行测试，但这不起作用，因为它正在测试编辑器而不是我的应用程序。

我正在制作一个 Angular 渐进式应用程序。我正在使用服务人员并在 CLI 上遇到错误-

我正在处理 Angular 6。我知道 angular.json 文件应该包含"serviceWorker": true但我在我可以写的 angular.json 文件中找不到任何类似的内容"serviceWorker": true。

我的 angular.json 文件如下：

我正在使用 Firebase 在 Angular PWA 中推送通知，并且我正在关注一个链接。https://medium.com/@tariqueejaz/progressive-web-app-push-notifications-making-the-web-app-more-native-in-nature-a167af22e004

我正在使用 Angular 6 并为所有内容设置了代码。当我尝试运行它时，它会向我显示一个弹出窗口。

单击允许按钮后，它在控制台上抛出错误：

注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。” 代码：“messaging/failed-serviceworker-registration”消息：“消息：我们无法注册默认服务工作者。注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。（消息/失败的服务工作者注册）。”堆栈：“FirebaseError：消息：我们无法注册默认服务工作者。注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。(messaging/failed-serviceworker-registration).↵ 在http://localhost:4200/vendor.js:106604:32 ↵ 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.js:2710:26 )↵ 在 Object.onInvoke ( http://localhost:4200/vendor.js:35701:33 )↵ 在 ZoneDelegate.push ../node_modules/zone。 js/dist/zone.js.ZoneDelegate.invoke ( http://localhost:4200/polyfills.js:2709:32 )↵ 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone。运行 ( http://localhost:4200/polyfills.js:2460:43 )↵ 在http://localhost:4200/polyfills.js:3194:34 ↵ 在 ZoneDelegate.push ../node_modules/zone.js/dist /zone.js.ZoneDelegate.invokeTask ( http://localhost:4200/polyfills.js:2743:31 )↵ 在 Object.onInvokeTask ( http://localhost:4200/vendor.js:35692:33)↵ 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask ( http://localhost:4200/polyfills.js:2742:36 )↵ 在 Zone.push../node_modules /zone.js/dist/zone.js.Zone.runTask ( http://localhost:4200/polyfills.js:2510:47 )" 原型 ：错误

我的项目结构是：

我的应用程序和环境文件夹包含以下文件：

我的 app.component.ts 文件是

我的 firebase-messaging-sw.js 文件是：

我的 Angular.json 文件是：

我的网络选项卡是：

我的服务人员选项卡是：

我使用 Angular CLI（ng add @angular/pwa）将我的 Angular 6 应用程序转换为 PWA。我的目录中只有一个项目，所以我在没有指定项目名称的情况下运行了这个命令。

部署后，服务人员注册 - 一切似乎都正常预期我在 google chrome 控制台中收到以下错误：

DevTools 无法解析 SourceMap：https ://example.com/ngsw_worker.es6.js.map

这个错误是什么意思？以及如何解决/避免它？谢谢！

Angular Service Worker有没有办法在IE11 上运行？根据 CanIuse，不支持 IE11，但似乎有一个适用于旧浏览器的Polyfill提供 Promises 支持，据我了解，Service Worker 是建立在它之上的。

有人用那个 Polyfill 在 IE11 上运行 Angular Service Worker 吗？

感谢您的反馈意见 ：）

我使用跟踪软件（对讲）来检查用户/客户端使用的客户端（Angular）应用程序的版本。从数据中我可以看到有几个用户在使用以前的版本。这会让人头疼，因为不同的错误修复和 API 请求是不同版本的一部分。有没有办法让每个人都有一个统一的 Angular 版本？每次部署新的应用程序版本时，每个人都会收到一条通知，可能会刷新他们的浏览器。

我试图实现 ServiceWorker 方法，但它有点不稳定。它控制所有的 API 请求，并且有点不可预测。

有没有人尝试解决这个问题？

我生成了一个干净的 Angular6 项目并使用ng add @angular/pwa我得到了这个ngsw-config.json：

整个资产文件夹都标记为“Service Worker Caching”，但可悲的现实表明这不是真的：

我使用的 3 个图形文件 ( header-bg.jpg, list-border-red.svg& list-border-green.svg) 被标记为“来自 ServiceWorker” 但是当我在智能手机上创建应用程序并断开 Internet 连接并打开应用程序时，仅header-bg.jpg可用。但是list-border-red.svg&list-border-green.svg不能离线使用。

还显示了从“磁盘缓存”加载 2 个图标和从 ftp 加载一个的图形...这些文件也在资产文件夹中，为什么它们没有从 mServiceWorker 缓存？ServiceWorker 的东西是否可能在 Chrome 中被窃听？

该应用程序已经在线，可以在这里找到：https ://expense-calculator.com/如果您需要它来重现我的问题，只需打开并进行自己的测试。

我有一个 Angular 6 应用程序，它可以在使用命令服务时工作并注册 SW， http-server --port 8080如您在此处看到的：

但是当我从我的 Node / Express 应用程序中提供文件时，它们应该被提供。服务人员不会注册，尝试从 localhost 和 Heroku 运行应用程序，但它是一样的。应用程序以其他方式工作。知道什么会导致这种情况吗？

我在 main.ts 和 app.module.ts 中都注册了 ngsw-worker.js。这个可以吗？

比如它会创建 2 个服务工作者实例吗？Service Worker 会不会有冲突？

main.ts

app.module.ts

由于这个原因，我在 main.ts 中注册它。

它已在 app.module.ts 中注册，因为默认的 Angular-cli SW 项目将其添加到此处。

在 main.ts 和 app.module.ts 中注册 Service Worker 后，我将 Firebase Cloud Messaging sdk 添加到 Service Worker 实例。

简而言之，注册两个 ngsw-worker.js 实例会有问题吗？

我的 Angular 6 应用程序使用 Uppy (XHRUpload) 进行文件上传。文件上传发生在不同的子域中。

上传在 localhost 上工作正常（禁用服务工作者），但是当我尝试在启用服务工作者的情况下上传文件时，它仅适用于小尺寸（几 mb）的文件，而对其他人则失败。

似乎服务工作者在等待 API 上传调用的响应，如果它在几秒钟内没有返回（对于大文件），它会失败，正如我在开发人员工具中看到的那样。

以下是我的 ngsw-config.json