From e10891345d3e9afe0e04a644e663d3a530e62d02 Mon Sep 17 00:00:00 2001 From: Robin Genz Date: Mon, 19 May 2025 12:32:01 +0200 Subject: [PATCH 1/3] docs(cookbook): add Live Updates guide --- docs/content/3.cookbook/7.live-updates.md | 92 +++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 docs/content/3.cookbook/7.live-updates.md diff --git a/docs/content/3.cookbook/7.live-updates.md b/docs/content/3.cookbook/7.live-updates.md new file mode 100644 index 00000000..bff86d85 --- /dev/null +++ b/docs/content/3.cookbook/7.live-updates.md @@ -0,0 +1,92 @@ +--- +title: Live Updates +--- + +# 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. + +## Installation + +To enable Live Updates in your Capacitor app, you need to install the `@capawesome/capacitor-live-update` plugin: + +```bash +npm install --save @capawesome/capacitor-live-update +``` + +After that, you need to sync the changes with your native projects: + +```bash +npx cap sync +``` + +## Configuration + +Next, you need to configure the plugin to work with [Capawesome Cloud](https://cloud.capawesome.io/). + +### 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](https://console.cloud.capawesome.io/) and get the App ID. + +```json +{ + "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: + +```bash +npx cap sync +``` + +## Usage + +The most basic usage of the Live Update plugin is to call the [`sync(...)`](https://capawesome.io/plugins/live-update/#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()`](https://capawesome.io/plugins/live-update/#reload) method to apply the update immediately. If the [`reload()`](https://capawesome.io/plugins/live-update/#reload) method is not called, the new bundle will be used on the next app start. + +```js +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](https://capawesome.io/cloud/live-updates/bundles/#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: + +```bash +npx nuxi generate +``` + +This will create a `dist` folder with the build output of your web app. You can then upload this folder to Capawesome Cloud using the [Capawesome CLI](https://capawesome.io/cloud/cli/). +To install the Capawesome CLI, run the following command: + +```tabs +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: + +```bash +npx capawesome login +``` + +Once you are logged in, you can create a bundle by running the following command: + +```bash +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](https://capawesome.io/plugins/live-update/) of the Live Update plugin to see what else you can do with it. From 83f9e99f14e84f738a715a7016407d5f28db7288 Mon Sep 17 00:00:00 2001 From: Robin Genz Date: Tue, 3 Jun 2025 15:59:23 +0200 Subject: [PATCH 2/3] Mention other providers --- docs/content/3.cookbook/7.live-updates.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.cookbook/7.live-updates.md b/docs/content/3.cookbook/7.live-updates.md index bff86d85..350bf80c 100644 --- a/docs/content/3.cookbook/7.live-updates.md +++ b/docs/content/3.cookbook/7.live-updates.md @@ -4,7 +4,7 @@ title: Live Updates # 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. +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. Alongside Ionic Appflow, which will be [discontinued](https://ionic.io/blog/important-announcement-the-future-of-ionics-commercial-products) in 2027, [Capawesome Cloud](https://cloud.capawesome.io/) is one of the most popular and actively maintained providers for live updates in Capacitor apps. For this reason, we will focus on Capawesome Cloud in this guide. However, the same principles apply to other providers as well. ## Installation From cfc3e762986079c7774ef536acb3a517a4cba2cd Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 30 Jul 2025 12:47:59 +0100 Subject: [PATCH 3/3] docs: make more neutral --- .../1.get-started/4.enabling-capacitor.md | 2 +- docs/content/3.cookbook/7.live-updates.md | 46 ++++++++++++++----- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/docs/content/1.get-started/4.enabling-capacitor.md b/docs/content/1.get-started/4.enabling-capacitor.md index 81ccd8de..bb215e2b 100644 --- a/docs/content/1.get-started/4.enabling-capacitor.md +++ b/docs/content/1.get-started/4.enabling-capacitor.md @@ -58,7 +58,7 @@ Android Studio and SDK (for Android projects) or XCode (for iOS projects) are re To build, sync, and run your app: -1. Create a web build with `npx nuxi generate` or `npx nuxi build`. +1. Create a web build with `npx nuxt generate` or `npx nuxt build`. 2. Run `npx cap sync` to update your Capacitor project directories with your latest app build. 3. Run `npx cap run android` or `npx cap run ios` to run the app from the command line using an installed device **OR** 4. _(Optional)_ Run `npx cap open android` or `npx cap open ios` to open the project in Android Studio or XCode, respectively. diff --git a/docs/content/3.cookbook/7.live-updates.md b/docs/content/3.cookbook/7.live-updates.md index 350bf80c..c79bf46e 100644 --- a/docs/content/3.cookbook/7.live-updates.md +++ b/docs/content/3.cookbook/7.live-updates.md @@ -4,11 +4,19 @@ title: Live Updates # 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. Alongside Ionic Appflow, which will be [discontinued](https://ionic.io/blog/important-announcement-the-future-of-ionics-commercial-products) in 2027, [Capawesome Cloud](https://cloud.capawesome.io/) is one of the most popular and actively maintained providers for live updates in Capacitor apps. For this reason, we will focus on Capawesome Cloud in this guide. However, the same principles apply to other providers as well. +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. -## Installation +There are several providers that offer live update services, including: +- [Capawesome Cloud](https://cloud.capawesome.io/) +- [CodePush (standalone)](https://github.com/microsoft/code-push-server) -To enable Live Updates in your Capacitor app, you need to install the `@capawesome/capacitor-live-update` plugin: +## 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: ```bash npm install --save @capawesome/capacitor-live-update @@ -20,11 +28,11 @@ After that, you need to sync the changes with your native projects: npx cap sync ``` -## Configuration +### Configuration Next, you need to configure the plugin to work with [Capawesome Cloud](https://cloud.capawesome.io/). -### App ID +#### 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](https://console.cloud.capawesome.io/) and get the App ID. @@ -46,7 +54,7 @@ After configuring the App ID, sync your Capacitor project again: npx cap sync ``` -## Usage +### Usage The most basic usage of the Live Update plugin is to call the [`sync(...)`](https://capawesome.io/plugins/live-update/#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()`](https://capawesome.io/plugins/live-update/#reload) method to apply the update immediately. If the [`reload()`](https://capawesome.io/plugins/live-update/#reload) method is not called, the new bundle will be used on the next app start. @@ -61,18 +69,25 @@ const sync = async () => { } ``` -## Publishing updates +### Publishing updates To publish your first update, you need to [create a bundle](https://capawesome.io/cloud/live-updates/bundles/#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: + ```bash -npx nuxi generate +npx nuxt generate ``` -This will create a `dist` folder with the build output of your web app. You can then upload this folder to Capawesome Cloud using the [Capawesome CLI](https://capawesome.io/cloud/cli/). -To install the Capawesome CLI, run the following command: +This creates a `dist` folder with the build output of your web app. + +#### Publishing with Capawesome CLI -```tabs +To install the Capawesome CLI,run the following command: + +```bash npm i -g @capawesome/cli ``` @@ -90,3 +105,12 @@ 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](https://capawesome.io/plugins/live-update/) of the Live Update plugin to see what else you can do with it. + +## Other providers + +For other live update providers, consult their respective documentation for the specific upload process and tooling requirements. + +::alert{type="info"} +We'd welcome PRs to add examples for other providers. +:: +