PhoneGap HTML5 Portability II - Chrome Web Store Hosted Apps

Last week I talked about the Chrome Web Store being another good high-traffic outlet for your PhoneGap HTML5 codebase.

One of the first issues I encountered with my Packaged App in this new outlet was with advertising.  The ads displayed just fine, as they do on the main website, except for one thing - for every click, the earnings were always $0.00.  That's not good.  After an exhaustive search, I came across this promising answer, but still, $0.00 every time.

The actual problem was that I was using a Packaged App, which essentially is your entire codebase running locally on the user's machine. It ends up that ads within a Packaged App don't have a "legitimate" source URL, according to AdSense, since it's really just local code on the user's machine.  The Chrome Web Store's alternative to a Packaged app is a Hosted App - which is a link to the URL of your application. 

The Hosted App solution is not only appealing as a valid source to display ads, but from a maintainability standpoint I now have one less place to deploy to.  All I need now for deployment is my manifest file and app icons - the Web Store app just piggybacks on my already-existing website.

Here's a sample manifest file for a hosted app:

{
  "name": "My Cool App",
  "description": "This is a test of the Chrome Web Store",
  "version": "1.0.0.1",
  "app": {
    "urls": [      
      "*://www.yourwebsite.com /mail/",
      "*://www.yourwebsite.com /otherarea/"
    ],
      "launch": {
      "web_url": "http://www.yourwebsite.com/"
    }
  },
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

Note that you need to specify a launch URL, as well as any other non-asset URLs you'll be using.  And you will need to verify that you are the owner of this site using Google's Webmaster Tools.

So the quest for a solution to the AdSense problem sent me down the path of investigating Chrome Web Store "Hosted Apps", which not only resolved my advertising issue, but ended up being a better solution in general for my needs.

 If you're debating which type of app would work best for you, here is a good comparison of Hosted vs Packaged apps

HTML5 Portability beyond PhoneGap - The Chrome Web Store

One of the great benefits of doing mobile development using PhoneGap is the portability of the codebase. The same HTML application is easily wrapped and built for all major devices using PhoneGap and/or PhoneGap Build. And since your app is written using HTML, CSS and Javascript, you can make it accessible as a web app as well.

After I had already published a few apps to the Android Market using this technique, I read about the Chrome Web Store. And once I digested their publishing and deployment specs, I noticed that the same PhoneGap codebase could easily be deployed to this outlet as well. I re-deployed the same apps to the Chrome Web Store a few months ago, and my experience was so positive, I wanted to share a quick overview of how to deploy to this store, and some things you'll want to think about:

The deployment is simple for Chrome Web Store Packaged Apps - basically you create a .zip file of your HTML app, along with a simple .manifest file, the app icons, and preview images. Here's a sample manifest that launches splash.html at the root of your app:

{
  "name": "My Cool App",
  "description": "This is a test of the Chrome Web Store",
  "version": "1",
  "app": {
    "launch": {
      "local_path": "splash.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  }
}

(Full documentation)

The preview images are not required, but you'll never get very high in the rankings without them... and of course the image sizes don't match the Android Market sizings, so you'll need to create new ones. And they will not accept them until the images meet their aesthetic criteria - I had two go-arounds with them because of font sizing.

...but the pleasant surprise was the traffic:

The identical app in the Android Market after 6 months or so has about 2400 downloads, and is approaching 1000 active installs.

In the Chrome Web Store, there are 3500+ users in less than two months, and 250+ users daily, 14,000+ total. Rarely is there inactivity when using Google Analytics' real-time tools.

The manifest sample I showed was for a Chrome Web Store "Packaged App", but for my needs I found that a "Hosted App" was the better way to go - and even easier. My post next week will highlight the advantages of using a Hosted App, plus some tips on using advertising.

Installing Windows 8 Developer Preview on VirtualBox (and resolving error 0x8007045D)

I was disappointed to find out that you can't run the developer preview of Windows 8 using Microsoft Virtual PC. But after reading several success stories about installing Windows 8 on Oracle's VirtualBox VM I decided to give it a try using this walk-through. During my first attempts I was greeted with this cryptic error message each time:

"Windows cannot install the required files. Make sure all of the files required for installation are available, and restart the installation. Error code: 0x8007045D".

This error would appear during the second step in the Windows 8 installation process, right after "Expanding Windows Files..." hit about 80%. After researching VirtualBox settings, I found that the first English comment on the bottom of this post resolved my issue. (So it's worked for at least two people now).

Basically, the fix is to make sure to check "Use host I/O cache" under Admin...Storage...(highlight SATA Controller):

Once I changed this setting Windows 8 installed just fine, and the "Expanding Windows Files..." step of the installation took about 1 minute, compared to 15-20 minutes during the failed installations.