未检测到匹配的服务人员 - Angular 9答案

【问题标题】：No matching service worker detected - Angular 9未检测到匹配的服务人员 - Angular 9
【发布时间】：2021-12-16 21:30:11
【问题描述】：

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

一些技术细节：

package.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",

angular.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"
    }
  ]
}

index.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>

app.module

  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)"
        ]
      }
    }
  ]
}

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

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

【问题讨论】：

标签： service-worker angular9 angular-service-worker angular-pwa service-worker-config

【解决方案1】：

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

app.module - 调整 Service Worker 注册

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 或 ng build --prod 或您想要测试的任何其他环境。

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

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

您可以打开 9191 localhost 端口并检查开发人员工具，应用程序选项卡，在清单和服务工作者下，以确保一切都在运行。

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

【讨论】：