Angular service worker offline caching is not working when I've deployed in server

Question

When I built my angular project with angular/pwa and tested it on local server using http-server, it was working as expected. Even offline caching is working fine in local.

But when I've deployed the same thing in server, I was able to install and run it on any device but not able to open when I am offline.

service-workers are not caching the contents in angular pwa

Here's my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GetchucknorrisjokesService } from './getchucknorrisjokes.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [ GetchucknorrisjokesService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here's my ngsw-config.json file

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Baelbeer

Can you upload the code how you config sw in your module ? – Sempiternal

Hey @Sempiternal Ngo I've uploaded app.module.ts – Baelbeer

Answer 1

Update your serivce worker like this by removing $schema, my configuration is the same as your

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

You have the problem because when you build into production mode your code is looking for this file ./node_modules/@angular/service-worker/config/schema.json

So your service worker will not work

Sempiternal

I've removed $schema & reuploaded it. Now it's working fine – Baelbeer

I removed the $schema from the ngsw-config.json but still, it is not working on the production. locally it is working. – Arcadian

@MuhammadShahab you can open dev console then go to application tab > Choose Manifest on the left side you will be able to see errors and warnings – Sempiternal

@TonyNgo, Richer PWA install UI won't be available on desktop.please add at least one screenshot with the form_factor set to wide. Richer PWA install UI won't be available on mobile. Please add at least one screenshot for which form_factor is not set or set to a value other then wide. – Arcadian

now I add a screenshot object in the manifest file and the error and warning are now cleared. but still not working in offline mode. – Arcadian

@TonyNgo I solved all the manifest errors and added the $schema back to new-config.json and now the offline mode is working. thanks for your help. – Arcadian

Answer 2

I solved all the manifest file errors and added the $schema back to new-config.json and now the offline mode is working.

Arcadian