Angular PWA Service Worker 在部署到 IIS 时不会离线刷新

如何解决Angular PWA Service Worker 在部署到 IIS 时不会离线刷新

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

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

我已经没有如何排除故障的想法了。

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

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

解决方法

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

经过大量的研究和不成功的实验，我试图观察，ngsw-worker.js 究竟是做什么导致了这个错误。在设置了一些断点并找到要搜索的新关键字后，我偶然发现了 this GitHub issue，这让我找到了 this much discussed issue。用户 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 写入其状态时注释掉。