API 浏览器
Quasar CLI with Webpack - @quasar/app-webpack
实时更新

实时更新,也称为无线下载 (OTA) 或热代码更新,是一种无需经过应用商店审核即可将更新推送到应用的方式。这对于不需要完整发布应用的错误修复或小更新特别有用。

¥Live Updates, also known as Over-the-Air (OTA) or hot code updates, are a way to push updates to your 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)

¥Installation

要在 Quasar Capacitor 应用中启用实时更新,你需要安装 @capawesome/capacitor-live-update 插件。首先,导航到你的 Capacitor 项目目录:

¥To enable Live Updates in your Quasar Capacitor app, you need to install the @capawesome/capacitor-live-update plugin. First, navigate to your Capacitor project directory:

cd src-capacitor

然后,安装插件:

¥Then, install the plugin:


$ yarn add @capawesome/capacitor-live-update

之后,你需要将更改与你的原生项目同步:

¥After that, you need to sync the changes with your native projects:

npx cap sync

配置(Configuration)

¥Configuration

接下来,你需要配置插件以与 Capawesome Cloud 配合使用。

¥Next, you need to configure the plugin to work with Capawesome Cloud.

应用 ID(App ID)

¥App ID

为了让你的应用能够向 Capawesome Cloud 识别自己,你需要在 capacitor.config 文件中设置 appId。为此,你需要在 Capawesome Cloud 控制台 上创建一个应用并获取应用 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.

/src-capacitor/capacitor.config file

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

00000000-0000-0000-0000-000000000000 替换为你在 Capawesome Cloud 控制台中实际的应用 ID。

¥Replace 00000000-0000-0000-0000-000000000000 with your actual App ID from the Capawesome Cloud Console.

配置 App ID 后,再次同步 Capacitor 项目:

¥After configuring the App ID, sync your Capacitor project again:

npx cap sync

用法(Usage)

¥Usage

Live Update 插件最基本的用法是在应用启动时调用 sync(...) 方法。此方法检查更新,如果有更新则下载,并将其设置为下一个要应用的包。然后,你可以调用 reload() 方法立即应用更新。如果未调用 reload() 方法,则下次应用启动时将使用新的 bundle。

¥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)

¥Publishing updates

要发布你的第一个更新,你需要在 Capawesome Cloud 上登录 创建一个 bundle。为此,你需要一个 bundle artifact(软件包工件)。bundle artifact 是 Web 应用的构建输出。在 Quasar 中,这是 src-capacitor/www 文件夹。你可以通过运行以下命令创建一个 bundle artifact:

¥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 Quasar, this is the src-capacitor/www folder. You can create a bundle artifact by running the following command:

quasar build -m capacitor -T [android|ios]

这将创建一个 src-capacitor/www 文件夹,其中包含 Web 应用的构建输出。然后,你可以使用 Capawesome CLI 将此文件夹上传到 Capawesome Cloud。要安装 Capawesome CLI,请运行以下命令:

¥This will create a src-capacitor/www folder with the build output of your web app. You can then upload this folder to Capawesome Cloud using the Capawesome CLI. To install the Capawesome CLI, run the following command:


$ yarn global add @capawesome/cli

安装 Capawesome CLI 后,你需要登录你的 Capawesome Cloud 账户。运行以下命令并按照说明操作:

¥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

登录后,你可以通过运行以下命令创建一个 bundle:

¥Once you are logged in, you can create a bundle by running the following command:

npx capawesome apps:bundles:create --path src-capacitor/www

恭喜!你已成功发布了你的第一个实时更新。现在,你可以通过在设备或模拟器上运行应用来测试它。应用将检查更新并在可用时应用它们。欢迎查看 Live Update 插件的 documentation 功能,了解它还能做什么。

¥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.