Chrome 中的 Angular 6 PWA 504 错误。基本href问题？

Question

当我尝试在 IIS 上提供我的 Angular 应用程序时，我偶然发现了一个奇怪的错误，但我似乎无法解决它。
当我尝试离线访问我的 PWA 时(在 Chrome 中)，会出现 HTTP 504 错误。

设置很简单:< 5 分钟

ng new pwaDemo

cd 到应用程序和 ng add @angular/pwa

在 app.module.ts 添加 .到 ServiceWorkerModule，以便应用程序可以找到 ngsw-worker.js ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })

在 list 更改范围和 start_url 中:"scope": "/pwaDemo/",
"start_url": "/pwaDemo/",

构建应用程序以使用 ng build --prod --base-href /pwaDemo/

使用非托管代码将应用程序添加到您的 IIS 并指向 C:\Users\myUsername\Desktop\myAngularApp\pwaDemo\dist\pwaDemo

导航至 https://computername/pwaDemo/带 Chrome

Service Worker 已下载并显示一切正常

使 Chrome 离线(F12 -> 应用程序 -> Service Workers -> 离线)

重新加载页面:-> 504 错误。

我似乎无法弄清楚出了什么问题。当我在 Firefox 中尝试时一切正常(即使在离线模式下)。

当我使用 http-server 来托管应用程序(没有 --base href)时，一切都在 Chrome 中运行(包括离线)。

有人可以帮忙吗？我真的被困住了。

版本:

Angular CLI: 6.0.8

Answer 1

检查 IIS 是否为您的 manifest.webmanifest 提供服务文件正确(检查您的网络选项卡，看看您第一次访问该站点时是否正在下载该文件)。
如果不是，则需要为 .webmanifest 配置 MIME 类型在 IIS 中 - 使用 application/manifest+json .
或者，您可以遵循此选项，而根本不使用 web.config:
https://stackoverflow.com/a/53266152/214980
为我修复的还有 manifest.appmanifest ClientApp\src 中的文件文件夹，但随后也将其包含在 angular.json 中文件，以便在构建过程中正确复制。就我而言，这也包括一个 Assets 文件夹，例如:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "assets": [ "src/assets", "src/manifest.webmanifest" ],