Angular PWA service worker 在部署到 IIS 时不刷新离线

Question

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

当我使用 http-server 为我们的 PWA 提供服务时，一切似乎运行都很好，但是当我将它部署到我们的实时环境中时，它只是一个 Windows 带有 IIS 的服务器运行在线很好。当我离线时，我无法刷新页面。 Service Worker returns 状态为 504，我不明白为什么。

我运行不知道如何解决问题。

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

有没有人知道我可以检查什么，例如在我的 HTTP headers?

Answer 1

所以显然我的问题与我的 IIS 配置无关。我仍然无法解释为什么它可以在 http-server 上工作，但现在我也可以在 IIS 上工作了。

经过大量研究和不成功的实验后，我试图观察，ngsw-worker.js 究竟做了什么导致了这个错误。在放置一些断点并找到新的关键字进行搜索后，我偶然发现了 this GitHub issue which led me to this much discussed issue. In one of his comments the user jackkoppa mentioned his Whosebug Question 他找到了解决此类问题的解决方法。

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

以下是他描述的步骤：

To use the workaround: (Angular 5, tested w/ Angular 5.2.1)

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

Include this script in your app, e.g. at build/fix-sw.js

In your 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"
    ...
}

To run locally

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

And to prepare a build for your live URL, before sending to a server (e.g. with angular-cli-ghpages) npm run

sw-build-live

添加脚本后，我的 Angular 应用终于按预期运行了。

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

Angular PWA service worker 在部署到 IIS 时不刷新离线

Angular PWA service worker not refreshing offline when deployed to IIS

iis

service-worker

progressive-web-apps

angular

angular-service-worker