Angular v8 抛出错误未检测到匹配的 Service Worker [英] Angular v8 throw error no matching service worker detected

问题描述

使用带有 angular v8 的 Service Worker 时，我总是遇到如下错误，这在 v7 中没有发生

I'm always get the error like below when using service worker with angular v8 which did not happend in v7

下面是我的配置

package.json

package.json

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

angular.json

angular.json

"assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json"
],
"configurations": {
    "production": {
        // other is ommitted
        "serviceWorker": true,
        "ngswConfigPath": "ngsw-config.json"
    }
}

ngsw-config.json

ngsw-config.json

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/assets/favicon.ico",
            "/manifest.json",
            "/*.css",
            "/*.js"
          ]
        }
      }, {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/images/**"
          ]
        }
      }
    ]
  }

app.module.ts

app.module.ts

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

index.html

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">

manifest.json

manifest.json

{
    "name": "project",
    "short_name": "project",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "assets/favicon.ico",
            "sizes": "72x72",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "96x96",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "128x128",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "144x144",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "152x152",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "192x192",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "384x384",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "512x512",
            "type": "image/ico"
        }
    ]
}

请帮我指出我遗漏的地方.

Please help me to point out what I have missed.

很受用.

推荐答案

我发现了这个问题.网络可能不稳定，所以 Service Worker 无法注册.所以要修复它只需添加这个配置

I found the issue. The network may not stable so service worker cant register. So to fix it simply add this config

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

这篇关于Angular v8 抛出错误未检测到匹配的 Service Worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！