Update your JavaScript AIR application with ease.
Web application = instant update
One of the most powerful features of a web application is instant update. Your client doesn’t need to do anything when you fix some bugs in your web application. The next time he accesses the site the user will have the latest version of your application.
Update a desktop application
Creating an AIR application means creating a desktop one. It comes with all the benefits of this type of application but also with some of the drawbacks. And one of them is the challenge of updating the application to the most recent version.
Of course this is not a new subject and a lot of applications have their own method of doing updates and upgrades. Adobe AIR has now the Update Framework, a Flex library that helps you update any AIR application non intrusively, similar to any web application.
Adobe AIR Update Framework
Now, I talked at the beginning about updating a JavaScript AIR application and just above I mentioned that the update framework is a Flex component. That is true and it is very easy to use this component even without any Flex knowledge. To demonstrate this technology I will use the microlink application that I wrote recently.
First, copy the applicationupdater_ui.swf found in the update framework into your project. (You can download the update framework from here). Because I am using Flex Builder 3 to develop this application the updater component will be placed under the src folder inside my project.
Next, create the update descriptor file. This is a small XML file that contains all the information needed by the updater. This includes the version number, the application location on your server and a description where details about the improvements in the new version can be written.
<?xml version=“1.0″ encoding=“utf-8″?> <update xmlns=“http://ns.adobe.com/air/framework/update/description/1.0″> <version>0.3</version> <url>http://localhost:8080/releases/MyAirApp.air</url> <description><![CDATA[ Version 0.3 of this application includes the updateing framework. ]]></description> </update>
I will name this file update.xml and this will go on the web server. I placed it in the same location as my AIR application so it is reachable from http://localhost:8080/releases/update.xml.
We will want to check for updates each time the application is started. Of course we can also choose to create a menu item or a button to let the user explicitly request a check for updates. In either case, we have to write some JavaScript code to wire things together. JavaScript code in AIR applications can use classes defined in SWF files.
In the HTML file that will use the update framework (in our case index.html) we have to include a script tag that loads the framework.
<script src="ApplicationUpdater_UI.swf" type="application/x-shockwave-flash"/>
After we include the update framework in our application we have to use it. The instantiation and configuration of this is described inside the comments in the next piece of code, from index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My first AIR application</title> <link rel="stylesheet" href="microlink.css" type="text/css" /> <script type="text/javascript" src="lib/AIRIntrospector.js"></script> <script src="applicationupdater_UI.swf" type="application/x-shockwave-flash"/> <script src="lib/jquery-1.2.6.js"></script> <script src="microlink.js"></script> <script> // instantiate an updater object var appUpdater = new runtime.air.update.ApplicationUpdaterUI(); function load() { // ApplicationUpdaterUI can be configured via a configuration file // delivered with the application or via JavaScript in the application. appUpdater.configurationFile = new runtime.flash.filesystem.File("app:/config/updateConfig.xml"); // setting the event handler for INITIALIZED appUpdater.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED, onUpdate); // It initializes the update framework, silently installing synchronously // any pending updates. It is required to call this method during application // startup because it may restart the application when it is called. appUpdater.initialize(); } function onUpdate(event) { //starts the update process appUpdater.checkNow(); } </script> </head> <body onload="load()"> <h1>this is my first AIR app.</h1> <a id="microlink_a" href="http://www.stratulat.com/blog/feed" class="button" onClick="onClickMicroLink(this); return false;">the microlink</a> </body> </html>
The updateConfig.xml file can set up a lot of parameters for the application updater, most of them related to the behavior of the UI. Only one, however required for the updater to perform well and that is the URL to the update.xml on the server.
I configured updateConfig.xml so that at startup the application first asks if the user wants to check for updates. If so, because I have set up my application version as being 0.2 and inside the update.xml as 0.3, the application displays the update available UI, which shows all the information I’ve set up in the update.xml file on the server.
In this short demo on how to use the Update Framework I showed all the required steps in order to use it. There is one thing however that was not covered and that is error handling.
I have exported my project from Flex Builder 3 and you can download it from here: MyAirApp.zip.
Adobe AIR Update Framework - Flex
I was inspired in this article by the one written by Mihai Corlan on his blog: How to easily and seamlessly update an AIR application. The article discusses exactly the same topic but from the Flex perspective.
