javascript - Angular throw error no matching service worker detected - Stack Overflow

admin管理员组

文章数量:1290270

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

Below is my config

package.json

    "@angular/animations": "~8.2.14",
    "@angular/mon": "~8.2.14",
    "@angular/piler": "~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
        })
    ],

index.html

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

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.

Much appriciated.

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

Below is my config

package.json

    "@angular/animations": "~8.2.14",
    "@angular/mon": "~8.2.14",
    "@angular/piler": "~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
        })
    ],

index.html

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

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.

Much appriciated.

• javascript
• angular
• service-worker
• progressive-web-apps
• angular8

Share Improve this question Follow edited Nov 22, 2023 at 21:11 Tony asked Feb 20, 2020 at 8:55 TonyTony 20.1k77 gold badges4141 silver badges6262 bronze badges 6

• In index.html you link a manifest.webmanifest but in ngsw-config you reference manifest.json. I don't know if it will help to fix something. I am just pointing it out. – joka00 Commented Feb 20, 2020 at 9:02
• Ah sorry just a typo. I'm using json file – Tony Commented Feb 20, 2020 at 9:03
• 1 Did you ever solve this? I am having the exact same issue with Angular 9.0.0 – Kosso Commented Mar 11, 2020 at 23:23
• @Kosso sadly not still cant find the solution :( – Tony Commented Mar 12, 2020 at 1:23
• 1 @TonyNgo OK. Since I asked, I discovered that a required interval on my site seems to affect the registration of the Service worker. So to fix it, I needed to set the registrationStrategy to registerImmediately like this: ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }) By default, the Service Worker will wait until the site has 'stabilised'. – Kosso Commented Mar 12, 2020 at 16:28

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 8

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

I think you may have missed

"/index.html" "/assets/**", or maybe your assets are in separate image folder(I can't be sure until i see folder structure) "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" in

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

Other than this there seems to be no difference.Although, I have tried same config as yours which was working correctly.

You need to use

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

instead of

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

本文标签： javascriptAngular throw error no matching service worker detectedStack Overflow