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

Question

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

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

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

开发中没有错误。

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

浏览器加载正式版应用后，它会在该应用版本上获得 "stuck"。因此，例如，我的 chrome 浏览器仍然加载了几天前该应用程序的第一个版本，即使我已经多次更新该应用程序。这也发生在其他浏览器上，例如 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 将重定向清单文件（不在 "Source Address" 下的文件类型组中），因此清单不会显示任何内容文件。

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

源地址

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

目标地址

/index.html

类型

200 (Rewrite)

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

Manifest: Line: 1, column: 1, Syntax error. Error with AWS

amazon-web-services

progressive-web-apps

angular

aws-amplify