Ionic Appflow live update alternative
Tags: javascript, mobile, vue
Published: 2023-02-04 13:28:04

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](https://github.com/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.

```json
"@capgo/capacitor-updater": "3.3.20"
"@capacitor/core": "^3.0.0"
```
> [@capgo/capacitor-updater V3 doc](https://docs.capgo.app/v3/plugin-api)

### 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.

```ts
// 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.

```ts
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.

```json
{
  "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.