// settings.tsimport{Component}from'@angular/core';import{NavController}from'ionic-angular';import{Pro}from'@ionic/pro';@Component({selector:'page-settings',templateUrl:'settings.html'})exportclassSettingsPage{publicdeployChannel="";publicisBeta=false;publicdownloadProgress=0;constructor(publicnavCtrl:NavController){this.checkChannel();}asynccheckChannel(){try{constres=awaitPro.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);}}asynctoggleBeta(){constconfig={channel:(this.isBeta?'Beta':'Production')}try{awaitPro.deploy.configure(config);awaitthis.checkChannel();awaitthis.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);}}asyncperformManualUpdate(){/*
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{constupdate=awaitPro.deploy.checkForUpdate();if(update.available){this.downloadProgress=0;awaitPro.deploy.downloadUpdate((progress)=>{this.downloadProgress=progress;})awaitPro.deploy.extractUpdate();awaitPro.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:

// controllers.js.controller('SettingsCtrl',function($scope,$timeout,$ionicPlatform){$scope.data={'deployChannel':'','isBeta':false,'downloadProgress':0}functioncheckChannel(){Pro.deploy.getConfiguration().then(function(res){$timeout(function(){$scope.data.deployChannel=res.channel;$scope.data.isBeta=($scope.data.deployChannel==='Beta');})})}$ionicPlatform.ready(function(){checkChannel();});functionperformManualUpdate(){/*
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(){varconfig={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);});}})