Angular PWA does not work when change to OFFLINE and press Refresh (F5)

Question

I'm using angular to make PWA app.

Angular: 12

What is going on is:

I go to my app (online mode) -> The web app can display properly
Turn on developer console and change connectivity to OFFLINE
Press F5 to reload the application

What happens:

The below image is what it displays on the screen when I hit reload:

This is my 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.json",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

manifest.json

{
  "name": "ng-main",
  "short_name": "ng-main",
  "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"
    }
  ]
}

I built my application using `ng build --configuration production` and deployed to my local IIS Server — Redplane, May 18 '21 at 02:07
I think you need `ng build --prod`. And if you're project having api call then you need to cache api too. And also set base path in index.html too. — Developer, May 18 '21 at 04:31
I have built my project with production profile. I did as the official angular doc says, but does not work while pressing F5 — Redplane, May 18 '21 at 04:44
Any http server call inside your project. If yes then cache it too inside datagroups. And after running project give some time to cache pwa. Any third party script call inside index.html may need to cache. — Developer, May 18 '21 at 05:47
I removed the server side call, that means there is no api call in my app, the problem is still the same — Redplane, May 18 '21 at 15:01
One work around is create new project using angular cli. Then add pwa . and now test this default project is working or not? — Developer, May 18 '21 at 15:13

score 1 · Accepted Answer · answered May 23 '21 at 04:49

After having spent hours searching for solutions I noticed when I built my app using ng build --configuration production. There is one ngsw.json file inside my dist folder.

However, the urls and patterns in the generated ngsw.json file are all empty, like the one below:

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    }
]

When I added the urls to cache in assetGroups and tried again, the application worked smoothly. (Please see the content below)

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/login",
            "/dashboard"
        ],
        "patterns": [
            "/*.css",
            "/*.js"
        ]
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/favicon.ico",
            "/index.html",
            "/manifest.webmanifest",
            "/ngsw.json"
        ],
        "patterns": []
    }
]

I already reported to Angular team about this and it has been confirmed as a bug in Angular 12.

In conclusion, now, I have to workaround by copying the ngsw.json file with the cached urls in assetGroups, after having built the application, I copy that ngsw.json to the dist folder.

Angular PWA does not work when change to OFFLINE and press Refresh (F5)

1 Answers1