PWA with Iles

[R0N1n-dev]

The documents cover this topic but when actually building the app, i found that there was no actual way to inject the manifest.
I keep getting the same result on lighthouse PWA section.

My config file looks like this:

import { defineConfig } from "iles";
import pwa from "@islands/pwa";
export default defineConfig({
  modules: [
    pwa({
      manifestFilename: "pwa-manifest.json",
      mode: "development",
      base: "/",
      includeAssets: ["favicon.svg"],
      manifest: {
        name: "Iles PWA",
        short_name: "Iles PWA",
        theme_color: "#ffffff",
        description: "PWA made with Iles",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any",
          },
          {
            src: "maskable-icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable",
          },
        ],
      },
      workbox: {
        globPatterns: ["**/*.{js,css,svg,ico,png,avif,json,xml,html}"],
      },
    }),
  ],
});

the pwa-manifest.json looks like this:

{
    "name": "Iles PWA",
    "short_name": "Iles PWA",
    "theme_color": "#ffffff",
    "description": "PWA made with Iles",
    "display": "standalone",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "pwa-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "pwa-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "pwa-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "maskable-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ]
}

So what am I doing wrong and whats the right way???

[userquin]

You need to add the web manifest in your layout, you can check how iles docs registers the web manifest here:
https://github.com/ElMassimo/iles/blob/main/docs/src/components/MetaTags.vue#L33

I'll try to add support to auto-register also the web manifest soon (also PWA Assets Integration).

[R0N1n-dev]

It worked.

[R0N1n-dev]

Thanks