Ionic Appflow live update alternative

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"

@capgo/capacitor-updater V3 doc

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.