如何将 Angular 6 项目转换为 PWA 应用程序

Question

我的项目已经在使用 Angular 6 运行，我需要将 PWA 集成到我现有的应用程序中。 当我添加

ng add @angular/pwa

输出： + @angular/pwa@0.13.8

仅添加 1 个文件代替 6-7 个文件修改。 如果我创建一个新项目然后执行上述命令"ng add @angular/pwa" pwa 工作正常。

任何人都可以找到我做错的地方。

Answer 1

要将 PWA 集成到您的项目中，您需要执行以下步骤：

安装这两个包

"@angular/pwa": "0.12",
"@angular/service-worker": "^7.2.12"

在 angular.json 文件中添加这样的 serviceWorker 配置

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }

像这样在angular.json的同级创建ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://cdnjs.cloudflare.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

最后在您的 app.module.ts 中添加导入部分

ServiceWorkerModule.register("ngsw-worker.js", { enabled: environment.production })