Setup and Deploy on iOS

 

Learn how to install, configure, and deploy your first live update.

Setup Automated Live Deployments

 

Setup a channel so that when you push a branch it automatically deploys to the channel.

Upgrading to the New Deploy Plugin

Here are the steps in order to successfully upgrade to the new version of the Pro Client, Deploy Plugin, and Webview Plugin. You can follow the guide below or watch this video:

 

Deploy Upgrade Guide

You’ll need specific versions of each of the following libraries:

  • cordova-plugin-ionic-webview >= 2.0.0
  • cordoava-plugin-ionic >= 5.0.0
  • @ionic/pro >= 2.0.0

The following commands inside the root of you Ionic app should remove the old versions and install the new ones for you:

// remove the old version of the webview plugin
cordova plugin rm cordova-plugin-ionic-webview
// add the the new webview plugin
cordova plugin add [email protected]
// remove the old deploy plugin
cordova plugin rm cordova-plugin-ionic
// install the new deploy plugin
cordova plugin add [email protected] --variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME
// install the new Pro SDK
npm install @ionic/[email protected]

That’s it! You should be all configured to start taking advanatage of the new deploy features! The new plugin

Using the Legacy Plugin

For convienience we’ve also provided an intermediate version which exposes both the old and new API for those looking to incrementally upgrade. You’ll still need the latest tag of the cordova-plugin-ionic-webview plugin but you can use [email protected] and @ionic/[email protected].

You can follow the instructions above but use the legacy tag for cordova-plugin-ionic & @ionic/pro.

// remove the old version of the webview plugin
cordova plugin rm cordova-plugin-ionic-webview
// add the the new webview plugin
cordova plugin add [email protected]
// remove the old deploy plugin
cordova plugin rm cordova-plugin-ionic
// install the new deploy plugin
cordova plugin add [email protected] --variable APP_ID=YOUR_APP_ID --variable CHANNEL_NAME=YOUR_CHANNEL_NAME
// install the new Pro SDK
npm install @ionic/[email protected]

We highly recommend updating your code where neccessary and moving to the latest versions as we will be releasing new features to the latest versions the the legacy tag is only meant to help with the migration path.

Setting up a Beta Channel

In the following video tutorial, and code snippets we use the Deploy API to set up a custom Beta Channel that users can subscribe to in order to get updates early!

Choose your Integration Type:

Here’s an example template/JS for a page where we allow users to toggle to pull from a Beta Channel instead of Production and apply updates immediately when they toggle:

<!-- settings.html -->
<ion-header>
  <ion-navbar>
    <ion-title>Settings</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Settings</h3>

  <p>I'm connected to the {{ deployChannel }}.</p>

  <p>Download Progress {{ downloadProgress }} / 100</p>

  <ion-item>
    <ion-label>Opt in to Beta Features</ion-label>
    <ion-toggle [(ngModel)]="isBeta" (ionChange)="toggleBeta()"></ion-toggle>
  </ion-item>

</ion-content>

// settings.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Pro } from '@ionic/pro';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {

  public deployChannel = "";
  public isBeta = false;
  public downloadProgress = 0;

  constructor(public navCtrl: NavController) {
    this.checkChannel();
  }

  async checkChannel() {
    try {
      const res = await Pro.deploy.getConfiguration();
      this.deployChannel = res.channel;
      this.isBeta = (this.deployChannel === 'Beta')
    } catch (err) {
      // We encountered an error.
      // Here's how we would log it to Ionic Pro Monitoring while also catching:

      // Pro.monitoring.exception(err);
    }
  }

  async toggleBeta() {
    const config = {
      channel: (this.isBeta ? 'Beta' : 'Production')
    }

    try {
      await Pro.deploy.configure(config);
      await this.checkChannel();
      await this.sync({updateMethod: 'auto'}); // Alternatively, to customize how this works, use performManualUpdate()
    } catch (err) {
      // We encountered an error.
      // Here's how we would log it to Ionic Pro Monitoring while also catching:

      // Pro.monitoring.exception(err);
    }

  }

  async performManualUpdate() {

    /*
      Here we are going through each manual step of the update process:
      Check, Download, Extract, and Redirect.

      Ex: Check, Download, Extract when a user logs into your app,
        but Redirect when they logout for an app that is always running
        but used with multiple users (like at a doctors office).
    */

    try {
      const update = await Pro.deploy.checkForUpdate();

      if (update.available){
        this.downloadProgress = 0;

        await Pro.deploy.downloadUpdate((progress) => {
          this.downloadProgress = progress;
        })
        await Pro.deploy.extractUpdate();
        await Pro.deploy.reloadApp();
      }
    } catch (err) {
      // We encountered an error.
      // Here's how we would log it to Ionic Pro Monitoring while also catching:

      // Pro.monitoring.exception(err);
    }

  }

}

Here’s an example template/JS for a page where we allow users to toggle to pull from a Beta Channel instead of Production and apply updates immediately when they toggle:

<!-- settings.html -->
<ion-view view-title="Settings">
  <ion-content>
    <h3>Settings</h3>
    <p>I'm connected to the {{data.deployChannel}} channel.
    <p>Download Progress {{data.downloadProgress}} / 100</p>
    <ion-list>
      <ion-toggle ng-model="data.isBeta" ng-change="toggleBeta()">
        Opt in to Beta Features
      </ion-toggle>
    </ion-list>
  </ion-content>
</ion-view>

// controllers.js
.controller('SettingsCtrl', function($scope, $timeout, $ionicPlatform) {

  $scope.data = {
    'deployChannel': '',
    'isBeta': false,
    'downloadProgress': 0
  }

  function checkChannel(){
    Pro.deploy.getConfiguration().then(function(res){
      $timeout(function(){
        $scope.data.deployChannel = res.channel;
        $scope.data.isBeta = ($scope.data.deployChannel === 'Beta');
      })
    })
  }

  $ionicPlatform.ready(function(){
    checkChannel();
  });


  function performManualUpdate(){

    /*
      Here we are going through each manual step of the update process:
      Check, Download, Extract, and Redirect.

      Ex: Check, Download, Extract when a user logs into your app,
        but Redirect when they logout for an app that is always running
        but used with multiple users (like at a doctors office).
    */

    Pro.deploy.checkForUpdate().then(function(update){
     if (update.available){
      $scope.data.downloadProgress = 0;
      Pro.deploy.downloadUpdate(function(progress){
        $timeout(function(){
          $scope.data.downloadProgress = progress;
        })
      }).then(function(res){
        Pro.deploy.extractUpdate().then(function(res){
          Pro.deploy.reloadApp();
        }, function(err){
          // We encountered an error.
          // Here's how we would log it to Ionic Pro Monitoring while also catching:
          Pro.monitoring.exception(err);
        })
      }, function(err){
        // We encountered an error.
        // Here's how we would log it to Ionic Pro Monitoring while also catching:
        Pro.monitoring.exception(err);
      })
     }
    }, function(err){
      // We encountered an error.
      // Here's how we would log it to Ionic Pro Monitoring while also catching:
      Pro.monitoring.exception(err);
    })

  }

  $scope.toggleBeta = function(){

    var config = {
      channel: ( $scope.data.isBeta ? 'Beta' : 'Production' )
    }

    Pro.deploy.configure(config).then(function(res){
      checkChannel();
      Pro.deploy.sync({updateMethod: 'auto'}); // Alternatively, to customize how this works, use performManualUpdate()
    }, function(err){
      // We encountered an error.
      // Here's how we would log it to Ionic Pro Monitoring while also catching:
      Pro.monitoring.exception(err);
    });

  }

})

Developing With the Plugin (Debug Mode)

When you install the Ionic Cordova Plugin, you might not want Deploy to download new versions of code when running Debug binaries. To allow this, you will encounter a popup asking you if you want to download new versions of code when using a Debug binary.

If you wish to actively develop WHILE using Deploy (such as testing it when you’re setting it up, etc), you might want to disable our debug warning by passing in WARN_DEBUG="false" when installing the plugin:

cordova plugin add cordova-plugin-ionic --save --variable APP_ID="YOUR_APP_ID" --variable CHANNEL_NAME="YOUR_CHANNEL_NAME" --variable UPDATE_METHOD="background|auto|none" --variable WARN_DEBUG="false"

When you run with a Release binary, this message will go away. You can ensure you’re on a release binary by doing the following:

On iOS you can toggle the build type In Xcode via Product -> Scheme -> Edit Scheme.

On Android, you can create a release build with ionic build android --release

API

Native

General