PWA is not installable and does not set theme color for address bar

[eecavanna]

The PWA report generated by Lighthouse (in Chrome DevTools—screenshot below) lists these shortcomings:

• Web app manifest or service worker do not meet the installability requirements

  Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more about manifest installability requirements.

  Failure reason

  No supplied icon is at least 144 px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"

• Does not set a theme color for the address bar. Failures:

  • No `<meta name="theme-color">` tag found.`

    The browser address bar can be themed to match your site. Learn more about theming the address bar.

[eecavanna]

The manifest.json file contains references to webp images at ../icons/*.webp. I don't know what that refers to. If the web app is deployed to example.com, the manifest.json file will be at example.com/manifest.json. In that case, ../ doesn't make sense to me. 🤷

[eecavanna]

The manifest.json file also uses the MIME type of image/png for images of file type webp, which I don't think is correct.

    {
      "src": "../icons/icon-48.webp",
      "type": "image/png",
      "sizes": "48x48",
      "purpose": "any maskable"
    },

Why was that done that way?