Angular v8 拋出錯誤未檢測到匹配的 Service Worker

Question

使用帶有 angular v8 的 service worker 時，我總是遇到如下錯誤，這在 v7 中沒有發生

下面是我的配置

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

"assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json"
],
"configurations": {
    "production": {
        // other is ommitted
        "serviceWorker": true,
        "ngswConfigPath": "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

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

索引.html

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

清單文件

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

請幫助我指出我遺漏了什么。

很受用。

Answer 1

我發現了這個問題。 網絡可能不穩定，所以 Service Worker 無法注冊。 所以要修復它，只需添加此配置

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

Answer 2

我想你可能錯過了

"/index.html" "/assets/**"，或者你的資產在單獨的圖像文件夾中（在我看到文件夾結構之前我不能確定）"/*.(eot|svg|cur|jpg|png |webp|gif|otf|ttf|woff|woff2|ani)”在

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

除此之外，似乎沒有什么區別。雖然，我已經嘗試過與你相同的配置，但它工作正常。

Answer 3

你需要使用

"ngswConfigPath": "src/ngsw-config.json",

代替

"ngswConfigPath": "ngsw-config.json",