Angular 角度6 pwa不工作

我做了一个简单的测试

ng new cx --service-worker
cd cx

第一个观察结果：我没有看到在package.json或任何模块条目中使用这个来安装service worker。这是一个bug吗

我继续前进，用

ng add @angular/pwa

这将添加服务工作者。但是，在运行时，我在控制台中看到错误：

Manifest.json

Unexpected error line 1 col 1, unexpected token;

mnifest.json

{
  "name": "cx",
  "short_name": "cxa",
  "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"
    }
  ]
}

我验证了该文件确实存在于src/location中，并且包含非空内容。我暂时保留了这些默认值

ng -v 
Angular CLI: 6.0.1
Node: 8.11.1
OS: darwin x64
Angular: 6.0.2

---

我自己还没有更新到Angular 6。但这里有一些链接可能有助于解决错误和配置manifest.json

---

你必须运行Chrome开发工具->审计->执行审计->渐进式Web应用程序，并给我们屏幕截图，没有屏幕截图，它只是一个黑匣子，告诉我们什么都符合，什么都不符合

---

报告应明确说明您的PWA存在什么问题，并帮助您解决问题。如果没有，请发布截图，我们将进一步提供帮助

我也有同样的问题。我启动了一个应用程序，但后来想将

@angular/cli

添加到项目中。虽然我把它和我的相提并论，但什么都不管用。我注意到他们的做法与我下面的做法不同

最后，我在我的

index.html

末尾添加了以下内容：

<script>
  if ( 'serviceWorker' in navigator ) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/service-worker.js');
    });
  }
</script>

---

对我来说，修复是在IIS中进行的。我必须添加一个mime类型来处理manifest.webmanifest文件

文件扩展名：

.webmanifest

MIME类型：

application/manifest+json

---

您必须在角度项目中运行以下命令

ng add@angular/pwa——项目名称

，其中project name是您已经在angular.json文件中定义的名称

上述命令将在角度项目中执行以下代码更改您不需要做任何其他事情。

通过安装相关软件包（“@angular/pwa”和“@angular/service worker”）在CLI中启用service worker生成支持。它还将这些包添加到package.json文件中

在index.html中添加以下行

在app.module导入中添加以下行

ServiceWorkerModule.register（'ngsw-worker.js'，{enabled:true}）

创建manifes.webmanifest文件是src文件夹

在根文件夹中创建名为ngsw-config.json的服务工作者配置文件

使用配置对象中的以下更改更新angular.json文件

“配置”：{

}

安装图标文件以支持已安装的渐进式Web应用程序（PWA）

---

阅读Angular中的PWA以及如何调试它

是的，检查了这些，理想情况下，这些步骤非常基本，我的第一个应用程序应该按原样运行，但遗憾的是它确实如此not@AdiMabfalin问题不在于角度，关于角度。你能发布你的

manifest.json

代码吗？我刚刚添加了它。当你测试这个时，你是如何运行服务器的？您的错误提到

Manifest.json

，大写字母为

M

，实际清单文件的大小写是否为，网络对清单文件的请求，而

index.html

中的

链接

标记都是一致的大小写？重新开始并按照以下步骤操作：这里我多次尝试lighthouse，但都失败了。我认为原因是页面无法自行呈现。这是由owa aoo创建的默认值您所说的“owa aoo”是什么意思？很明显，您的manifest.json没有得到正确的服务，您可能是在HTTP而不是HTTPS中访问的。如果您有一个使用Angular CLI创建的简单默认项目，请继续并在github中发布代码，并在此处链接。另外，请确保您没有使用ng serve运行应用程序，因为它不支持PWA。您必须使用http server-o-i-p-S之类的东西来支持您的web应用程序以HTTPS的形式访问PWA.typo owa aoo实际上是PWA应用程序：）

application/manifest+json

"production": {

    "serviceWorker": true,

     "ngswConfigPath": "ngsw-config.json"

}