service-workerangular9angular-service-workerangular-pwaservice-worker-config

No matching service worker detected - Angular 9

this is my first time working with service workers and I am having difficulties because I always get this error in the Network - Application - Manifest tab:

enter image description here

Some technical details:

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

Also, here is the project structure to check the path imports:

enter image description here

What am I missing? Also, what is the best way to test any config changes?

Solution

  • I found a solution regarding my issue, some small changes were required:

    app.module - adjusted the service worker registration

    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',
}),

    In angular.json if you have multiple builds for different environments, lets say production and qa, you can add these configs on both:

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

    // or whichever path you have for the ngsw-config.json, but this will probably be generated automatically when installing @angular/pwa.

    To test your changes, run ng build or ng build --prod or any other environments you want to test on.

    To see the build for the prod environment I used http-server, which you can find in npm and install it. Your build will be created in a dist folder, and in the root folder of the app run(9191 being the port, you can change it to whatever you like, just make sure nothing runs on it):

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

    You can open you 9191 localhost port and check in the Deveoper Tools, Application tab, under Manifest and Service Workers to make sure everything is running.

    I also removed ngsw-worker.js from my project because it is moved automatically from node_modules when you do the builds.