Getting Started

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

Prerequisites

Before you begin, ensure you have:

• A Capawesome Cloud account and organization.
• A Capacitor 6 app project on your local machine.

Step 1: Create an App

In order for your app to identify itself to Capawesome Cloud, you must first create an app in Capawesome Cloud. If you have already created an app, you can skip this step and proceed to Step 2.

ConsoleCLI

To create an app using the Capawesome Cloud Console, select the organization you want to create the app in and click on the "Create App" button.

The app ID can then be copied via the item menu.

To create an app using the Capawesome CLI, use the apps:create command:

npx @capawesome/cli apps:create

You will be prompted to select the organization you want to create the app in and to provide a name for the app. The CLI will then create the app and display the app ID.

Make sure to save the app ID, as you will need it in the next step.

Step 2: Install SDK

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

npm install @capawesome/capacitor-live-update@^6.0.0

Next, configure the plugin by pasting the app ID from Step 1 in the Capacitor configuration file of your project:

TypeScriptJSON

capacitor.config.ts

import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  plugins: {
    LiveUpdate: {
      appId: "00000000-0000-0000-0000-000000000000",
    },
  },
};

export default config;

capacitor.config.json

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

Now sync your Capacitor project using the Capacitor CLI to register the plugin and apply the configuration:

npx cap sync

Since Capacitor 6 does not support automatic update strategies, you need to manually implement the update logic using the sync(...) method. Here's an example using the "Always Latest" update strategy:

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

App.addListener("resume", async () => {
  const { nextBundleId } = await LiveUpdate.sync();
  if (nextBundleId) {
    // Ask the user if they want to apply the update immediately
    const shouldReload = confirm("A new update is available. Would you like to install it?");
    if (shouldReload) {
      await LiveUpdate.reload();
    }
  }
});

This code checks for updates every time the app resumes from the background. If an update is available, it prompts the user to install it immediately.

Step 3: Publish First Update

To publish your first update, you need to create a bundle on Capawesome Cloud using the Capawesome CLI.

First, install the CLI:

npm install -D @capawesome/cli@latest

Then, create a new bundle with the following command:

npx @capawesome/cli apps:bundles:create

This command handles the web build process and creates a new bundle on Capawesome Cloud which is now available as a live update for your app. The next time your app starts or resumes, it will automatically download and apply the new bundle.

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

Next Steps

Now that you have Live Updates set up, explore the following guides to make the most out of it.

• Best Practices

  ---

  Learn about best practices for using Capawesome Cloud Live Updates in your Capacitor app.

  Learn More

• Advanced Usage

  ---

  Learn about advanced features and how to customize the Live Update plugin to your needs.

  Learn More