manifest icons do not follow "base" path

[MikevanBreePXL]

Context:

Whenever you're working with a project that's hosted 1 level deeper than root, you'll need to use base to show that your url is actually going to <domain>.com/<base>/<path>, rather than root.

Bug:

However, when making icons from the manifest in Vite.config.js; the icon URL pathing will not prepend with this base path, leaving the browser to search them at <domain>.com/pwa-192x192.png.

Expected:

Manifest icons written in Vite.config.js/.ts should have their path prepended with --base= / base: "",

[MikevanBreePXL]

example Vite.config.ts in use:

import vue from '@vitejs/plugin-vue';
import { VitePWA } from "vite-plugin-pwa";
// import fs from 'fs';

export default defineConfig({
    plugins: [
        vue(),
        VitePWA({
            base: "/PWASuperhero/",
            registerType: 'autoUpdate',
            devOptions: {
                enabled: true
            },
            injectRegister: 'auto',
            workbox: {
                globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
                runtimeCaching: [
                    {
                        // Cache API responses
                        urlPattern: 'http://localhost:8082/api/superhero',
                        handler: 'StaleWhileRevalidate',
                        options: {
                            cacheName: 'superheroes-cache',
                        },
                    },
                ],
            },
            includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'pwa-192x192.png', 'pwa-512x512.png', 'pwa-maskable-192x192.png', 'pwa-maskable-512x512.png'],
            manifest: {
                name: 'PWASuperhero',
                short_name: 'SuperheroPWA',
                description: 'This app runs PWA baby!',
                theme_color: '#8080FF',
                icons: [
                    {
                        "src": "/PWASuperhero/pwa-192x192.png",
                        "sizes": "192x192",
                        "type": "image/png",
                        "purpose": "any"
                    },
                    {
                        "src": "/PWASuperhero/pwa-512x512.png",
                        "sizes": "512x512",
                        "type": "image/png",
                        "purpose": "any"
                    },
                    {
                        "src": "/PWASuperhero/pwa-maskable-192x192.png",
                        "sizes": "192x192",
                        "type": "image/png",
                        "purpose": "maskable"
                    },
                    {
                        "src": "/PWASuperhero/pwa-maskable-512x512.png",
                        "sizes": "512x512",
                        "type": "image/png",
                        "purpose": "maskable"
                    }
                ]
            },
        }),
    ],
    server: {
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },
        },
    },
    build: {
        chunkSizeWarningLimit: 600,
    },

});

[userquin]

Remove /<base>/ from all pwa icons, the browser will resolve them relative to the webmanifest

[userquin]

Uhmm, so the problem is the webmanifest is generated on root...

[MikevanBreePXL]

Is it possible to check --base=/base: "" when building the webmanifest? or is this perhaps outside this project's scope?

[userquin]

The sw scope needs to be there at build time, the webmanifest and the sw registration are built at runtime, we can bypass the problem in the sw registration but not for web manifest (static json file).

You can remove the scope and pwa icons prefix from pwa configuration, the pwa plugin will use vite.base for scope: pwa icons should be relative to the web manifest and so you can remove /PWASuperhero/ prefix.