I had installed service worker by this command @angular/pwa and its also registered successfully but on going offline mode it gives no internet connection the data is not being cached and loaded when it goes offline , does any one have solution for same its specifically not working with angular 17
App.Module.ts
import { NgModule, isDevMode } from '@angular/core'; import { BrowserModule, provideClientHydration } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ServiceWorkerModule } from '@angular/service-worker'; import { PostComponent } from './components/post/post.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, PostComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: isDevMode(), // Register the ServiceWorker as soon as the application is stable // or after 30 seconds (whichever comes first). registrationStrategy: 'registerWhenStable:30000', scope: '/' }) ], providers: [ provideClientHydration() ], bootstrap: [AppComponent] }) export class AppModule { } index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>PwaDemo</title> <base href="./"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet"> <link rel="manifest" href="manifest.webmanifest"> <meta name="theme-color" content="#1976d2"> </head> <body> <app-root></app-root> <noscript>Please enable JavaScript to continue using this application.</noscript> </body> </html> 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" ], "urls": [ "https://fonts.googleapis.com/css2?family=Single+Day&display=swap" ] } }, { "name": "assets", "installMode": "lazy", "updateMode": "prefetch", "resources": { "files": [ "/assets/**", "/media/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)" ] } } ], "dataGroups": [{ "name" : "posts", "urls": [ "https://jsonplaceholder.typicode.com/posts" ], "cacheConfig": { "maxAge": "6h", "maxSize": 5, "strategy": "freshness", "timeout": "10s" } }] } Attached screenshots
