Manifest and SW not working properly

[BenjaminOddou]

Hello @kevinmarrec, I have a new issue with the PWA module (I promise it's not against you 😅). It's quite similar to this issue. When starting a fresh nuxt project and building the app, I don't have the manifest.[hash].json created under the .output/publicdirectory.

---

I created this public repository with reproduction

---

My config :

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.16.0`
- Nuxt Version:     `3.0.0-rc.6`
- Package Manager:  `npm@8.11.0`
- Builder:          `vite`
- User Config:      `modules`, `pwa`
- Runtime Modules:  `@kevinmarrec/nuxt-pwa@0.4.2`
- Build Modules:    `-`
------------------------------

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: [
        '@kevinmarrec/nuxt-pwa'
    ],
    pwa: {
        workbox: {
          enabled: true
        },
        icon: {
          source: './assets/pwa-512x512.png'
        },
        meta: {
          /* meta options */
        },
        manifest: {
          name: 'A name',
          short_name: 'Short Name',
          description: 'A random description',
          theme_color: '#ffffff',
          background_color: '#ffffff',
          display: 'standalone',
          lang: 'fr'
        }
      },
})

screen of the output directory:

Error with Lighthouse test:

Checking source in chrome :

Service worker in the head of my HTML:

Thank you in advance for your help ! 🙏

[kevinmarrec]

Hey ! Since v0.4.0, manifest.json is handled by a server route, that's why it is not generated anymore. You should still have it working when going on http://localhost:3000/manifest.json.

This was required to have nuxi generate properly working with the module.

[BenjaminOddou]

Hello @kevinmarrec and thank you for your response ! 🎉 Indeed, I can find the manifest under the /manifest.json link !

However, I still don't know how to enable my PWA. When checking the manifest.json I can see the following :

{
  "name": "A name",
  "short_name": "Short name",
  "description": "A random description",
  "lang": "fr",
  "start_url": "/?standalone=true",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/_nuxt/icons/64x64.png",
      "type": "image/png",
      "sizes": "64x64",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/64x64.maskable.png",
      "type": "image/png",
      "sizes": "64x64",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/120x120.png",
      "type": "image/png",
      "sizes": "120x120",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/120x120.maskable.png",
      "type": "image/png",
      "sizes": "120x120",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/144x144.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/144x144.maskable.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/152x152.png",
      "type": "image/png",
      "sizes": "152x152",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/152x152.maskable.png",
      "type": "image/png",
      "sizes": "152x152",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/192x192.maskable.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/384x384.png",
      "type": "image/png",
      "sizes": "384x384",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/384x384.maskable.png",
      "type": "image/png",
      "sizes": "384x384",
      "purpose": "maskable"
    },
    {
      "src": "/_nuxt/icons/512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    },
    {
      "src": "/_nuxt/icons/512x512.maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

and according to LightHouse test, my start_url isn't correct. I tried to set it up to / but it ended the same way. 🧐

[kevinmarrec]

@BenjaminOddou This is weird, can I have your full nuxt.config.ts and the full Lighthouse output ?

I can't reproduce it on the example of this repository (pnpm install, pnpm example:build & pnpm example:start), it is installable and Lighthouse is not complaining.

[BenjaminOddou]

Hello @kevinmarrec and thank you for your response. I created a public repo that reproduces the problem. In the repo, you'll find the Lighthouse test results in JSON and HTML format under the lighthouse folder.

Here is my nuxt.config.ts file

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: [
        '@kevinmarrec/nuxt-pwa'
    ],
    pwa: {
        workbox: {
          enabled: true
        },
        icon: {
          source: './assets/pwa-512x512.png'
        },
        meta: {
          /* meta options */
        },
        manifest: {
          name: 'A name',
          short_name: 'Short Name',
          description: 'A random description',
          theme_color: '#ffffff',
          background_color: '#ffffff',
          display: 'standalone',
          lang: 'fr'
        }
      },
})

Thank you in advance for your help ! 🙏

[kevinmarrec]

@BenjaminOddou This sounds to work as expected with your repo on my computer :

This worked for me in both dev & (build + preview)

Did you have a try cleaning properly your browser cache (dunno if it can help) ?

[BenjaminOddou]

It is quite weird that it's not working on my machine (MacOS) ... I cleared the cache multiple times with different methods, I tried to restart my computer, I created different repo just to make sure ... but nothing changed. Idk what's dunno ? But glad that it is working on your side. I know now that the problem is local 🙂

[kevinmarrec]

@BenjaminOddou Maybe you can have a try in different browsers ?

[manniL]

Could it be that it does not work when not using SSR or SSG?

[BenjaminOddou]

Hello @kevinmarrec, after some time testing the PWA is working fine (I think it was a problem of http or something). Once deployed on netlify I didn't encounter bugs. However now with the new version of Nuxt 3.0.0-rc.7 it seems that the PWA manifest link <root>/manifest.json is used by the Nuxt Manifest 🧐

[kevinmarrec]

Closing this issue as it does not seem reproducible.

@BenjaminOddou For your last comment, let's follow #32 which should be fixed using last edge version of Nuxt or wait for next release candidate (RC.9)