Installed pwa won't launch offline

Question

i've made a PWA using webpack offline plugin, configured this way :

// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
  ServiceWorker: {
    events: true,
  },
  relativePaths: false,
  publicPath: '/',
  appShell: '/',

  // No need to cache .htaccess. See http://mxs.is/googmp,
  // this is applied before any match in `caches` section
  excludes: ['.htaccess'], // index.html

  caches: {
    main: [':rest:'],

    // All chunks marked as `additional`, loaded after main section
    // and do not prevent SW to install. Change to `optional` if
    // do not want them to be preloaded at all (cached only when first loaded)
    additional: ['*.chunk.js'],
  },

  // Removes warning for about `additional` section usage
  safeToUseOptionalCaches: true,
  autoUpdate: true,
}),

new WebpackPwaManifest({
  name: 'my_app_name',
  short_name: 'my_app_short_name',
  description: 'my_app_description',
  background_color: '#364150',
  theme_color: '#b1624d',
  icons: [
    {
      src: path.resolve('app/images/icon-512x512.png'),
      sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192, 384, 512],
    },
  ],
}),

So the service worker works and i can see it on chrome devtools. The pwa is recognised by chrome and as i navigate to my url (hosted by heroku in https) chrome prompts with installation advice on mobile. I then install the app to my android phone, log in and use it as always. When i go offline everything still works, i can navigate throughout my app, i can minimize it and reopen, so far so good. When i CLOSE my app ( with task manager), i go OFFLINE, and i open it it will prompt with either a white page or a no connection prompt. Any tips? In addiction, how does it actually work? Everytime i click on the installed pwa it checks if i have connection and download the (if present) newer version of the app?

score 1 · Answer 1 · answered Jan 28 '19 at 16:30

Based from this link, you need an extra condition for the root request when handling the fetch event.

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});

Also from this thread, there is a required scope parameter that you need to specify in the client JavaScript when connecting to the serviceworker, if it's not running on the root (/) path.

In a navigate request mode where the response is not cached, this will always attempt to return index.html even if the user is connected to the internet. The correct approach is to unconditionally attempt to fetch then if it fails, that is when you return the offline content. See this answer: https://stackoverflow.com/a/46098981/8680805 — 95faf8e76605e973, Mar 17 '21 at 05:13

Installed pwa won't launch offline

1 Answers1