Service worker's offline caching is not working if I add my PWA on home screen

Question

I made a PWA. Currently is deployed on heroku. URL - https://plain-js-pwa.herokuapp.com/ .

My PWA installs service worker and manifest.json file. If I open it on chrome on mobile phone and put my phone on flight mode, then refreshing the url still gives shows me my application. Its expected as my service worker is doing offline caching.

But when I add my PWA to home screen, and try to open it on flight mode then it doesn't work. This is probably my first PWA, so please help me. I am generating my service worker file from 'sw-precache-webpack-plugin'.

My manifest.json file is:

{
  "name": "VanillaJS-webpack App",
  "short_name": "VanillaJS-webpack App",
  "description": null,
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "any",
  "start_url": "/?homescreen=1",
  "background_color": "#ee6e73",
  "icons": [
    {
      "src": "android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Answer 1

When loading from home screen it should work in the same way as when loaded from the browser.

In your example, a quick debugging seems to indicate that the problem is related to the query string: https://plain-js-pwa.herokuapp.com/?homescreen=1

It does not work offline when the query string is added (irrelevant if loaded from home screen or otherwise). Without looking at your service worker configuration, most likely you need to instruct your service worker to ignore query string params using ignoreSearch ( https://developer.mozilla.org/en-US/docs/Web/API/Cache/match ) or ignoreUrlParametersMatching if using sw-precache .