Using a service worker to update an hybrid mobile app like a PWA

Hi all,

I’m building a Ionic mobile app, which will be compiled as a native app on Android/iOS (so, not a PWA).

I was wondering if there is a way, using for example service workers, to also point to a remote source (which can be edited by the user) for the code (for example https://example.com/my-ionic-app, which will contain the “dist” folder contents) and use the service worker to fetch the updated code in order to upgrade the app without building and installing a new version?
I am not a service workers expert, the first obstacle that i can think of (maybe a blocking one) is that the local files are served with the localhost domain, and there is no way to specify another domain (much less a dynamic domain).

If this is impossible, what would be the correct approach? Using two webviews, one to show a minimal UI to insert the remote URL and then starting another webview to load a PWA from a remote URL?

Thanks in advance,
Dario

Hi, did you ever find a solution for this? I am currently using the Ionic Appflow Live updates feature for this, which works absolutely fabulous, But I find it rather expensive tbh. I was wondering the same thing and have the same question.

Hi,
no, I didn’t find a solution, I have put an example of one of the things I tried (using a remote URL in the capacitor webview, along with a PWA configuration) here GitHub - meddario/ionic-pwa-update-test: Simple app to test PWA update in a Ionic mobile app, I would be happy to know if someone can go further.
The main problem is that native plugins don’t work (see “Notes” in readme).

1 Like

long time ago I build myself a copy of the Devapp, when cordova was still the container to use

It allows you to bootstrap web apps in android, after udp discovery of web servers.

This keeps the web assets remotely, so a different way to bootstrap the container.

Out of my head, if I were to try this with capacitor, I reckon it requires a bit of rethinking. I am fairly sure, replacing the assets in the app container will require native code. I believe the Ionic cordova plugin to facilitate app flow (earlier version) did the same. That code might still be around - and was basically polling a zip file remotely and then unpacked it into the asset folder. Edit: cordova-plugin-ionic/src/android at master · ionic-team/cordova-plugin-ionic · GitHub

The alternative deployment would be the one mentioned earlier - via remote assets. Then, assuming service workers function in android/ios capacitor containers, this potentially could help updating, even though not sure if the service worker likes polling remote sites.

Some thoughts…

1 Like

The update mechanism that uses service workers works (you can see an example in the “videos” folder in the repo I linked), I don’t think that adding polling would be a big deal (as-is it only updates when the app is restarted, but I don’t see big obstacles to implement some kind of polling).
As you said, the problem is with Capacitor, specifically with the plugins, there is something off in the platform detection when serving the assets from a remote url, the platform listed by getPlatforms() is different (this can be seen commenting the server: part in capacitor.config.ts).

For the record, using plugins on a mobile device (emulator actually, but I don’t think it matters) leads to:

    Msg: Error: "Storage" plugin is not implemented on android
    Msg: Error: "Camera" plugin is not implemented on android
1 Like

Hi All, thanks for the feedback.
In the meantime I did find an interesting repo that should do the trick!

Which is in proposal as community app:

Found it in this thread:

1 Like

The “capacitor-updater” seems interesting and probably better than hacking with the service worker. I tried to take a look at the Android implementation, basically it downloads the new code as a zip file, then changes the path served by Ionic to a new folder (I wasn’t able to implement this when I asked, not a mobile developer).
Did it work for you?