角度 6 pwa 不起作用

Question

我做了一个简单的

ng new cx --service-worker
cd cx

第一个观察：我在 package.json 或任何模块条目等中没有看到使用此安装的 service worker。这是一个错误吗？

我继续前进并使用了

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

Answer 1

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

ng 添加@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 })

4. 创建manifes.webmanifest文件为src文件夹

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

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

“配置”：{

"production": {

    "serviceWorker": true,

     "ngswConfigPath": "ngsw-config.json"

}

}

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

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

Answer 2

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

文件扩展名：

.webmanifest

MIME 类型：

application/manifest+json

Answer 3

我有同样的问题。我启动了一个应用程序，但后来想将@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 4

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

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

Answer 5

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