Skip to content

Update Strategies

There are several ways to implement over-the-air (OTA) updates in your Capacitor app using Capawesome Cloud Live Updates. Each strategy serves different use cases and user experience requirements.

Background

The most basic implementation syncs and applies updates during app initialization:

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

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

Just call the initializeApp function once at app startup and it will automatically check for the latest bundle, download it in the background, and apply it on the next app launch. It's the easiest way to ensure your users receive updates without any interruptions.

Always Latest

If you want to ensure that your users always have the latest version of your app, you can implement a strategy that checks for updates more frequently.

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 example demonstrates how to implement a more aggressive update strategy by checking for updates every time the app is resumed. If a new update is available, the user is prompted to apply it immediately. If the user agrees, the app will reload with the latest version.

Force Update

If you need to ensure that users are always on the latest version when they open the app, you can implement a strategy that forces an update check and reloads the app if a new version is available before the splash screen is hidden.

For this approach, you first need to configure the splash screen to not auto-hide using the Capacitor Configuration file:

capacitor.config.ts
import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchAutoHide: false
    }
  }
};

export default config;
capacitor.config.json
{
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    }
  }
}

Then you can implement the force update strategy as follows:

import { SplashScreen } from '@capacitor/splash-screen';
import { LiveUpdate } from '@capawesome/capacitor-live-update';

const initializeApp = async () => {
  const { nextBundleId } = await LiveUpdate.sync();
  if (nextBundleId) {
    await LiveUpdate.reload();
  } else {
    await SplashScreen.hide();
  }
};

Again, this initializeApp function should be called once at app startup. It checks for updates and applies them immediately if available. If no updates are found, it hides the splash screen. This ensures that users always have the latest version of the app before they start using it.

However, keep in mind that forcing updates in this way may lead to a poor user experience since users will have to wait for the update to download and apply before they can interact with the app. This can be a real problem if the update is large or the user's internet connection is slow. It's essential to balance the need for updates with the overall user experience.