问题标签 [angular-pwa]

我使用 Angular指南创建了一个 PWA 。我在拦截应用安装横幅时遇到问题。我正在使用此代码将其推迟到稍后的时间点：

我的清单文件：

当我在 localhost 中尝试此代码时，console.log 中包含的消息被记录下来，但 20 秒后，我收到错误消息：

在这一行：

当我托管代码并在移动设备上试用时，应用安装横幅会立即显示，而不是 20 秒后显示。

我已经尝试将此代码放在 index.html 文件本身中，在一个单独的 js 文件中并在 index.html 文件中调用它。创建服务并在 .ts 文件中包含几乎相似的代码。没有任何效果。尽管出于绝望我正在尝试 js 解决方案，但我更喜欢 Angular 解决方案来解决这个问题。理想情况下，我想将“beforeinstallprompt”事件捕获并存储在全局变量中，并在不同点提示该事件。

如何解决这个问题呢？

现在我知道有一百万个关于没有提供者的帖子，我知道它需要进入提供者，请阅读我的整个帖子。

基本上我正在尝试使用SwUpdate来检查是否有更新，如果有，请刷新浏览器：

现在我已经注册了我的服务人员：

现在，当我运行我的应用程序时，出现此错误：

NullInjectorError: No provider for SwUpdate!

所以很明显我尝试将它添加到我的组件模块中的 providers 数组中：

现在这应该可以工作了，但是现在当我运行应用程序时，我收到以下错误：

现在当我尝试导入NgswCommChannel我收到一条错误消息，指出它在 @angular/service-worker 中不存在；

我试过用谷歌搜索，但我找不到NgswCommChanel任何地方的参考......

所以我的问题是如何解决这个问题，或者如何正确使用SwUpdate？

任何帮助，将不胜感激

编辑

我也尝试过与官方 Angular 文档中完全相同的方式来完成它，它给了我同样的错误：

编辑 2 这是我运行 ng -v 时得到的

编辑 3

经过进一步调查，在本地运行项目时似乎无法使用 SwUpdate，我看到了这篇文章angular-pwa-pitfalls并且解决方案是安装 ng-toolkit，但这只是允许您构建项目然后运行模拟服务器，这是没有意义的，因为我失去了在本地开发的能力，而无需每次都构建项目。

编辑 4

我更改了 app.module.ts 以注册服务人员：

但现在我遇到了一大堆新的错误

任何其他建议都会很棒。

谢谢

我刚刚在我的发票网站上添加了 PWA 功能。它工作正常，但它破坏了服务器端渲染，第一个页面浏览是好的，并且通过 CURL 请求也可以，但是如果你重新加载页面，你会得到一个难看的眨眼，并显示预翻译的文本。

我一直在寻找修复，但没有找到，是否可以强制浏览器始终从后端获取渲染，除非它处于脱机状态？网上还有其他解决方案吗？

我正在使用 Angular 7

我正在开发 Angular 7 应用程序，我已经对其进行了 pwa，但我无法制作我的渐进式 Web 应用程序 -脱机并添加到主屏幕

我在 Lighthouse 上测试了我的 angular pwa 并得到了以下信息：

我已经更改了我的 ngsw-config.json 以尝试为assetGroups 添加cacheConfig，但它似乎只对dataGroups 有效？

我还尝试编辑我的 htaccess 文件并添加以下行：

标头集 Cache-Control: "max-age=31536000, public"

到目前为止，这些都对我不起作用。

我有一个问题@angular/pwa。当我在生产模式下构建时，我没有在我的 dist 文件夹中获取ngsw-worker.js文件ngsw.json。

我使用的 pwa 版本是：

@angular/pwa: ^0.13.8
@angular/service-worker: ~7.1.0
@angular version 7

提前致谢

通过在 app.module .ts 中注册服务工作者，我已将我的 Angular 6 应用程序转换为渐进式 Web 应用程序，但我还为 firebase 推送通知注册了一个服务工作者，但我无法做到这一点，在哪里以及如何注册它?

我通过参考以下链接尝试了一种解决方案： https ://angularfirebase.com/snippets/how-to-use-a-firebase-fcm-service-worker-with-angular-s-ngsw-service-worker/

1 在文件中：app.module.ts 我已经像这样注册服务人员：

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), ServiceWorkerModule.register('/firebase-messaging-sw.js', { enabled: environment.production }),

2. 在 index.html 中写了 firebase 推送通知代码。

3. 在 angular.json 中调用 js 文件：

   /li>

在控制台-> 应用程序中

仅显示一名已注册的服务人员，即 firebase-messaging-sw.js 。

我创建了一个 Angular PWA 应用程序并通过运行构建它ng build --prod：

它已成功构建生产就绪应用程序。
我已经通过运行命令在本地运行了构建的应用程序：http-server -o，它按预期运行。

问题：
当我在生产服务器的 tomcat apache webapp 目录中部署并运行它时，我得到：Service worker is not registered or does not control the Start URL.

Service Worker 没有在我的生产环境中注册。

请帮助我谢谢

我已将 PWA 安装到我的 Angular 应用程序中，ng add @angular/pwa并遵循了所有必要的步骤。

要在本地运行 PWA，我已http-server通过以下方式全局安装npm i -g http-server

通过 构建生产后ng build --prod，我http-server -o从dist文件夹运行，但 localhost 无法正常工作并抛出无效响应。

我尝试过使用不同http-server -p 5000的端口，但它不起作用。

我同时使用 Angular PWA 和 Angular Universal，我正在玩离线导航。

我试图为导航请求实现的行为是：

• 在线时，为服务器端渲染页面提供最大的首次绘制速度（然后客户端接管）
• 离线时，回退到缓存index.html以使用缓存的客户端应用程序

问题是ngsw-worker.js它的配置文件ngsw-config.json没有提供足够高的粒度级别来实现这一点。

这是我当前的ngsw-config.json，它提供了一种接近我想要实现的行为，但是当我在离线模式下刷新应用程序时，它仅在页面之前在在线模式下刷新（因此缓存）时才有效。

我认为服务人员应该“具有普遍意识”，但是如果不是，是否有任何干净的解决方案或解决方法？