Getting Started¶

In this guide, you will learn how to set up Capawesome Cloud Live Updates in your Capacitor app.

Preparation¶

First, create an account on the Capawesome Cloud Console to manage your live updates.

Installation¶

Within your Capacitor app project, install the Capacitor Live Update plugin:

npm install @capawesome/capacitor-live-update

Sync your Capacitor project to register the plugin:

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 must configure an app ID. For this, you need to create an app on the Capawesome Cloud Console:

The app ID can then be copied via the item menu. Paste the app ID into the Capacitor configuration file of your project:

capacitor.config.json

{
  "plugins": {
    "LiveUpdate": {
      "appId": "00000000-0000-0000-0000-000000000000"
    }
  }
}

After configuring the app ID, sync your Capacitor project to apply the changes:

npx cap sync

Usage¶

To check for updates and reload the app if a new bundle is available, you can use the following code snippet:

import { LiveUpdate } from "@capawesome/capacitor-live-update";

const sync = async () => {
  const result = await LiveUpdate.sync();
  if (result.nextBundleId) {
    await LiveUpdate.reload();
  }
};

The sync(...) method checks and downloads the latest bundle from Capawesome Cloud. If a new bundle is available, the reload(...) method will reload the web view to apply the changes. If the reload(...) method is not called, the new bundle will be applied on the next app start.

Publishing an update¶

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 most projects, you can create a web build with the following command:

npm run build

This should create a dist or www folder with the updated files that you want to replace in your native app. You can then upload those files using the Capawesome CLI. First, install the CLI:

npm install -g @capawesome/cli@latest

Then, create a new bundle with the following command:

npx capawesome apps:bundles:create

This will create a new bundle on Capawesome Cloud which is now available as a live update for your app. The next time your app calls the sync() method, it will download and apply the new bundle.

Congratulations! You have successfully set up Capawesome Cloud Live Updates in your Capacitor app. 🎉