Ionic Appflow live update is a good feature. It allows you update your app without waiting Play Store's review. But Appflow charges 499 USD per month for this feature, that a lot money, so I'm glad that I found an alternative which cost almost nothing. Mega save, yes!
Which part of App can be live updated?
The web part. You see when we pack a web project, we run npm run build, and a dist folder will be generated which contains some html css js file. That part can be live updated.
But If you added a new camera plugin which contains a lot native codes in your capacitor app, then you need build a new bundle.
What tool did I choose?
I found this tool Cap-go/capacitor-updater can do the job. And It's actually quite easy to use.
But there is one thing you need pay attention to. Which is the 3.x.x version of @capgo/capacitor-updater only work with @capacitor/core 3.x.x. And the v3 and v4 api of @capgo/capacitor-updater are quite different.
"@capgo/capacitor-updater": "3.3.20"
"@capacitor/core": "^3.0.0"
Basic Workflow
Why I say @capgo/capacitor-updater is actually quite easy to use?
Because core feature of live update can actually be implemented with only two sentences.
// This version is not the version of app, but more like the id of downloaded package
const { version } = await CapacitorUpdater.download({
// npm run build -> dist -> compress -> dist.zip
url: 'http://localhost:3000/dist.zip',
})
// Update to the new version
await CapacitorUpdater.set({ version })
And there is one thing you have to pay attention to. Which is you must make sure that you have set this config in capacitor.config.ts. Otherwise every time you reopen the app, you will found the new version you downloaded is not applied. And the program will try to redownload the new version and update to that version again.
plugins: {
CapacitorUpdater: {
autoUpdate: false,
},
},
How to control update version
I just simply create another branch called live_update_json, and create a new file in this branch called live_update.json which looks like this.
{
"com.arno_studio.ionic_app": {
"1.0": "se345dd",
"1.1-comment": "since 1.1, image lib updated: 2.0 -> 3.0",
"1.1": "620008b"
},
}
So every our app in lunched, it will fetch this file. Then get the latest web build version according to its own bundle id and bundle version. Then download the related dist.zip.
Bundle version: Defined in android or ios folder, looks like 1.0, 1.1
Web build version: The first 7 digits of current commit id, looks like se345dd, 620008b. You can get this id with
git rev-parse --short HEAD
Fetch dist.zip from AWS S3
I choose Github Action x AWS S3, because in this way every time I push a commit to the repo in Github. A dist.zip will be built and then upload to the aws s3 by Github Action.
How to use Github Action? That's just another topic, and deserve its own article.
If you need help about ionic live update or capgo live update, feel free to contact me.
Top comments (3)
Hi,
I found that after updating from live update app freezes a little bit.
I think it is because of that www folder is being dowloaded to Application Data (android)/Documents (ios) folder and when app initializes it reads scripts and app files from these folders.
Hi, Do you have an example on github or repository of how to implement it? I'm using version 4.61.8, but it gives me an error when I put only the url parameter
Capacitor v4 is compatible with both capacitor-updater v4 and capacitor-updater v3. However, it is recommended that you use capacitor-updater v4, as it has been updated to support the latest features and bug fixes in Capacitor v4.