Skip to content

Commit 957b3c6

Browse files
authored
docs: add Live Updates guide (#757)
1 parent 95b2da6 commit 957b3c6

File tree

2 files changed

+117
-1
lines changed

2 files changed

+117
-1
lines changed

docs/content/1.get-started/4.enabling-capacitor.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Android Studio and SDK (for Android projects) or XCode (for iOS projects) are re
5858

5959
To build, sync, and run your app:
6060

61-
1. Create a web build with `npx nuxi generate` or `npx nuxi build`.
61+
1. Create a web build with `npx nuxt generate` or `npx nuxt build`.
6262
2. Run `npx cap sync` to update your Capacitor project directories with your latest app build.
6363
3. Run `npx cap run android` or `npx cap run ios` to run the app from the command line using an installed device **OR**
6464
4. _(Optional)_ Run `npx cap open android` or `npx cap open ios` to open the project in Android Studio or XCode, respectively.
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Live Updates
3+
---
4+
5+
# Live Updates
6+
7+
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.
8+
9+
There are several providers that offer live update services, including:
10+
- [Capawesome Cloud](https://cloud.capawesome.io/)
11+
- [CodePush (standalone)](https://github.com/microsoft/code-push-server)
12+
13+
## Capawesome Cloud
14+
15+
This guide demonstrates how to implement live updates using Capawesome Cloud.
16+
17+
### Installation
18+
19+
To enable Live Updates with Capawesome Cloud, you need to install the `@capawesome/capacitor-live-update` plugin:
20+
21+
```bash
22+
npm install --save @capawesome/capacitor-live-update
23+
```
24+
25+
After that, you need to sync the changes with your native projects:
26+
27+
```bash
28+
npx cap sync
29+
```
30+
31+
### Configuration
32+
33+
Next, you need to configure the plugin to work with [Capawesome Cloud](https://cloud.capawesome.io/).
34+
35+
#### App ID
36+
37+
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.
38+
39+
```json
40+
{
41+
"plugins": {
42+
"LiveUpdate": {
43+
"appId": "00000000-0000-0000-0000-000000000000"
44+
}
45+
}
46+
}
47+
```
48+
49+
Replace `00000000-0000-0000-0000-000000000000` with your actual App ID from the Capawesome Cloud Console.
50+
51+
After configuring the App ID, sync your Capacitor project again:
52+
53+
```bash
54+
npx cap sync
55+
```
56+
57+
### Usage
58+
59+
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.
60+
61+
```js
62+
import { LiveUpdate } from "@capawesome/capacitor-live-update"
63+
64+
const sync = async () => {
65+
const result = await LiveUpdate.sync()
66+
if (result.nextBundleId) {
67+
await LiveUpdate.reload()
68+
}
69+
}
70+
```
71+
72+
### Publishing updates
73+
74+
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:
75+
76+
#### Building your app
77+
78+
Generate the production build of your Nuxt app:
79+
80+
```bash
81+
npx nuxt generate
82+
```
83+
84+
This creates a `dist` folder with the build output of your web app.
85+
86+
#### Publishing with Capawesome CLI
87+
88+
To install the Capawesome CLI,run the following command:
89+
90+
```bash
91+
npm i -g @capawesome/cli
92+
```
93+
94+
After installing the Capawesome CLI, you need to log in to your Capawesome Cloud account. Run the following command and follow the instructions:
95+
96+
```bash
97+
npx capawesome login
98+
```
99+
100+
Once you are logged in, you can create a bundle by running the following command:
101+
102+
```bash
103+
npx capawesome apps:bundles:create --path dist
104+
```
105+
106+
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.
107+
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.
108+
109+
## Other providers
110+
111+
For other live update providers, consult their respective documentation for the specific upload process and tooling requirements.
112+
113+
::alert{type="info"}
114+
We'd welcome PRs to add examples for other providers.
115+
::
116+

0 commit comments

Comments
 (0)