Appflow's Live Update feature let you update the UI and business logic of your app remotely, in real-time. Push HTML, JS, and CSS updates directly to your users without going through the app store to instantly fix bugs and ship new features.
In this step, we'll install the Appflow SDK then build and deploy a web build to a mobile device.
Check out this branch from this tutorial's companion app to compare with your starter project.
First, you'll need to install the Appflow SDK into your app.
To install the Appflow SDK plugin from the Dashboard:
- Select destinations from the deployments in the side menu
- Follow the instructions provided by clicking
Install Instructionsfor the production channel on the Destinations list in the Appflow Dashboard.
The background method is selected by default. How it works: the app will check for updates in the background. If an update is available, it will be downloaded and installed while the user is using the older version. The next time they launch the app, the new version will be loaded.
To learn more about the available update methods, refer to the docs here.
You can also run
ionic deploy add and the CLI will prompt you for the necessary values.
Once you copy and paste the command in the root of your project the plugin is installed and you should see the following success message:
[OK] cordova-plugin-ionic variables correctly added to the iOS project [OK] cordova-plugin-ionic variables correctly added to the Android project [OK] Appflow Deploy plugin added to the project!
For more information about the SDK installation and the different variable involved refer to the docs.
Once the SDK is installed, make sure to push all changes to your Git host.
The Live Update feature works by using the installed Appflow SDK in your native application to listen to a particular Deploy Channel Destination ("master" and "production" by default).
Therefore, you need to build for native after you have installed the sdk. You can refer to our previous chapter on how to quickly build an Android debug build.
When the build is successful, install the native artifact onto a simulator or a device of your choice.
Let's deploy a web build as a Live Update. To differentiate the live update from the previous version of the app currently running on your device, make a trivial change.
For example, open
src/app/home/home.page.html in your editor:
<div id="container"> <strong>THIS IS A LIVE UPDATE DEPLOYED USING IONIC APPFLOW!!!</strong> <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p> </div> </ion-content>
Next, push your changes to your Git host, then
Once the web build is successful, assign it to the channel in Destinations that you chose earlier: production.
You can do that by selecting the deploy live updates option from the build log once it is successful.
Select the production channel from the dropdown and click deploy.
You can also see a list of all the deployments done so far from the destinations tab and selecting your channel.
Next, on the device or simulator upon which you installed the APK, you can see the Live Update applied to the app by either placing the app into the background or closing then re-opening it.
Note: It might take a few seconds to fetch the live update.
Voila! 🎉 You have successfully deployed your first Live Update.