Angular PWA 服务工作者在部署到 IIS 时不会离线刷新答案

【问题标题】：Angular PWA service worker not refreshing offline when deployed to IISAngular PWA 服务工作者在部署到 IIS 时不会离线刷新
【发布时间】：2021-08-26 09:30:33
【问题描述】：

基本上我遇到了与this unanswered question 描述的相同的问题。

当我使用 http-server 为我们的 PWA 提供服务时，一切似乎都运行良好，但是当我将它部署到我们的实时环境（即带有 IIS 的 Windows Server）时，它只能在线运行良好。当我离线时，我无法刷新页面。服务人员返回状态 504，我不知道为什么。

我想不出如何解决问题。

是否有任何有用的指南如何在 IIS 上正确设置 Angular 应用程序？（特别是具有离线功能的 PWA）

有没有人知道我可以检查什么？在我的 HTTP 标头中？

【问题讨论】：

这可能会解决您的问题：- stackoverflow.com/a/44600609/1289713。基本上 Angular 是一个 SPA 应用程序，您需要在 IIS 中处理它的路由。
您可以使用failed request tracking查看详细的错误信息。
@VimalPatel 感谢您的意见。我尝试将 web.config 中的重写规则从重写为“/index.html”更改为“/”，其他一切都与链接中的相同。不幸的是，这也没有帮助。
@samwu 谢谢，我设置了跟踪，并准备观察会发生什么。
您是否从 frt 收到错误消息？

标签： angular iis progressive-web-apps service-worker angular-service-worker

【解决方案1】：

所以显然我的问题与我的 IIS 配置没有任何关系。我仍然无法解释为什么它可以在 http-server 上运行，但现在我也可以在 IIS 上运行它。

经过大量研究和不成功的实验，我试图观察，ngsw-worker.js 究竟是什么导致了这个错误。在设置了一些断点并找到新的关键字进行搜索后，我偶然发现了this GitHub issue，这让我找到了this much discussed issue。在他的一个 cmets 中，用户 jackkoppa 提到了his StackOverflow Question，他在其中找到了解决此类问题的解决方法。

基本上，我只是将his script 添加到我们的项目中，并将它的命令添加到我们的project.json 中。

他描述的步骤如下：

使用解决方法：（Angular 5，使用 Angular 5.2.1 测试）

npm install replace-in-file --save-dev

在您的应用程序中包含此脚本，例如在build/fix-sw.js

在你的package.json:

"scripts": {
    ...
    "sw-build": "ng build --prod && node build/fix-sw",   
    "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
    ...
}

在本地运行

npm run sw-build
cd dist
http-server -p 8080

并为您的实时 URL 准备构建，之前发送到服务器（例如使用angular-cli-ghpages）npm run

sw-build-live

添加脚本后，我的 Angular 应用程序最终按预期运行。

在我们的例子中，我们不使用 base-href，所以它为我们所做的只是每次服务工作者将 EXISTING_CLIENTS_ONLY 写入其状态时注释掉。

【讨论】：