Lighthouse check repeatedly fails with same issues: name, start_url and maskable icon

[simonhrogers]

Firstly thanks so much for making this module.

Regardless of version, I’m getting the same errors flagged in Chrome’s lighthouse checks. I’m not sure what could be going wrong as I have even tried explicitly defining a name in my config, and there is definitely an icon.png in my static folder.

Although currently using "@nuxtjs/pwa": "^3.3.5", I have had older versions in the past with the same issues. My website is hosted on Netlify and my config is as follows:

  pwa: {
    meta: false,
    manifest: {
      name: 'Becontree Forever',
      shortName: 'Becontree',
      start_url: '/',
    }
  },

I keep getting:

start_url does not respond with a 200 when offline: The start_url did respond, but not via a service worker. Failures: Manifest does not have short_name, Manifest does not have name. Is not configured for a custom splash screenFailures: Manifest does not have name. Manifest doesn't have a maskable icon

Does this point to any obvious failings on my end?

S

[simonhrogers]

https://www.becontreeforever.uk/projects/girls-like-us

The live site is here, if it helps verify. I’m running the lighthouse test in a private session to make sure no plugins are interfering.

[simonhrogers]

I am using Nuxt in static mode, and this is how the site.webmanifest file is currently generated, so yes something definitely failing:

{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

However in /dist/_nuxt, manifest.dd28a6e4.json is generated correctly:

{
  "name": "Becontree Forever",
  "short_name": "becontreeforever",
  "description": "Becontree Forever – a programme of art, architecture and infrastructure to mark the centenary of the UK’s biggest council housing estate",
  "icons": [
    {
      "src": "/_nuxt/icons/icon_64x64.e8e3b3.png",
      "sizes": "64x64",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_120x120.e8e3b3.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_144x144.e8e3b3.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_152x152.e8e3b3.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_192x192.e8e3b3.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_384x384.e8e3b3.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_512x512.e8e3b3.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "en",
  "shortName": "Becontree"
}

Which of these is used?

[gavmck]

Looks like this might be related: https://github.com/nuxt-community/pwa-module/issues/432

[lloydtao]

Start URL

You have start_url: '/', and need "start_url": "/?standalone=true" instead.

This fix worked for me, documented in https://github.com/nuxt-community/pwa-module/issues/449 and implemented in https://github.com/LloydTao/lloyd.cx/pull/15.

Maskable icon

This should be in your manifest:

    "icons": [
        ... ,
        {
            "src": "/maskable_icon_x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],

Of course, you'll need maskable_icon_x192.png in your static/ directory too.

Source: https://web.dev/maskable-icon-audit/

---

Good source on web manifest: https://web.dev/add-manifest/