1

这是我第一次与服务人员一起工作，我遇到了困难，因为我总是在网络 - 应用程序 - 清单选项卡中遇到此错误：

在此处输入图像描述

一些技术细节：

包.json

"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/localize": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/pwa": "^0.901.12",
"@angular/router": "~9.1.0",
"@angular/service-worker": "~9.1.0",

角.json

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/appName/src/environments/environment.ts",
                  "with": "projects/appName/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "projects/appName/src/ngsw-config.json"

manifest.webmanifest

{
  "name": "app name",
  "short_name": "app",
  "description": "test test",
  "theme_color": "#003f8b",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/flatwork.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/icon-withdrawal-mark.png",
      "sizes": "27x23",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/incoming.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/input.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/master_data_icon.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/outgoing.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/output.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/rental_outfit.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/repair.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/scanned_on.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/images/icons/tooltip_icon.svg",
      "sizes": "150x150",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

索引.html

<meta name="theme-color" content="#003f8b" />
<link rel="manifest" href="manifest.webmanifest" />

<body>
  <bar-root></bar-root>
  <noscript
    >Please enable JavaScript to continue using this application.</noscript
  >
</body>

应用程序模块

  imports: [
    BrowserModule,
    ServiceWorkerModule.register('../ngsw-worker.js', {
      enabled: environment.production
    }),
    ... // other imports
  ],
  providers: [
    {
      provide: SwRegistrationOptions,
      useFactory: () => ({
        enabled: environment.production,
        registrationStrategy: 'registerImmediately',
      }),
    },
  ]

ngsw-config.json

{
  "$schema": "../../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

此外，这是检查路径导入的项目结构：

在此处输入图像描述

我错过了什么？另外，测试任何配置更改的最佳方法是什么？

4

1 回答 1

0

我找到了关于我的问题的解决方案，需要进行一些小的更改：

app.module- 调整服务工作者注册

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  // Register the ServiceWorker as soon as the app is stable
  // or after 30 seconds (whichever comes first).
  registrationStrategy: 'registerWhenStable:30000',
}),

如果angular.json您有针对不同环境的多个构建，比如说生产和 QA，您可以在两者上添加这些配置：

"serviceWorker": true,
"ngswConfigPath": "projects/appName/ngsw-config.json"

// 或者你有 ngsw-config.json 的任何路径，但这可能会在安装 @angular/pwa 时自动生成。

要测试您的更改，请运行ng build或 ngbuild --prod或您想要测试的任何其他环境。

要查看 prod 环境的构建，我使用了http-server，您可以在 npm 中找到并安装它。您的构建将在 dist 文件夹中创建，并在应用程序运行的根文件夹中（9191 是端口，您可以将其更改为您喜欢的任何内容，只要确保没有任何内容在其上运行）：

http-server -p 9191 -c-1 dist/appName

您可以打开 9191 localhost 端口并检查 Manifest 和 Service Workers 下的开发人员工具、应用程序选项卡，以确保一切正常。

我还从我的项目中删除了 ngsw-worker.js，因为在您进行构建时它会自动从 node_modules 中移动。

于 2021-11-02T13:32:17.083 回答