-
Notifications
You must be signed in to change notification settings - Fork 28
Adding OTA
Enabling AEM OTA updates is a great first step towards fully integrating an existing PhoneGap app into AEM that can also include the incremental addition of authored content.
The following steps should be able to be applied to any Phonegap app regardless of the application design or frameworks used.
Add the content sync plugin to your config.xml
- Download
content-sync-2JavaScript library from your AEM 6.2+ instance - Add to PhoneGap project
The concept of a splash page needs to be added which will allow the AEM content sync library to copy the entire app into a writable location when it first loads so that future updates can be applied.
- Move your existing start page to a new location (this is neccessary if your start page is
index.html) - Create a splash page
- Add the AEM content sync library to your splash page
- Add initialization script to splash page.
eg.
var successRedirectPath = '/home.html'; //this is the path to the app's start page
var initializationComplete = function(error, localContentPath) {
if (error) {
return console.error("ContentSync init error: " + error);
}
// App was successfully initialized. Redirect to the new local content path.
console.log("ContentSync success. Returned path: [" + localContentPath + "]");
return window.location.href = localContentPath + successRedirectPath;
};
var initializeApplication = function() {
//the id can be any unique value you want to use
var contentInitializer = CQ.mobile.contentInit({
id: 'hybridapp'
});
contentInitializer.initializeApplication(initializationComplete);
};
// Begin initialization once Cordova bridge is ready
document.addEventListener('deviceready', initializeApplication, false)
- Update index.html to redirect to
splash-page.html.
eg.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=splash-page.html">
<script type="text/javascript">
window.location.href = "splash-page.html";
</script>
</head>
<body>
</body>
</html>
Now that the splash page has be added and configured the app will be able to initialize itself when launched for the first time which will allow future OTA updates from AEM to occur.
In order to enable OTA updates in the app the same content sync library used by the splash page will also need to be added to the app's start page.
- Add the AEM content sync library to your start page
At this stage the existing PhoneGap has now been fully configured to accept AEM OTA updates. The final step is to actually initiate an update request. This step is application dependent and could be triggered by a user action (button click, pull down) or timed event (app launch, every 24 hours).
In any case the actual logic required to perform the request remains the same.
var contentUpdater = CQ.mobile.contentUpdate({
// content sync package id
id: "appName",
// Indicate that self-signed certificates should be trusted
// should be set to `false` in production.
trustAllHosts: false
});
var contentPackageName = "shell"; //name of content package deifned in pge-content-packages.json
contentUpdater.isContentPackageUpdateAvailable(contentPackageName,
function callback(error, isUpdateAvailable) {
if (error) {
return navigator.notification.alert(error, null, 'Content Update Error');
}
if (isUpdateAvailable) {
// Optionally confirm with user before perofrming update
// eg. navigator.notification.confirm('Update is available, would you like to install it now?',
// onConfirm,
// 'Content Update', // title
// ['Update', 'Later'] // button labels
// );
contentUpdater.updateContentPackageByName(contentPackageName,
function callback(error, pathToContent) {
if (error) {
return navigator.notification.alert(error, null, 'Error');
}
// else
console.log('Update complete; reloading app.');
window.location.reload(true);
});
}
else {
navigator.notification.alert('App is up to date.', null, 'Content Update', 'Done');
}
}
);
Follow instructions in README.
The result of the import will be a new or updated app under content/mobileapps. The node name of the app used will
be determined by values provided in the imported config.xml.
Every AEM App must include an app instance resource. This resource not only drives the appearance of the AEM Mobile dashboard but is also imperative when it comes to constructing the final app source via content sync. Part of the role of an app instance is to include content required by an app that doesn't need to be authored in AEM. This would include content such as HTML, CSS, JS and images.
During an import an app instance resource will automatically be created with the name shell.
All of the imported content from the PhoneGap app will be located under this resource at: /jcr:content/pge-app/app-content/phonegap.
An appAssetPath property will also be added to the app instance resource which indicates a location under /content/dam
where app assets were imported to.
Further customizations of the import process are also possible to suit specific requirements.
Downloading a previously imported PhoneGap app from AEM will include some additonal configuration files required by the AEM content sync library. These configuration files indicate what update packages are currently available on the server, the URL of the AEM update server, a file listing and a last modified timestamp.
- Development Source: [http://localhost:4502/var/contentsync/content/mobileapps/--app-name--/shell/jcr:content/pge-app/HybridAppDev-zips/HybridAppDev.1467039267478.zip](http://localhost:4502/var/contentsync/content/mobileapps//shell/jcr:content/pge-app/HybridAppDev-zips/HybridAppDev.1467039267478.zip)
--app-name-- will be determined by values in config.xml
When building the app for final deployment to an app store the staged AEM source should be used instead in order to ensure the correct timestamp is configured.
The following files will be generated by AEM when download the app source.
-
config.xml: Originally imported config.xml plus any changes made by the AEM App Details tile. -
pge-content-packages.json: List of content packages and server URL -
pge-package.json: File listing and last modified timestamp