Update Ionic Capacitor apps without App/Play Store review (Code-push / hot-code updates).
You have 3 ways possible :
Join the discord to get help.
I maintain a more user friendly and complete documentation here.
npm install @capgo/capacitor-updater
npx cap sync
Create your account in capgo.app and get your API key
npx @capgo/cli@latest init API_KEY
And follow the steps by step to setup your app.See more there in the Auto update documentation.
Download update distribution zipfiles from a custom url. Manually control the entire update process.
capacitor.config.json
like below, set autoUpdate
to false.// capacitor.config.json
{
"appId": "**.***.**",
"appName": "Name",
"plugins": {
"CapacitorUpdater": {
"autoUpdate": false,
}
}
}
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).
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
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.
dist.zip
update bundlesCapacitor 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:
{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.notifyAppReady()
download(...)
next(...)
set(...)
delete(...)
list()
reset(...)
current()
reload()
setMultiDelay(...)
cancelDelay()
getLatest()
setChannel(...)
unsetChannel(...)
getChannel()
setCustomId(...)
addListener('download', ...)
addListener('noNeedUpdate', ...)
addListener('updateAvailable', ...)
addListener('downloadComplete', ...)
addListener('majorAvailable', ...)
addListener('updateFailed', ...)
addListener('downloadFailed', ...)
addListener('appReloaded', ...)
addListener('appReady', ...)
getBuiltinVersion()
getDeviceId()
getPluginVersion()
isAutoUpdateEnabled()
removeAllListeners()
notifyAppReady() => Promise<{ bundle: BundleInfo; }>
Notify Capacitor Updater that the current bundle is working (a rollback will occur of this method is not called on every app launch) By default this method should be called in the first 10 sec after app launch, otherwise a rollback will occur. Change this behaviour with {@link appReadyTimeout}
Returns: Promise<{ bundle: BundleInfo; }>
download(options: { url: string; version: string; sessionKey?: string; checksum?: string; }) => Promise<BundleInfo>
Download a new bundle from the provided URL, it should be a zip file, with files inside or with a unique id inside with all your files
Param | Type |
---|---|
options |
{ url: string; version: string; sessionKey?: string; checksum?: string; } |
Returns: Promise<BundleInfo>
next(options: { id: string; }) => Promise<BundleInfo>
Set the next bundle to be used when the app is reloaded.
Param | Type |
---|---|
options |
{ id: string; } |
Returns: Promise<BundleInfo>
set(options: { id: string; }) => Promise<void>
Set the current bundle and immediately reloads the app.
Param | Type |
---|---|
options |
{ id: string; } |
delete(options: { id: string; }) => Promise<void>
Delete bundle in storage
Param | Type |
---|---|
options |
{ id: string; } |
list() => Promise<{ bundles: BundleInfo[]; }>
Get all locally downloaded bundles in your app
Returns: Promise<{ bundles: BundleInfo[]; }>
reset(options?: { toLastSuccessful?: boolean | undefined; } | undefined) => Promise<void>
Set the builtin
bundle (the one sent to Apple store / Google play store ) as current bundle
Param | Type |
---|---|
options |
{ toLastSuccessful?: boolean; } |
current() => Promise<{ bundle: BundleInfo; native: string; }>
Get the current bundle, if none are set it returns builtin
, currentNative is the original bundle installed on the device
Returns: Promise<{ bundle: BundleInfo; native: string; }>
reload() => Promise<void>
Reload the view
setMultiDelay(options: { delayConditions: DelayCondition[]; }) => Promise<void>
Set DelayCondition, skip updates until one of the conditions is met
Param | Type | Description |
---|---|---|
options |
{ delayConditions: DelayCondition[]; } |
are the {@link DelayCondition} list to set |
Since: 4.3.0
cancelDelay() => Promise<void>
Cancel delay to updates as usual
Since: 4.0.0
getLatest() => Promise<latestVersion>
Get Latest bundle available from update Url
Returns: Promise<latestVersion>
Since: 4.0.0
setChannel(options: SetChannelOptions) => Promise<channelRes>
Set Channel for this device, the channel have to allow self assignement to make this work
Param | Type | Description |
---|---|---|
options |
SetChannelOptions |
is the {@link SetChannelOptions} channel to set |
Returns: Promise<channelRes>
Since: 4.7.0
unsetChannel(options: UnsetChannelOptions) => Promise<void>
Unset Channel for this device, the device will return to the default channel
Param | Type |
---|---|
options |
UnsetChannelOptions |
Since: 4.7.0
getChannel() => Promise<getChannelRes>
get Channel for this device
Returns: Promise<getChannelRes>
Since: 4.8.0
setCustomId(options: SetCustomIdOptions) => Promise<void>
Set Channel for this device
Param | Type | Description |
---|---|---|
options |
SetCustomIdOptions |
is the {@link SetCustomIdOptions} customId to set |
Since: 4.9.0
addListener(eventName: "download", listenerFunc: DownloadChangeListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for download event in the App, let you know when the download is started, loading and finished, with a percent value
Param | Type |
---|---|
eventName |
'download' |
listenerFunc |
DownloadChangeListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 2.0.11
addListener(eventName: "noNeedUpdate", listenerFunc: NoNeedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for no need to update event, usefull when you want force check every time the app is launched
Param | Type |
---|---|
eventName |
'noNeedUpdate' |
listenerFunc |
NoNeedListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 4.0.0
addListener(eventName: "updateAvailable", listenerFunc: UpdateAvailabledListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for availbale update event, usefull when you want to force check every time the app is launched
Param | Type |
---|---|
eventName |
'updateAvailable' |
listenerFunc |
UpdateAvailabledListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 4.0.0
addListener(eventName: "downloadComplete", listenerFunc: DownloadCompleteListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for download event in the App, let you know when the download is started, loading and finished
Param | Type |
---|---|
eventName |
'downloadComplete' |
listenerFunc |
DownloadCompleteListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 4.0.0
addListener(eventName: "majorAvailable", listenerFunc: MajorAvailableListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for Major update event in the App, let you know when major update is blocked by setting disableAutoUpdateBreaking
Param | Type |
---|---|
eventName |
'majorAvailable' |
listenerFunc |
MajorAvailableListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 2.3.0
addListener(eventName: "updateFailed", listenerFunc: UpdateFailedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for update fail event in the App, let you know when update has fail to install at next app start
Param | Type |
---|---|
eventName |
'updateFailed' |
listenerFunc |
UpdateFailedListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 2.3.0
addListener(eventName: "downloadFailed", listenerFunc: DownloadFailedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for download fail event in the App, let you know when download has fail finished
Param | Type |
---|---|
eventName |
'downloadFailed' |
listenerFunc |
DownloadFailedListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 4.0.0
addListener(eventName: "appReloaded", listenerFunc: AppReloadedListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for reload event in the App, let you know when reload has happend
Param | Type |
---|---|
eventName |
'appReloaded' |
listenerFunc |
AppReloadedListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 4.3.0
addListener(eventName: "appReady", listenerFunc: AppReadyListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for app ready event in the App, let you know when app is ready to use
Param | Type |
---|---|
eventName |
'appReady' |
listenerFunc |
AppReadyListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 5.1.0
getBuiltinVersion() => Promise<{ version: string; }>
Get the native app version or the builtin version if set in config
Returns: Promise<{ version: string; }>
Since: 5.2.0
getDeviceId() => Promise<{ deviceId: string; }>
Get unique ID used to identify device (sent to auto update server)
Returns: Promise<{ deviceId: string; }>
getPluginVersion() => Promise<{ version: string; }>
Get the native Capacitor Updater plugin version (sent to auto update server)
Returns: Promise<{ version: string; }>
isAutoUpdateEnabled() => Promise<{ enabled: boolean; }>
Get the state of auto update config. This will return false
in manual mode.
Returns: Promise<{ enabled: boolean; }>
removeAllListeners() => Promise<void>
Remove all listeners for this plugin.
Since: 1.0.0
Prop | Type |
---|---|
id |
string |
version |
string |
downloaded |
string |
checksum |
string |
status |
BundleStatus |
Prop | Type | Description |
---|---|---|
kind |
DelayUntilNext |
Set up delay conditions in setMultiDelay |
value |
string |
Prop | Type | Description | Since |
---|---|---|---|
version |
string |
Res of getLatest method | 4.0.0 |
major |
boolean |
||
message |
string |
||
sessionKey |
string |
||
error |
string |
||
old |
string |
||
url |
string |
Prop | Type | Description | Since |
---|---|---|---|
status |
string |
Current status of set channel | 4.7.0 |
error |
any |
||
message |
any |
Prop | Type |
---|---|
channel |
string |
triggerAutoUpdate |
boolean |
Prop | Type |
---|---|
triggerAutoUpdate |
boolean |
Prop | Type | Description | Since |
---|---|---|---|
channel |
string |
Current status of get channel | 4.8.0 |
error |
any |
||
message |
any |
||
status |
string |
||
allowSet |
boolean |
Prop | Type |
---|---|
customId |
string |
Prop | Type |
---|---|
remove |
() => Promise<void> |
Prop | Type | Description | Since |
---|---|---|---|
percent |
number |
Current status of download, between 0 and 100. | 4.0.0 |
bundle |
BundleInfo |
Prop | Type | Description | Since |
---|---|---|---|
bundle |
BundleInfo |
Current status of download, between 0 and 100. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
bundle |
BundleInfo |
Current status of download, between 0 and 100. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
bundle |
BundleInfo |
Emit when a new update is available. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
version |
string |
Emit when a new major bundle is available. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
bundle |
BundleInfo |
Emit when a update failed to install. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
version |
string |
Emit when a download fail. | 4.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
bundle |
BundleInfo |
Emit when a app is ready to use. | 5.2.0 |
status |
string |
"success" | "error" | "pending" | "downloading"
"background" | "kill" | "nativeVersion" | "date"
(state: DownloadEvent): void
(state: noNeedEvent): void
(state: updateAvailableEvent): void
(state: DownloadCompleteEvent): void
(state: MajorAvailableEvent): void
(state: UpdateFailedEvent): void
(state: DownloadFailedEvent): void
(state: void): void
(state: AppReadyEvent): void
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.
jamesyoung1337 Thanks a lot for your guidance and support, it was impossible to make this plugin work without you.
This tutorial will guide you through the process of using the @capgo/capacitor-updater
package to enable auto-updates in your Ionic Capacitor app.
Before we start, make sure you have the following installed:
To install the @capgo/capacitor-updater
package, open your terminal or command prompt and run the following command:
npm install @capgo/capacitor-updater
This will download and install the package in your project.
Once the package is installed, you need to sync your Capacitor project to update the configuration.
npx cap sync
To enable auto-updates in your app, you need to follow these steps:
Create an account on capgo.app and obtain your API key.
Login to the CLI using the API key:
npx @capgo/cli@latest init API_KEY
Replace API_KEY
with your actual API key.
Follow the steps provided by the CLI to complete the setup.
For detailed instructions on the auto-update setup, refer to the Auto update documentation.
If you prefer to manually control the update process, follow these steps:
Open your capacitor.config.json
file and set "autoUpdate"
to false
:
// capacitor.config.json
{
"appId": "**.***.**",
"appName": "Name",
"plugins": {
"CapacitorUpdater": {
"autoUpdate": false
}
}
}
In your main code file, import CapacitorUpdater
from @capgo/capacitor-updater
:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
Call the notifyAppReady
method to inform Capacitor Updater that the current update bundle has loaded successfully:
CapacitorUpdater.notifyAppReady()
Add the following code to download and set the new version of your app:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version)
Replace the url
with the URL of your updated distribution zip file.
Failed updates will automatically roll back to the last successful version.
For more details on using the manual setup, refer to the provided code examples and comments in the documentation.
Congratulations! You have successfully learned how to use the @capgo/capacitor-updater
package to enable auto-updates in your Ionic Capacitor app. Whether you choose the auto-update or manual setup, you now have the tools to keep your app up-to-date with ease.