清单：行：1，列：1，语法错误。 AWS 出错

Question

我有一个 Angular 8 应用，我运行了这个命令来尝试设置 PWA 功能：

$ ng add @angular/pwa --project my-app

从那里开始，文件似乎按照您对 PWA 的期望进行设置，如 here 所述。

开发中没有错误。

但是，我现在已将该应用程序投入生产，并通过 AWS Amplify 托管，我相信这种添加 PWA 功能的尝试会产生问题。

一旦浏览器加载生产应用程序，它就会“卡在”该应用程序的版本上。因此，例如，我的 chrome 浏览器仍然会加载几天前的应用程序的第一个版本，即使我已经在 amplify 上多次更新了应用程序。这也发生在其他浏览器上，例如移动 safari。

当它加载旧版本时，它会在检查器中显示此错误：

Manifest: Line: 1, column: 1, Syntax error.

因此，在某些方面，AWS 与 PWA 功能相关的事情并不融洽。对此有已知的解决方法吗？

此应用现已投入生产，非常感谢您的帮助。

---

更多详情：

对于更多背景知识，我的 index.html 包括以下内容：

 <link rel="manifest" href="manifest.webmanifest">

在 app/src 文件夹中，是 manifest.webmanifest：

{
  "name": "My App",
  "short_name": "My App",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

我还会注意到，从一开始，在 Amplify 上运行 Angular 应用程序就产生了一些问题。首先需要添加以下内容才能使应用正常运行：

重写和重定向：

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)

Answer 1

就像我在问题中指出的那样，为了让 Amplify 与 Angular 一起工作，我必须添加这样的重定向：

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)

似乎结果是 Amplify 将重定向清单文件（不在“源地址”下的文件类型组中），因此清单文件根本不会显示任何内容。

我将 webmanifest 文件类型添加到组中，现在它似乎可以正常工作：

源地址

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|map|json|mp3|tff|webmanifest)$)([^.]+$)/>

目标地址

/index.html

类型

200 (Rewrite)