1

我做了一个简单的

ng new cx --service-worker
cd cx

第一个观察：我没有看到在 package.json 或任何模块条目等中使用它安装的服务工作者是一个错误吗？

我继续前进并使用

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/ 位置且内容非空。我暂时保留了这些默认设置。

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

5 回答 5

1

您必须在 Angular 项目中运行以下命令。

ng add @angular/pwa --project项目名称

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

上面的命令将在您的 Angular 项目中进行以下代码更改。您不需要其他任何东西。

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

  1. 在 index.html 中添加以下行

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

ServiceWorkerModule.register('ngsw-worker.js', { enabled: true })

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

  2. 在根文件夹中创建名为 ngsw-config.json 的 service worker 配置文件

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

“配置”： {

"production": {

    "serviceWorker": true,

     "ngswConfigPath": "ngsw-config.json"

}

}

  1. 安装图标文件以支持已安装的 Progressive Web App (PWA)。

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

于 2020-02-13T19:49:52.743 回答
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>
于 2018-08-07T03:28:46.110 回答
0

我自己还没有更新到 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/

于 2018-05-16T01:36:19.873 回答
0

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

文件扩展名：

.webmanifest

MIME 类型：

application/manifest+json
于 2019-08-02T00:14:15.587 回答
0

您必须运行 Chrome 开发工具 -> 审核 -> 执行审核 -> 渐进式 Web 应用程序并给我们该屏幕截图，如果没有它，它只是一个黑框，说明满足所有PWA 标准和不满足什么标准。

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

于 2018-05-17T15:57:49.440 回答