Service Worker is not being registered in my Angular App

Question

I developed an app using angular 11 for frontend and Spring Boot for backend, now i need to configure it as PWA (Progressive Web App), so i did a research on angular official page and forums so i found out that using the simple command ng add @angular/pwa, all the files needed for this porpouse would be installed automatically as well as the service worker.

However, i already configured everything as it was mentioned in the forums and angular official site but the browser keep getting the same error:

"No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest"

My files look as follows:

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

manifest.webmanifest

    {


 "name": "Nos Cuidamos",
  "short_name": "Nos Cuidamos",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

app.module

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

angular.json

 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",


 "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "nos-cuidamos": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/custom-theme.scss",
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/material-design-icons/iconfont/material-icons.css"
            ],
            "scripts": [],
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json"
          },

package.json

 "@angular/service-worker": "~9.1.6",

Could you give your thoughts on what could i be missing to make it work.

Thanks in advance

user_12119351 · Answer

I have same issue like you below my steps of solution may it helpful to you:

I have install pwa using (add command) although i am not able to found pwa in my package.json file so using npm install @angular/pwa i have install it manually.
After that pwa package install but in my case serviceWorker not register so doing below stuff:

add code in index.html inside

 if ("serviceWorker" in navigator) {
   navigator.serviceWorker
     .register("sw.js")
     .then(function (registration) {
       console.log("success load");
     })
     .catch(function (err) {
       console.log(err);
     });
  }

Add sw.js file inside "src" folder with below code:

self.addEventListener("fetch", function (event) {});

user_13061990 · Answer

In my case, i was trying to build the application in development mode and i didn't notice this line:

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production, // <----- this line here
  registrationStrategy: 'registerWhenStable:30000'
}),

which basically disables the registration of the service worker when the app is in development mode. Silly mistake but i figured it might help someone.

Service Worker is not being registered in my Angular App

2 Answers