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

Question

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

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

从那里开始，文件的设置似乎与您对 PWA 的期望一样，如此处所述。

开发过程中没有错误。

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

一旦浏览器加载生产应用程序，它就会“卡在”该版本的应用程序上。例如，我的 Chrome 浏览器仍然加载几天前该应用程序的第一个版本，尽管此后我已经在 amplify 上多次更新了该应用程序。这种情况也发生在其他浏览器（例如 mobile 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)