Module does nothing ? (EDIT: No Firefox support ?)

[CaptainFalcon92]

Good day,

I'm definitly confused on how to get this module to do anything at all.

Recently installed with yarn add @vite-pwa/nuxt -D i got "@vite-pwa/nuxt": "^0.6.0",

Added the module to the config:

modules: [
  //...
  '@vite-pwa/nuxt',
],

Then i tried looking at what's $pwa value: {{ $pwa }}

{
  "isInstalled": false,
  "isPWAInstalled": false,
  "showInstallPrompt": false,
  "swActivated": false,
  "registrationError": false,
  "offlineReady": false,
  "needRefresh": false
}

So it's no undefined - the thing is here - but it does not do anything so far.

Looking in dev tools, no worker generated so far.

Added <NuxtPwaManifest /> to app.vue
no manifest to be seen.

Called nuxtApp.$pwa.install()
does nothing. Not even an error or log in console.

Whether i'm running https or http : just the same.

About the commands described in the example section :

    nr dev:preview:build: Nuxt build command + start server
    nr dev:preview:generate: Nuxt generate command + start server

Never seen or heard about that 'nr' command since working with og nuxt in alpha phase :(
I know about build and preview commands, which i tried but got no hint of a pwa working as well.

Sorry but, what does it take to get the module to perform something please ?
Thanks a lot.

[CaptainFalcon92]

I found demo config in the playground files.
By adding configuration - despite the "Zero-config" nature of this module :) - i managed to get a worker running in my dev tools.

 devOptions: {
      enabled: true,
    },
    manifest: {
      name: 'Nuxt Vite PWA',
      short_name: 'NuxtVitePWA',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },

Still the app says it's false all the way

{
  "isInstalled": false,
  "isPWAInstalled": false,
  "showInstallPrompt": false,
  "swActivated": false,
  "registrationError": false,
  "offlineReady": false,
  "needRefresh": false
}

[userquin]

Here some hints:

• nr is a shortcut for npm/pnpm/yarn run command via ni package
• you need to enable devOptions.enable flag option to run the PWA in dev server
• install method cannot be used directly: you need to check $pwa?.showInstallPrompt flag, will be true when the browser is ready to install your app (requires a valid web manifest and app installed and activated) => check the default layout in the playground

[userquin]

Still the app says it's false all the way

You also need to enable client.installPrompt option (disabled by default): https://github.com/vite-pwa/nuxt/blob/main/playground/nuxt.config.ts#L71

[CaptainFalcon92]

Hello

I got it. It says false everywhere on Firefox.
installPrompt is set to true, yet the app still says it's false.

{
  "isInstalled": false,
  "isPWAInstalled": false,
  "showInstallPrompt": false,
  "swActivated": false,
  "registrationError": false,
  "offlineReady": false,
  "needRefresh": false
}

Chrome says differently

{
 "isInstalled": false,
 "isPWAInstalled": false,
 "showInstallPrompt": false,
 "swActivated": true,
 "registrationError": false,
 "offlineReady": true,
 "needRefresh": false
}
App ready to work offline

The current config.

    strategies: 'generateSW',
    registerType: 'autoUpdate',
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 3600,
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    injectManifest: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    devOptions: {
      enabled: true,
    },
    manifest: {
      name: 'Nuxt Vite PWA',
      short_name: 'NuxtVitePWA',
      theme_color: '#ffffff',
      icons: [
        ...
      ],
    },
  },

Does this module not being firefox compatible has been reported before ? I might be missing a parameter Firefox considers mandatory.

[userquin]

FF doesn't support it, check caniuse beforeinstallprompt

[CaptainFalcon92]

Truly i do not understand what's happening. Sorry, i might have jumped on this module thinking it would help me get a pwa running with Nuxt3.

Coming from a Nuxt2 app where i used nuxt/pwa module about a year ago - i immediately got a running pwa app in all browser, firefox included.

I understand this module is different - but how could we have regress in pwa support since ?

Does this means this module only support chrome ?
Because i can see FF did register the worker.

[userquin]

If the browser doesn't support xxx api feature we cannot do anything here: old pwa nuxt 2 module doesn't expose beforeinstallprompt api, you need to use Add To Home Screen in FF and Safari using this plugin, old nuxt 2 plugin or vanillajs.

FF not registering the SW because you need to serve your app using https, chromium based browsers will allow us to register service worker in localhost without https: try installing https-localhost as dev dependency and run npx serve <output-public-folder> (if using nuxt generate) or try adding and running the script below in your local once https-localhost dev dependency installed (you will need to run npx serve <some-folder> once to generate the SSL/TLS certificate):

(You can also copy the public certificate and the corresponding private key, no idea if the certificate is expired)
https://github.com/elk-zone/elk/tree/main/https-dev-config

[userquin]

Check this comment about FF elk-zone/elk#337 (comment):

[CaptainFalcon92]

Thank you for all your guidelines. I will do my best to apply this and find a good balance between what browsers can and cannot support.

Best,