PWA does not seem to work with rc-7 (Vite 3)

[rmenai]

Reproduction steps

• npx nuxi init nuxt-app
• cd nuxt-app
• yarn add @kevinmarrec/nuxt-pwa
• yarn build && yarn preview

Lighthouse

Upon upgrading to rc-7, my pwa is lo longer installable. This might be because Vite was updated to version 3.

[toniengelhardt]

Also having issues...

[BenjaminOddou]

Same here. The manifest file is not available under the root link /manifest.json.

[kevinmarrec]

Hi, I'm off for almost 2 weeks so I won't be able to take a look quickly.

This is a framework upstream issue which indeed may be caused by Vite upgrade.

/cc @pi0

[brambekkers]

Has anyone found a solution for this?

[BenjaminOddou]

unfortunately not for the moment @brambekkers

[mjzarrin]

I could run PWA in dev mode however when I build my project, the PWA manifest gets replaced by the Nuxt manifest.

    "@kevinmarrec/nuxt-pwa": "^0.4.2",
    "nuxt": "3.0.0-rc.8",

// http://localhost:3000/manifest.json in dev mode

{
  "name": "NAME",
  "short_name": "SNAME",
  "description": "DESCRIPTION",
  "lang": "en",
  "start_url": "/?standalone=true",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/_nuxt/icons/64x64.png",
      "type": "image/png",
      "sizes": "64x64",
      "purpose": "any"
    },
...
}

// http://localhost:3000/manifest.json in prod mode

{
  "node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot": {
    "file": "_nuxt/materialdesignicons-webfont.861aea05.eot",
    "src": "node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot"
  },
  "node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2": {
    "file": "_nuxt/materialdesignicons-webfont.e52d60f6.woff2",
    "src": "node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2"
  },
  "node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff": {
    "file": "_nuxt/materialdesignicons-webfont.48d3eec6.woff",
    "src": "node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff"
  },
  "node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf": {
    "file": "_nuxt/materialdesignicons-webfont.bd725a7a.ttf",
    "src": "node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf"
  },

...
}

[kevinmarrec]

Hi, I'm back from my days off and will try to work on a fix this week.

[pi0]

Likely solved by nuxt/framework#7021 (try on edge)

[kevinmarrec]

If anyone want to try the upstream fix, you can try this in your package.json then run your package manager to install the Nuxt Edge version that contains the potential fix.

{
  "devDependencies": {
-   "nuxt": "^3.0.0-rc.8"
+   "nuxt": "npm:[email protected]"
  }
}

[kevinmarrec]

Update

You can now try with last Release candidate version :

{
  "devDependencies": {
-   "nuxt": "^3.0.0-rc.8"
+   "nuxt": "^3.0.0-rc.9"
  }
}

This issue should be resolved.

[rmenai]

Perfect now we can close this issue

[Corentin7301]

Hi!
I'm sorry but, after Nuxt update (rc8 --> rc9), I've the same problem...

Nuxt version : ^3.0.0-rc.9
Nuxt PWA version : ^0.4.2

How can I solve this error?

[brambekkers]

Hi! I'm sorry but, after Nuxt update (rc8 --> rc9), I've the same problem...

Nuxt version : ^3.0.0-rc.9 Nuxt PWA version : ^0.4.2

How can I solve this error?

Ill have the same issue. No Service worker and no start url.

I have workbox enabled.
nuxt": "^3.0.0-rc.9", "
@kevinmarrec/nuxt-pwa": "^0.4.2",

[kevinmarrec]

Gonna have a closer look with the help of the framework team.

[JohanDufau]

Hi!
The issue is fixed with rc9 in prod mode.

FYI, this module requires ssr on.
Also, it does not work in dev mode, I turn off workbox in dev like this in next.config:
workbox: {
enabled: process.env.NODE_ENV === 'production',
},

After building with upgraded nuxt, I advise to clear your cache.

[toniengelhardt]

Why does it require ssr on?

[JohanDufau]

To serve manifest.json ;)

[Corentin7301]

Thanks for fixing!

FYI, this module requires ssr on.
Is there any way to make it work in CSR?
It's quite annoying...

[toniengelhardt]

To serve manifest.json ;)

Is this somehow a limitation with Nuxt 3? The original @nuxtjs/pwa module serves the manifest also with ssr: false.

[kevinmarrec]

I will consider a solution to have the module working with ssr: false.

As a reminder, having Workbox running in development is not recommended and should be used only for testing some behaviors locally. Cause be aware that having it enabled will make your Nuxt application serve cached files through the Service Worker and therefore you would need to empty cache often when developing.

Also, if you have a requirement to use Workbox in development, please use Private Window feature of your favorite browser to prevent anything to be cached the next time you open the app without it enabled.

[kevinmarrec]

v0.5.0 is out !