Getting Started with Live Updates

Getting started with Live Updates in your Portals app.

info

To use the Live Updates SDK with Ionic Portals, check out the Getting Started Guide for Ionic Portals first.

Appflow

Create an app for your Portal in the Ionic Dashboard. For more information, see our documentation on using Appflow.

info

Take note of the appId of your app in Appflow, this will be used by the Live Updates sdk.

To test Live Updates, create a new build of your app in Appflow and create a deployment to Live Updates from that build. Take note of the channel name as this is also used in the Live Updates sdk.

Deployments in Appflow will be downloaded as new Live Updates.

Install

The Live Updates SDK is publicly available on Maven Central, Cocoapods, and Carthage.

iOS

Live Updates is already added to your iOS project if you have the dependency for Portals in your Podfile:

Podfile

pod 'IonicPortals', '~> 0.6.3'

And then run pod install.

Android

To add Live Updates to your Portals Android project, add the dependency to your build.gradle file

build.gradle

// ----------------------------------------------
//  Module-level build.gradle
// ----------------------------------------------
dependencies {
    implementation 'io.ionic:portals:0.6.1'
    implementation 'io.ionic:liveupdates:0.0.7'
}

And in the top level build.gradle file, be sure that you include jcenter and maven in your repositories section

build.gradle

// ----------------------------------------------
//  Top-level build.gradle
// ----------------------------------------------
allprojects {
    repositories {
        google()

        // Make sure JCenter and Maven Central are
        // in your project repositories
        jcenter()
        mavenCentral()
    }
}

React Native

Live Updates is already added to your React Native project if you have the dependency for Portals in your package.json:

npm install @ionic/portals-react-native@0.1.0

Configure

After installing the dependency you need to configure Live Updates as part of the Portal creation process. Add a LiveUpdate config where your Portal is created. Provide the appId that corresponds with the app in Appflow, and the channel name to subscribe to for updates.

iOS

AppDelegate.swift

import IonicPortals
import IonicLiveUpdates

@main
class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        PortalsRegistrationManager.shared.register("MY_API_KEY")

        // Setup Live Update
        try? LiveUpdateManager.shared.add(.checkout)

        return true
    }
}

extension LiveUpdate {
    static let checkout = LiveUpdate(
        appId: "ebd6138b",
        channel: "production"
    )
}

extension Portal {
    static let checkout = Portal(
        name: "checkout",
        liveUpdateConfig: .checkout
    )
}

Android

MyApplication.kt

import android.app.Application
import io.ionic.portals.PortalManager

class MyApplication : Application() {
    override fun onCreate(): Unit {
        super.onCreate()
        PortalManager.register("MY_API_KEY")

        // setup portals (example)
        PortalManager.newPortal("portal1")
            .setLiveUpdateConfig(applicationContext, LiveUpdate("ebd6138b", "production"))
            .create()
    }}
}

React Native

App.tsx

import { addPortal } from '@ionic/portals-react-native';

const portal = {
  name: 'checkout',
  liveUpdate: {
    appId: 'ebd6138b', 
    channel: 'production',
    syncOnAdd: true // pass false if you do not want a sync to immediately occur
  }
};

addPortal(portal);

By default, when the app loads for the first time and the portal is created, a sync will occur. A sync operation checks the Appflow servers for a new version of the app. If a new version is available, the app files are downloaded to the device and setup with the Portal. The next time the Portal is loaded, the new version will load automatically.