Migrating from Ionic Appflow to Capawesome Cloud¶

With Ionic's recent announcement about discontinuing commercial products including Appflow by December 31, 2027, many teams are looking for alternative solutions for their live update needs. Capawesome Cloud provides the only drop-in replacement for Ionic Appflow, making migration straightforward while preserving your existing workflows.

Why Migrate from Ionic Appflow?¶

Ionic announced the discontinuation of their commercial products, including Appflow, as part of their transition after being acquired by OutSystems. While existing users have access through December 2027, it's important to plan your migration early.

Capawesome Cloud offers several compelling advantages for teams making this transition. You'll benefit from transparent, scalable pricing based on Monthly Active Users, delta updates that significantly reduce bandwidth usage, and a secure zero-trust architecture. The platform is actively maintained with regular updates and enhancements, and the entire migration process typically takes less than an hour to complete.

Prerequisites¶

Before beginning your migration, ensure you have the following in place:

An existing Capacitor app (version 6 or higher)
Node.js version 18 or higher installed on your development machine
Access to your Ionic Appflow configuration and deployment settings
Your app's build and deployment processes documented

Having these prerequisites ready will make the migration process smoother and help you avoid potential roadblocks during the transition.

Migration Overview¶

The migration from Ionic Appflow to Capawesome Cloud involves five main steps that we'll walk through in detail. First, you'll set up your Capawesome Cloud account and create your app. Next, you'll install the Capawesome Live Update SDK in your project. Then, you'll configure your app with the appropriate settings. After that, you'll replace the Ionic Appflow SDK calls with their Capawesome equivalents. Finally, you'll build and distribute your first update through Capawesome Cloud.

Each step is designed to be straightforward, and the entire process maintains compatibility with your existing app structure and deployment workflows.

Step 1: Setting Up Capawesome Cloud¶

Create Your Account¶

Visit the Capawesome Cloud Console and sign up for a new account. The registration process is quick and straightforward. Once you've created your account, you'll have access to Capawesome Cloud, where you can manage your apps, view analytics, and configure your live update settings.

The platform offers a free tier that's perfect for testing and small projects, allowing you to explore all features before committing to a paid plan. This gives you the opportunity to validate that Capawesome Cloud meets all your requirements before completing the full migration.

Create Your App¶

After logging into the Capawesome Cloud Console, click on "Create App" to create a new project within Capawesome Cloud. You'll just need to provide a name for your app. The console will generate a unique ID for your app, which you'll use to configure the Live Update SDK.

Take note of this App ID as you'll need it in the configuration step. You can also set up multiple channels for different environments (development, staging, production) at this stage, similar to how you might have configured them in Ionic Appflow.

Step 2: Installing the Capawesome Live Update SDK¶

Remove the Ionic Live Updates SDK from your project and install the Capawesome Live Update plugin:

npm uninstall @capacitor/live-updates
npm install @capawesome/capacitor-live-update
npx cap sync

The Capawesome Live Update plugin is built specifically for Capacitor and provides all the functionality you need for Over-the-Air updates. It's open-source and actively maintained, ensuring you have access to the latest features and improvements.

Step 3: Configuring Your App¶

Update your Capacitor Configuration file to include the Capawesome Live Update configuration. Replace your Ionic Appflow configuration with the following:

TypeScriptJSON

capacitor.config.ts

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

const config: CapacitorConfig = {
  plugins: {
    LiveUpdate: {
      appId: "00000000-0000-0000-0000-000000000000", // Required. Replace with your Capawesome App ID from Step 1
      defaultChannel: "production" // Optional. Replace with your desired default channel (if you have created one)
    }
  }
};

export default config;

capacitor.config.json

{
  "plugins": {
    "LiveUpdate": {
      "appId": "00000000-0000-0000-0000-000000000000", // Required. Replace with your Capawesome App ID from Step 1
      "defaultChannel": "production" // Optional. Replace with your desired default channel (if you have created one)
    }
  }
}

The configuration options are similar to what you're familiar with from Ionic Appflow, making the transition intuitive. The appId is the unique identifier you received when creating your app in the Capawesome Cloud Console. The defaultChannel determines which update channel your app will check for updates.

Here's a full comparison of the relevant configuration options between Ionic Appflow and Capawesome Cloud:

Ionic Appflow	Capawesome Cloud	Notes
`appId`	`appId`	Same purpose, different value
`autoUpdateMethod`	Not needed	Handled in code, see Step 4
`channel`	`defaultChannel`	Same purpose, different value
`enabled`	Not needed	Handled in code, see Step 4
`maxVersions`	`autoDeleteBundles`	No longer a number, but a boolean

Step 4: Replacing the Ionic Appflow SDK¶

API¶

The Capawesome Live Update plugin provides a similar API to the Ionic Appflow SDK, making code migration straightforward. Here's how to update your implementation:

Sync¶

The sync method checks for updates and downloads them if available. The Capawesome Live Update plugin provides the exact same API as the Ionic Appflow SDK, with additional optional features.

Ionic Appflow:

import { LiveUpdates } from '@capacitor/live-updates';

const sync = async () => {
  await LiveUpdates.sync();
};

Capawesome Cloud:

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

const sync = async () => {
  await LiveUpdate.sync();
};

Check out the sync(...) method documentation of the Capawesome Live Update SDK to learn what extra options are available.

Reload¶

The reload method in Capawesome Cloud works similarly to Ionic Appflow, reloading your app with the latest downloaded bundle:

Ionic Appflow:

import { LiveUpdates } from '@capacitor/live-updates';

const reload = async () => {
  await LiveUpdates.reload();
};

Capawesome Cloud:

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

const reload = async () => {
  await LiveUpdate.reload();
};

Live Update Strategies¶

Capawesome Cloud supports the same update strategies you're familiar with from Ionic Appflow, allowing you to maintain your existing user experience patterns.

Background¶

The background strategy downloads updates silently while your app is running and applies them on the next app launch. This provides a seamless experience for users who regularly use your app:

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

// Check for updates on app launch
const initializeApp = async () => {
  await LiveUpdate.sync();
  // Your app initialization code
};

initializeApp(); // Call once at app startup

This approach ensures users always have the latest version without interrupting their current session. The update will be applied automatically when they next open the app.

Always Latest¶

The always latest strategy checks for updates when the app resumes from the background and prompts users to install available updates:

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

App.addListener('resume', async () => {
  const result = await LiveUpdate.sync();
  if (result.nextBundleId) {
    const shouldReload = confirm('A new update is available. Would you like to install it now?');
    if (shouldReload) {
      await LiveUpdate.reload();
    }
  }
});

This strategy balances keeping your app updated with respecting user choice, allowing them to defer updates if they're in the middle of something important.

Force Update¶

The force update strategy ensures users have the latest version before they can use the app. This is useful for critical updates:

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

const initializeApp = async () => {
  const result = await LiveUpdate.sync();
  if (result.nextBundleId) {
    await LiveUpdate.reload(); // Apply the update
  } else {
    await SplashScreen.hide(); // Hide the splash screen
  }
};

initializeApp(); // Call once at app startup

While this ensures all users are on the latest version, use this strategy judiciously as it can impact the user experience if updates are frequent or large.

Step 5: Building and Distributing Updates¶

Build Your App¶

Build your web assets as you normally would:

npm run build

Ensure your build process generates the web assets in the correct directory (typically www or dist). The build output should be identical to what you were creating for Ionic Appflow deployments.

Install Capawesome CLI¶

Install the Capawesome CLI tool globally to enable bundle creation and deployment:

npm install -g @capawesome/cli@latest

The CLI provides commands for creating bundles, uploading them to Capawesome Cloud, and managing your deployments. It integrates seamlessly with your existing CI/CD pipelines.

Deploy a Live Update¶

Create and deploy a new bundle to Capawesome Cloud:

npx @capawesome/cli apps:bundles:create --appId YOUR_APP_ID --channel production --path www

This command packages your web assets into a bundle and uploads it to Capawesome Cloud. The bundle becomes immediately available to your users through the channel you specified. You can automate this process in your CI/CD pipeline just as you did with Ionic Appflow.

Migration Timeline¶

Planning your migration timeline is crucial for a smooth transition. Here's a recommended approach:

Start by setting up Capawesome Cloud and testing the integration in a development environment. This initial phase typically takes 1-2 days and allows you to familiarize yourself with the platform without affecting production users.

Next, implement the SDK replacement in a feature branch and thoroughly test all update strategies. Plan for 3-5 days for this phase, including time for QA testing and addressing any edge cases specific to your app.

Once testing is complete, deploy the updated app to a subset of users for beta testing. Monitor the rollout for 1-2 weeks to ensure everything works as expected. During this period, you can run both Ionic Appflow and Capawesome Cloud in parallel if needed.

Finally, complete the full migration by updating all users to the Capawesome Cloud-enabled version of your app. Continue monitoring for another week to ensure stability, then you can safely discontinue your Ionic Appflow usage.

Remember that you have until December 31, 2027, to complete the migration from Ionic Appflow, so you can take a measured approach that minimizes risk to your production environment.

Conclusion¶

Migrating from Ionic Appflow to Capawesome Cloud is a straightforward process that ensures your app's live update infrastructure remains robust and well-supported. The similar APIs and update strategies mean minimal code changes, while the enhanced features like delta updates and transparent pricing provide additional value for your team.

Capawesome Cloud is built specifically for Capacitor apps and is actively maintained with regular updates and improvements. The platform's commitment to long-term stability and continuous enhancement makes it an ideal choice for teams seeking a reliable live update solution.

If you need assistance during your migration, the Capawesome team provides excellent support and documentation. Visit the Capawesome Cloud documentation for detailed guides, or reach out to their support team for personalized assistance with your migration.

Start your migration today and ensure your app's update infrastructure is ready for the future. With Capawesome Cloud, you'll have a powerful, secure, and cost-effective solution that grows with your app and your team's needs.