Why my service worker in Angular isn't working or registering in browser?

I'm using Angular 16 with Node 18.20, so I use the command ng add @angular/pwa

Then I add a new command to run teh dist folder: "start-pwa": "ng build --configuration production --base-href=/ && http-server -p 8080 -c-1 dist/inno-app-16"

And run it like this: npm run start-pwa

Now in the page, in Application > Service Workers it not showing anything.!



And it doesn't matter if I create a new app or use an old one, no one show teh service worker..!

This is my manifest:

{
"name": "inno-app-16",
"short_name": "inno-app-16",
"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"
}
]
}


and my ngsw-config

{
"$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/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]
}


And I found a 'solution' in other question and it was to configure my service worker like this:

ServiceWorkerModule.register('ngsw-worker.js', {
enabled: !isDevMode(),
registrationStrategy: 'registerImmediately'
})


But if you have a 3th party libraries setInterval won't work, and also this solution didn't work for me.

Continue reading...