How to separate output path for `sw.js` and `workbox-********.js`

[mmn6d6d6e]

I'm using laravel 9
The index.html is seved at /public while the transpiled js files are at /public/build
By Laravel 9 Vite default setting the outDir is at public/build and will always be cleaned when vite build is executed

If i left outDir by default:

• the workbox-********.js is generated on /public/build, good. It'll automatically cleaned on each build
• the sw.js is also generated on /public/build, not good. This is causing error The path of the provided scope ('/public') is not under the max scope allowed ('/public/build/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope. and I'd rather not change web service settings to set Service-Worker-Allowed HTTP header

If i change the outDir to public:

• the sw.js is generated on /public, good. No max scope error.
• the workbox-********.js is also generated on /public, not good. the old one need to be manually cleaned if newer one have different hash, or need additional plugin to clean it each build

The ideal scenario I had in my mind:

• generate workbox-********.js to /public/build so it will be cleaned on each vite build with Laravel 9 default setting
• generate sw.js to /public and it load /public/build/workbox-********.js

Is it possible? or is there alternative way with both no max scope allowed error neither piling up workbox-********.js files?

[vheins]

yeah any idea for this?

[userquin]

@mmn6d6d6e @vheins

The problem with PWA is about the scope and the location of the service worker and web manifest assets. Since vite-laravel-plugin is hacking Vite to write all assets in public/build folder we cannot hack Vite.

You have 2 solutions:

1. add custom http header
   • update to latest pwa plugin version: 0.14.4
   • add buildBase: '/build/' to pwa configuration
   • add service-worker-allowed: '/' http header to all your router pages; requires some configuration on your backend (nginx, apache, netlify...)
2. create a Vite plugin:
   • copy (overriding) sw.js, workbox-*.js and manifest.webmanifest to public folder: for sw.js and workbox-*.js you can try changing the outDir to use public folder, web manifest is emitted in Vite generateBundle hook, and so Vite will generate it on public/build folder
   • you will need to add a manifestTranform to pwa workbox option to prefix any entry with build/ or using modifyURLPrefix: { '': 'build/' } (also inside pwa workbox option).

[userquin]

Next v2 version will allow do that and even more, including classic and ESM service workers support (dual support for modern and legacy browsers):