DEV Community

Arno Solo
Arno Solo

Posted on • Updated on

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"
Enter fullscreen mode Exit fullscreen mode

@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{
  // npm run build -> dist -> compress ->
  url: 'http://localhost:3000/',

// Update to the new version
await CapacitorUpdater.set({ version })
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

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 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 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, feel free to contact me.

Top comments (0)

Create an Account!
Now it's your turn!
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.