Question

我做了一个简单的

ng new cx --service-worker
cd cx

首先观察：我没有看到在package.json或任何模块条目等中使用它安装的服务工作者是不是一个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

Answer 1

我有同样的问题。我启动了一个应用程序，但随后想将@angular/cli添加到项目中。尽管我将其与https://github.com/ng-model/pwa/进行了比较，但没有任何效果。我注意到他们的行为与我下面的行为不同。

我最终在index.html的末尾添加了以下内容：

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

对于Angular 6+，文件名更改为ngsw-worker.js

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

Answer 2

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

https://scotch.io/tutorials/how-to-build-progressive-web-apps-with-angular https://developers.google.com/web/fundamentals/web-app-manifest/

Answer 3

您必须运行Chrome开发工具 - ＆gt;审核 - ＆gt;执行审核 - ＆gt;渐进式网络应用程序，并给我们这个截图，没有它，它只是一个黑盒子上所有PWA criteria被满足，什么不是。

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

Answer 4

对我来说，此修复程序在IIS中。我必须添加一个mime类型来处理manifest.webmanifest文件。

文件扩展名：

.webmanifest

MIME类型：

application/manifest+json

Answer 5

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

ng添加@ angular / pwa --project 项目名称

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

以上命令将在开箱即用的角度项目中执行以下代码更改。 您无需进行其他任何操作。

通过安装相关软件包（“ @ angular / pwa”和“ @ angular / service-worker”）在CLI中启用服务工作者的构建支持。还将那些包添加到package.json文件中。

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

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

创建manifes.webmanifest文件为src文件夹
在根文件夹中创建名为ngsw-config.json文件的服务工作者配置文件
使用配置对象中的以下更改更新angular.json文件。

“配置”：{

"production": {

    "serviceWorker": true,

     "ngswConfigPath": "ngsw-config.json"

}

}

安装图标文件以支持已安装的Progressive Web App（PWA）。

了解Angular中的PWA及其调试方法here

角6 pwa不起作用

5 个答案: