nuxt/pwa not working "offline" when deployed to heroku

Question

I am using Nuxt in ssr: false mode and deploying my app to heroku following this guide.

Now I am using nuxt/pwa module which works perfectly fine when testing my app via npm run build && npm run start (production mode).

Also I noted this comment from the nuxt/pwa docu:

NOTE: If using ssr: false with production mode without nuxt generate, you have to use modules instead of buildModules

which I configured correctly so my nuxt.config.js file looks like this:

ssr: false,
...
  modules: [
    ...
    '@nuxtjs/pwa'
  ],

  pwa: {
    manifest: {
      name: 'XY App',
      lang: 'de'
    }
  },

Now when the app is deployed to heroku and I turn my phone into flight-mode to simulate offline status, the app is not responding: "You're not connected to the internet" is showing up in the browser. What do I do wrong here? I cannot see any misconfiguration but maybe I miss something from the PWA approach.

Answer 1

I'm not sure on how to configure it, but I know that the package itself do not allow a full offline mode by default. Looking at the documentation, it looks like Workbox is doing exactly that. It should be pretty easy to setup and enable a full service-worker + cached pages thanks to it IMO.

https://pwa.nuxtjs.org/workbox

It looks like the starting point is: yarn add @nuxtjs/workbox, then fine tuning the configuration!

PS: the rest of your configuration looks nice to me!