dev sw file gets created at "base/base/dev-sw.js?dev-sw"

[LWolf-roxtra]

Having the following settings in vite.config.ts:

{
  base: "/my/app/",
  plugins: [
    VitePWA({
      stategies: "injectManifest",
      devOptions: {
        enabled: true,
        ...
     },
    ...
   })
 ]
}

Following the docs, i register the sw via this code:

const baseName = "/my/app/";
const serviceWorkerPath = import.meta.env.MODE === "production" ? `${baseName}sw.js` : `${baseName}dev-sw.js?dev-sw`;
const wb = new Workbox(serviceWorkerPath, {
    type: isProductionOrAppMode ? "classic" : "module",
  });
...
await wb.register();

In production stage, this registers the sw correctly, however in development, i get 404 error. After a lot of debugging and trying things out, i found out, that the sw file is being created at path "https://my-machine/my/app//my/app/dev-sw.js".

Knowing that, i found a workaround:
When setting the serviceWorkerPath constant like that, it works:
const serviceWorkerPath = import.meta.env.MODE === "production" ? `${baseName}sw.js` : `${baseName}${baseName}dev-sw.js?dev-sw`;
Conclusion: if I use the baseName constant twice, the path to the sw is correct, and the sw gets installed.

I cannot find any other config parameter, where I have set the "/my/app/" base url/path, or seem to cannot find where I can set it, so it works.

Are you able to reproduce this aswell? Have I forgotten anything? Is this a bug maybe?

[userquin]

try:

• remove trailing slash: base: '/my/app'
• include injectRegister: false in pwa options
• replace const baseName = "/my/app/"; with const baseName = import.meta.env.BASE_URL
• add / in the mapping (check if you need it)

[LWolf-roxtra]

Thanks for your reply!

Unfortunately:

• removing the trailing slash didn't help: it now tries to look for the sw at "https://my-machine/my/appdev-sw.js", although the file still sits at "https://my-machine/my/app/my/app/dev-sw.js"
• injectRegister is already set to false
• baseName actually is import.meta.env.BASE_URL

Do you have any other ideas on how to solve the problem or why it occurs?
Is there any attribute I might be able to set, in order to tell the pwa where to put the sw.js file?

[userquin]

Are you adding base in your html entry point?

[LWolf-roxtra]

Are you adding base in your html entry point?

No, i am not

[userquin]

can you provide a minimal reproduction?

[LWolf-roxtra]

@userquin
https://github.com/LWolf-roxtra/vite-plugin-pwa-issue-683/tree/main

Minimal reproduction here, just git clone the repo and follow readme.md instructions for running locally and reproducing the problem. Thank you for your help! :)

[userquin]

When resolving the dev sw url in dev plugin, vite removing the base from the id, and so the dev sw url is /dev-sw.js?dev-sw and it doesn't match dev-sw.js?dev-sw: the content will be empty and sent with text/html content type:

[userquin]

@LWolf-roxtra should be fixed, released 0.19.5