capacitor-updater

Update Ionic Capacitor apps without App/Play Store review (Code-push / hot-code updates).

Usage options:

• use capgo.app, a full featured auto update system. (5 min Setup, easily manage versions, update, revert, and see detailed stats.)
• integrate your own API with this plugin's auto update system.
• use manual methods to zip, upload, download, from application code - you have full control.

Community

Join the discord to get help.

Documentation

I maintain a more user friendly and complete documentation in GitHub wiki.

Installation

npm install @capgo/capacitor-updater
npx cap sync

Auto-update setup

Create account in capgo.app and get your API key

• Download the CLI npm i -g @capgo/cli
• Add app from CLI capgo add -a API_KEY
• Upload app capgo upload -a API_KEY
• Upload app capgo set -a API_KEY -s public
• Edit your capacitor.config.json like below, set autoUpdate to true.

// capacitor.config.json
{
    "appId": "**.***.**",
    "appName": "Name",
    "plugins": {
        "CapacitorUpdater": {
            "autoUpdate": true,
        }
    }
}

• Add to your main code

  import { CapacitorUpdater } from '@capgo/capacitor-updater'
  CapacitorUpdater.notifyAppReady()

This tells Capacitor Updator that the current update bundle has loaded succesfully. Failing to call this method will cause your application to be rolled back to the previously successful version (or built-in bundle).

• Do npm run build && npx cap copy to copy the build to capacitor.
• Run the app and see app auto update after each backgrounding.
• Failed updates will automatically roll back to the last successful version.

See more details in the Auto update documentation.

Manual setup

Download update distribution zipfiles from a custom url. Manually control the entire update process.

• Add to your main code

  import { CapacitorUpdater } from '@capgo/capacitor-updater'
  CapacitorUpdater.notifyAppReady()

This informs Capacitor Updator that the current update bundle has loaded succesfully. Failing to call this method will cause your application to be rolled back to the previously successful version (or built-in bundle).

• Add this to your application.

  const version = await CapacitorUpdater.download({
    url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
  })
  await CapacitorUpdater.set(version); // sets the new version, and reloads the app

• Failed updates will automatically roll back to the last successful version.
• Example: Using App-state to control updates, with SplashScreen: You might also consider performing auto-update when application state changes, and using the Splash Screen to improve user experience.

  import { CapacitorUpdater, VersionInfo } from '@capgo/capacitor-updater'
  import { SplashScreen } from '@capacitor/splash-screen'
  import { App } from '@capacitor/app'

  let version: VersionInfo;
  App.addListener('appStateChange', async (state) => {
      if (state.isActive) {
        // Ensure download occurs while the app is active, or download may fail
        version = await CapacitorUpdater.download({
          url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
        })
      }

      if (!state.isActive && version) {
        // Activate the update when the application is sent to background
        SplashScreen.show()
        try {
          await CapacitorUpdater.set(version);
          // At this point, the new version should be active, and will need to hide the splash screen
        } catch () {
          SplashScreen.hide() // Hide the splash screen again if something went wrong
        }
      }
  })

TIP: If you prefer a secure and automated way to update your app, you can use capgo.app - a full-featured, auto update system.

Packaging dist.zip update bundles

Capacitor Updator works by unzipping a compiled app bundle to the native device filesystem. Whatever you choose to name the file you upload/download from your release/update server URL (via either manual or automatic updating), this .zip bundle must meet the following requirements:

• The zip file should contain the full contents of your production Capacitor build output folder, usually {project directory}/dist/ or {project directory}/www/. This is where index.html will be located, and it should also contain all bundled JavaScript, CSS, and web resources necessary for your app to run.
• Do not password encrypt the bundle zip file, or it will fail to unpack.
• Make sure the bundle does not contain any extra hidden files or folders, or it may fail to unpack.

API

notifyAppReady() => Promise<BundleInfo>

download(options: { url: string; version?: string; }) => Promise<BundleInfo>

next(options: { id: string; }) => Promise<BundleInfo>

set(options: { id: string; }) => Promise<void>

delete(options: { id: string; }) => Promise<void>

list() => Promise<{ bundles: BundleInfo[]; }>

reset(options?: { toLastSuccessful?: boolean | undefined; } | undefined) => Promise<void>

current() => Promise<{ bundle: BundleInfo; native: string; }>

reload() => Promise<void>

setDelay(options: { delay: boolean; }) => Promise<void>

addListener(eventName: 'download', listenerFunc: DownloadChangeListener) => Promise<PluginListenerHandle> & PluginListenerHandle

addListener(eventName: 'downloadComplete', listenerFunc: DownloadCompleteListener) => Promise<PluginListenerHandle> & PluginListenerHandle

addListener(eventName: 'majorAvailable', listenerFunc: MajorAvailableListener) => Promise<PluginListenerHandle> & PluginListenerHandle

addListener(eventName: 'updateFailed', listenerFunc: UpdateFailedListener) => Promise<PluginListenerHandle> & PluginListenerHandle

getId() => Promise<{ id: string; }>

getPluginVersion() => Promise<{ version: string; }>

isAutoUpdateEnabled() => Promise<{ enabled: boolean; }>

addListener(eventName: string, listenerFunc: (...args: any[]) => any) => Promise<PluginListenerHandle>

removeAllListeners() => Promise<void>

Listen to download events

  import { CapacitorUpdater } from '@capgo/capacitor-updater';

CapacitorUpdater.addListener('download', (info: any) => {
  console.log('download was fired', info.percent);
});

On iOS, Apple don't allow you to show a message when the app is updated, so you can't show a progress bar.

Inspiration

• cordova-plugin-ionic
• capacitor-codepush

Contributors

jamesyoung1337 Thanks a lot for your guidance and support, it was impossible to make this plugin work without you.