Live Updates
Live Updates, also known as Over-the-Air (OTA) or hot code updates, are a way to push updates to your Android or iOS app without going through the app store review process. This is particularly useful for bug fixes or minor updates that don't require a full app release.
There are several providers that offer live update services, including:
Capawesome Cloud
This guide demonstrates how to implement live updates using Capawesome Cloud.
Installation
To enable Live Updates with Capawesome Cloud, you need to install the @capawesome/capacitor-live-update plugin:
npm install --save @capawesome/capacitor-live-update
After that, you need to sync the changes with your native projects:
npx cap sync
Configuration
Next, you need to configure the plugin to work with Capawesome Cloud.
App ID
In order for your app to identify itself to Capawesome Cloud, you need to set the appId in your capacitor.config file. For this, you need to create an app on the Capawesome Cloud Console and get the App ID.
{
"plugins": {
"LiveUpdate": {
"appId": "00000000-0000-0000-0000-000000000000"
}
}
}
Replace 00000000-0000-0000-0000-000000000000 with your actual App ID from the Capawesome Cloud Console.
After configuring the App ID, sync your Capacitor project again:
npx cap sync
Usage
The most basic usage of the Live Update plugin is to call the sync(...) method when the app starts. This method checks for updates, downloads them if available, and sets them as the next bundle to be applied. You can then call the reload() method to apply the update immediately. If the reload() method is not called, the new bundle will be used on the next app start.
import { LiveUpdate } from "@capawesome/capacitor-live-update"
const sync = async () => {
const result = await LiveUpdate.sync()
if (result.nextBundleId) {
await LiveUpdate.reload()
}
}
Publishing updates
To publish your first update, you need to create a bundle on Capawesome Cloud. For this, you need a bundle artifact. A bundle artifact is the build output of your web app. In Nuxt, this is the dist folder. You can create a bundle artifact by running the following command:
Building your app
Generate the production build of your Nuxt app:
npx nuxt generate
This creates a dist folder with the build output of your web app.
Publishing with Capawesome CLI
To install the Capawesome CLI,run the following command:
npm i -g @capawesome/cli
After installing the Capawesome CLI, you need to log in to your Capawesome Cloud account. Run the following command and follow the instructions:
npx capawesome login
Once you are logged in, you can create a bundle by running the following command:
npx capawesome apps:bundles:create --path dist
Congratulations! You have successfully published your first live update. You can now test it by running your app on a device or emulator. The app will check for updates and apply them if available. Feel free to check out the documentation of the Live Update plugin to see what else you can do with it.
OtaKit
OtaKit is an open-source (MIT) live update service. Each release is described by a signed manifest, the plugin verifies every downloaded file against it, and a new bundle that fails to start is rolled back automatically. You can use the hosted service or self-host it.
Installation
Install the @otakit/capacitor-updater plugin:
npm install @otakit/capacitor-updater
Then sync the changes with your native projects:
npx cap sync
Configuration
Create an app in the OtaKit dashboard and copy its generated app ID into your capacitor.config file:
{
"plugins": {
"OtaKit": {
"appId": "YOUR_OTAKIT_APP_ID"
}
}
}
With this configuration, the plugin downloads new bundles in the background and activates them on the next cold start of the app. See update strategies to apply updates on resume or after a prompt instead.
After configuring the app ID, sync your Capacitor project again:
npx cap sync
Usage
Call notifyAppReady() once your app has loaded, for example in app.vue. If a newly activated bundle never confirms that it started, the plugin rolls back to the last working bundle:
<script setup lang="ts">
import { OtaKit } from '@otakit/capacitor-updater'
onMounted(() => {
OtaKit.notifyAppReady()
})
</script>
Publishing updates
Generate the production build of your Nuxt app:
npx nuxt generate
Install the OtaKit CLI, sign in, and release the dist folder to the default channel:
npm install -g @otakit/cli
otakit login
otakit upload dist --release
Pass a channel name to publish elsewhere (--release staging), and --rollout 10 to release to a share of devices first. See the OtaKit documentation for channels, CI and rollouts.
Other providers
For other live update providers, consult their respective documentation for the specific upload process and tooling requirements.