This document provides an overview of using CodePush and Ionic 2 to enable hot updates across the development lifecycle for mobile apps. It covers setting up CodePush and configuring an Ionic 2 app to use CodePush. The document demonstrates how to check for updates, sync to different deployment stages, and track detailed sync and download progress. It also shows how to deploy updates to CodePush and promote them between stages like staging and production.
19. Configuring Cordova for CodePush
Add Deployment Key to config.xml
config.xml
<platform name="ios">
<preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>
Forget your app or key? no problem
code-push app ls # list your registered apps
code-push deployment ls AppName -k
19 / 65
20. Configuring Cordova for CodePush
Let Cordova talk with CodePush
config.xml
<access origin="*" />
<!-- or -->
<access origin="https://codepush.azurewebsites.net" />
<access origin="https://codepush.blob.core.windows.net" />
20 / 65
21. Configuring Cordova for CodePush
Let Cordova talk with CodePush
config.xml
<access origin="*" />
<!-- or -->
<access origin="https://codepush.azurewebsites.net" />
<access origin="https://codepush.blob.core.windows.net" />
Let CodePush work with CSP
www/index.html
<meta http-equiv="Content-Security-Policy"
content="default-src https://codepush.azurewebsites.net 'self'
data: gap: https://ssl.gstatic.com
'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
21 / 65
50. Change the Sync button colour
app/pages/page1/page1.html
<button
(click)="sync(deployment)"
[disabled]="!isUpdateAvailable"
secondary> <!-- ionic will set this to be green -->
Sync
</button>
<!-- ... -->
50 / 65
51. Build and Deploy to Staging
ionic build
code-push release-cordova
pgdays-demo ios
-d Staging
--description 'Color Change'
51 / 65
52. Build and Deploy to Staging
ionic build
code-push release-cordova
pgdays-demo ios
-d Staging
--description 'Color Change'
Run the app ...
Select Production, and Sync
Select Staging, and Sync
52 / 65