question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support deploying a PWA with capacitor as native app

See original GitHub issue

Is 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:open
  • Created 2 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
yusufkandemircommented, Oct 10, 2021

@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 */ } or quasar.conf.js > cordova > pwa = true | { /* workboxOptions to be overridden */ }) and then run quasar 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.

0reactions
sluedeckecommented, Jul 28, 2022

@sluedecke May I ask where is this ‘MainActivity.java::onCreate’ located?

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Building Progressive Web Apps | Capacitor Documentation
Capacitor has first-class support for Progressive Web Apps, making it easy to build an app that runs natively on iOS and Android, but...
Read more >
Deploying app as PWA - Capacitor Full App - Ionic Angular
Learn how to deploy your app as PWA on a free Firebase hosting. ... Capacitor has first-class support for Progressive Web Apps and...
Read more >
Start, Build & Deploy Your First Capacitor PWA with Ionic
With Capacitor, you can easily access native device functionalities inside your PWA or native app, and by adding a static site hosting to...
Read more >
How to use Ionic Capacitor in Progressive Web App (PWA ...
Capacitor is an open source native container (similar to Cordova) built by the Ionic team that we can use to build web/mobile apps...
Read more >
Deploying a Progressive Web App - Ionic Framework
Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found