PWA in subdirectory tries to load /@vite-plugin-pwa/pwa-entry-point-loaded from incorrect path and therefore fails with 404

[ceisele-r]

Hi,

I am building a PWA that is served from a subdirectory /my/app.

So far, the production build is working fine and also serving the PWA from the root directory via vite and the options

devOptions: {
          enabled: true,
          type: "module",
          navigateFallback: "index.html",
        },

works.

However, if the PWA is served from the subdirectory /my/pwa, the following request fails with 404 as its url is incorrect:

https://machine-name/@vite-plugin-pwa/pwa-entry-point-loaded

If I manually put the url to the browser address and add the subdirectory so that the url is https://machine-name/my/app/@vite-plugin-pwa/pwa-entry-point-loaded, the contents are served correctly. So it is missing the /my/app/ subdirectory part.

This script is trying to be loaded by this injected code to the index.html:

  <script id="vite-plugin-pwa:register-dev-sw" type="module">
import registerDevSW from '/@vite-plugin-pwa/pwa-entry-point-loaded';
registerDevSW();
</script>

It seems this does not respect the vite base as the base in vite.config.ts is set to /my/app/ so the import should be import registerDevSW from '/my/app/@vite-plugin-pwa/pwa-entry-point-loaded';

The result is that the manifest/service worker is not loaded correctly.

I am using the following config:

VitePWA({
        strategies: "generateSW",
        registerType: "autoUpdate",
        workbox: {
          globPatterns: ["**/*.{js,css}"],
          navigateFallback: null,
        },
        manifest: {
          name: "myapp",
          short_name: "myapp",
          start_url: "./",
         ....
        },
        devOptions: {
          enabled: true,
          type: "module",
          navigateFallback: "index.html",
        },
})

I already tried setting base in the VitePWA config additionally to the vite config base but it did not help.

Is there anything else I might be missing to make this work?

[userquin]

@ceisele-r you I'll try to fix it using another name for that virtual, try to test dev without base, or if using base disable dev options for the sw.

[ceisele-r]

@userquin thank you for looking into this.

Both of your mentioned possibilities work:

• Dev without base works correctly and the SW is available
• As well as using a subdirectory base with disabled Dev options for VitePWA (of course then the SW is not available which is a workaround but not ideal).

It would be great if this virtual respects the base, though. Thank you!

[userquin]

@ceisele-r fixed on https://github.com/vite-pwa/vite-plugin-pwa/releases/tag/v0.14.7

[ceisele-r]

@userquin thank you very much!