AeroGear, Meet World of Warcraft - Chrome Edition
Intro
“Just when i thought i was out, they pull me back in” - Micheal Corleone( Godfather III ).
I thought i was done with the WoW series. But there is one more thing. The shiny object of the day today was creating a chrome packaged app.
I wanted to see if the AeroGear.js library worked here. So time to begin.
Starting
So there are a couple things that we need to add/modify.
Well what is a Chrome Packaged App, this link will answer that: Find Answers
To create a Packaged app, we need a Manifest file and a background file to launch our main app.
lets create the manifest.json first
{
"manifest_version": 2,
"name": "AeroGear WoW",
"version": "1",
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "26"
}
Let’s take a look at the important part of the contents for a moment.
The name should be a no brainer
there is a permissions array, nothing in here at the moment
the app variable specifies the background file that we are going to load to launch our app
and the minimum chrome version variable tells us, yup you guess it, the minimum version of chrome this will work with
Now lets create that background.js file
/**
* Listens for the app launching then creates the window
*
* @see http://developer.chrome.com/apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main'
});
});
Here we are listening to the launch event and once that happens we create a new window for our app to live in.
There are many options you have, but we are just going to specify an id
So now we should be able to run our app.
-
first we need to install it, type this in your location bar in chrome
chrome://extensions/
-
then click on the Load unpacked extension… button
-
Navigate to the directory where the app resides
-
The app should now show in the list of apps.
-
Then click Launch
If you right-click on the app to open the dev tools, you will notice that there are some errors.
This has to do with chrome’s CSP
Since this is a packaged app, we don’t need jsonp, so we can remove that from this call
function readPipe() {
$.mobile.loading( "show" );
realmStatusPipe.read( {
success:function( data ) {
realmStatusStore.save( data, true );
updateRealmStatus();
$.mobile.loading( "hide" );
},
error:function( data ) {
console.log( data );
}//,
//jsonp: {
// callback: "jsonp"
//} //set to true to use jsonp , DUH
});
}
The next thing is that in order to do cross domain requests, we need to set the permissions.
in the manifest.json file, add the URL to the permissions array
"permissions": ["https://us.battle.net/api/wow/"]
You will notice that we using https. as per the CSP, we can’t access cross domain requests that are not https
Now if you reload the app, you should see no errors. but there is one thing that is still missing. you may notice that you can’t scroll the list
to fix this, all you have to do is add a simple style to the html element in index.html
<html style="overflow-y:scroll">
now if you reload the app, things should work as expected. YEA!!