Please, provide a convenient way to build and serve just specific ES6 files

[bdteo]

Is your feature request related to a problem? Please describe.
The problem is that in PWA mode Quasar relies on GoogleChrome/workbox
See GoogleChrome/workbox#1513
The workbox-webpack-plugin does not transpile the ServiceWorker file.
With the current setup there is no straight-forward way of importing ES6 modules in ServiceWorkers

Describe the solution you'd like
There are two obvious options:

• Quasar can transpile the custom-service-worker.js before workbox-webpack-plugin takes action
• Quasar can provide a key in its config file for files that need to be transpiled and served statically (So such files can be easily imported in ServiceWorkers). For example: "filesToTranspileToStatics": { listOfPaths: [], options: {}}

Describe alternatives you've considered
The alternative I am considering is creating a separate NPM/Webpack setup just to compile my ES6 classes into something that can be served from /statics and imported in a ServiceWorker

[iperiago]

Bumping as this is a major issue in my opinion (just started a Quasar project needing PWA support and a custom service worker file and I immediately ran into this problem) : workbox-webpack-plugin v5 would transpile the ServiceWorker file as it appears, so using this version instead of v4 in Quasar might solve the problem and be easier ? (I do not know if migrating from v4 to v5 is painless or not)

[rstoenescu]

Everyone thinks their request is a major issue :) Everyone.

Leaving joke aside, we can't just upgrade workbox from v4 to v5 because there are breaking changes in workbox. We can't have a minor version of "@quasar/app" breaking functionality. However this will be available in v2 of q/app.

For v4, due to how workbox is built, we can't just pre-compile the custom service worker for the dev version (not prod). Workbox plugin takes a filepath param to the custom file and doesn't re-reads it when that file's content changes. This would result in a seemingly broken experience for "quasar dev".

However, if you're adventurous, you can manually install the webpack workbox plugin v5 in your project folder in an attempt to replace the pre-shipped v4. Not recommended but it would temporarily work.

[iperiago]

Thank you for this quick and insightful answer. I too think that manually installing v5 is adventurous and too much of a hack. In the wait for v2 (I enjoy Quasar very much, btw), I will probably try to use generateSW workbox mode as much as I can and postpone custom functionalities.

[bdteo]

Thank you @rstoenescu for the elaborate answer!
If anyone wonders, the least painful, simple and most future-proof way to work-around the problem in my specific case was creating a separate webpack setup for the classes used by the ServiceWorker (and manually including the compiled bundle).

This means that I used the InjectManifest as value for the workboxPluginMode setting.

@iperiago I think something similar may work in your case, too. The only drawback is that you will have two separate build commands (yarn custom-build for example and quasar build) to run when deploying (unless you wrap them in some bash script, of course).

[rstoenescu]

Will close the ticket for now as it serves no purpose until we ship workbox v5 with q/app.