Support deploying a PWA with capacitor as native app
See original GitHub issueIs your feature request related to a problem? Please describe.
My web app uses a service worker to capture fetch requests from the browser and add an authentication header. E.g. for all <img src=.../>
tags and similar. This works well for a web app deployed as pwa.
Another use case is to do some extensive prefetching within the service worker in order to go offline with the app.
This does not work at all as a capacitor app since:
quasar build -m capacitor -T ...
builds an spa and not the pwa equivalent- the android and ios wrapper apps do not enable Service Workers
Describe the solution you’d like
I would love to have an option to deploy my PWA as a capacitor project by adding a new mode to quasar dev/build
or some modifier to the capacitor mode.
Describe alternatives you’ve considered
Alternative is to add the authentication header as a query parameter to the <img src=.../>
and adapt my server to look for authentication in both the request headers and query parameters. This is implemented and works.
For prefetching one could move the logic from the service worker back into the app itself. I did not test that yet.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (1 by maintainers)
Top GitHub Comments
@sluedecke I was also thinking about this for a while. The solution in my mind is to add some configuration to
quasar.conf.js
, similar to how SSR+PWA works. The default value will be false, when you set that option to true, or the workbox options object(e.g.quasar.conf.js > capacitor > pwa = true | { /* workboxOptions to be overridden */ }
orquasar.conf.js > cordova > pwa = true | { /* workboxOptions to be overridden */ }
) and then runquasar dev|build -m cordova|capacitor -T android|ios
and it would also generate and include the service worker. I made some experimentation about the solution, but haven’t finished or tested it yet. Please let me know what you think about the solution.On my installation it can be found here (app package name is net.currit.guide, yours will differ):
src-capacitor/android/app/src/main/java/net/currit/guide/MainActivity.java