Start_url issue and custom splash screen does not have name

[pyshivam]

Steps to reproduce

1. add this module to project (nuxt 3 + vuetify3 + pinia is present in project) cloudflare preset is used
2. run npm run build
3. run this command to serve npx miniflare .output/server/index.mjs --site .output/public
4. open dev tool and generate report on lighthouse

[kevinmarrec]

@pyshivam Could you run tree .output/public to ensure manifest & sw files are there ? What is the content of your built manifest.json ? And what's your PWA module options ?

[pyshivam]

The issue is solved,

1. I checked my package.json file, name property was missing, so I added the name property to it
2. In nuxt.config.ts I added this PWA config

   
   pwa: {
   workbox: {
     enabled: true,
   },
   manifest: {
     lang: "en",
     start_url: "/",
   },
   },

3. I deleted the `.nuxt` and `.output` folders
4. run `npm run build` 
5. run `npx miniflare .output/server/index.mjs --site .output/public`
6. then i goto localhost URL of project and voila its working

[kevinmarrec]

@pyshivam Cool, do you think it would had help to have a warning that tells name is missing ? I'm not sure it's worth it adding it as it's common to have it in package.json, it always has one in projects using Nuxt template or using init command of your favorite package manager.

[pyshivam]

I think it is worth adding a warning for every mandatory field which are required by browsers to be able to accept a website as PWA, and I created my project using npx nuxi init as now all we know is that the name property was missing because of that it was failing to be recognized as PWA

[MarlonWiss2212]

Hi, I have the same issue but putting a name in the package.json didn't fix it.

this is my nuxt.config.ts

pwa: {
    manifest: {
        name: "Lernplatform",
        lang: 'de',
        start_url: "/",
        short_name: "Lernplatform"
    },
    workbox: {
      enabled: true,
    }
  },

when I run tree .output/public I can see manifest and sw but on the page, it is only recognizing the manifest

[kevinmarrec]

@MarlonWiss2212 What is the full content of your config file ?

[MarlonWiss2212]

@MarlonWiss2212 What is the full content of your config file ?

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa', "@pinia/nuxt"],
  ssr: false,
  pwa: {
    manifest: {
      name: "Lernplatform",
      lang: 'de',
      start_url: "/",
      short_name: "Lernplatform"
    },
    workbox: {
      enabled: true,
    }
  },
  runtimeConfig: {
    public: {
      BASE_URL: process.env.BASE_URL,
      AUTH0_AUDIENCE: process.env.AUTH0_AUDIENCE,
      AUTH0_DOMAIN: process.env.AUTH0_DOMAIN
    }
  },
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: [
    "~/assets/css/tailwind.css"
  ],
})

[MarlonWiss2212]

when I turned ssr to true it worked and when I now switch it back it finds the sw file as well but why?

[kevinmarrec]

When service worker is registered, it will be here until you clear your website data in browser in Application tab in Chrome Dev Tools)

Is your repository public ?

[MarlonWiss2212]

Yes this is exactly happening. But my repository is private.

[kevinmarrec]

@MarlonWiss2212 I tested with ssr: false and building & starting the app has the service worker working.

Unless you're able to reproduce it in a minimal public repository, I'm afraid I can't debug more for now, so let me know.