Saturday, April 2, 2011

Google Chrome Packaged App Tutorial

Hello folks, recently I have registered with Google and published a couple of Google Chrome browser applications to the Chrome Web Store. I am here to share my experience and knowledge with you all.

     The first app that I published to the Google Chrome Web Store is my blog app, The4thDimension, as shown in the screenshot.


    Later I published a 'Hello Packaged App' app to the Chrome Web Store and now its up and working fine. I have also written a small Game App, show in adjacent picture, for Google Chrome, you can download it here.

   The primary difference between a Packaged App and a Hosted App is the manifest.json (I will explain one shortly). Rest all is same for both of them.
In behavior, a Packaged App is an installable application & can RUN even when the browser is offline whereas the  Hosted App is hosted from a web server and will NOT RUN offline.

1. What is 'manifest' file and how to create it?
A manifest file is a little JSON description file which holds the meta-data of your application. The code for manifest.json file is available at the chrome web store docs, but here is the customized code for the Hello Packaged App manifest file.

{
  "name": "Hello Packaged App",
  "description": "Demonstration to create a simple packaged app",
  "version": "11.4.2.2",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  }
}

Copy the above code into the notepad and save it as manifest.json. Here is the description for the above code.


name : This field of the manifest file denotes the name that will be seen in the web store by the users of your application.

description : This field describes the functionality and usability of your app in brief.

version : This is the version of the app. It can have value with three decimal point at the most. For example 3.2.0.1 would be correct value for version of the app.

app : The app field describes the behavior of the app. app field has a child field 'launch'

launch : The launch field describes the action to be taken when the application is launched. launch filed has a child filed 'local_path'

local_path : The local_path field denotes the path of the target file to be launched when the app starts running. It can refer to .html, .js, .php kind of files.

icons : This field has 2 sub fields '16' and '128' which refer to 16x16 PNG image icon and 128x128 PNG image icon for the application. Both of these fields are compulsory for the application to run.

2. Creating the target file for the launch field.
    In the above code I have created main.html file. You can write whatever you want but must be a valid HTML code.

3. Packaging the application.
   This is where I was stuck initially, but had figured out the way later. Now you have to select all the 4 files mentioned below and create a zip archive for example 'HelloPackagedApp.zip'
1. manifest.json
2. main.html
3. icon_16.png
4. icon_128.png

4. Publishing & Charging for the application.
   Log into Chrome Web Store and goto the Developer Dashboard. Click the 'Add Item' button. A page will appear where it will facilitate you to upload the 'HelloPackagedApp.zip' file, fill the entries in the page and click 'Publish'.
     Regarding the money that you can charge to users, Google provides a Web Store Payments API which makes is pretty simple to charge the users for the App, maintain licensing for the App etc.

5. Testing & Running your App.
   When you are done with publishing the app. Search the Chrome Web Store with the name of your application (here 'Hello Packaged App') install it. When you open up a new tab, you should see something like the one shown below in the red colored rectangle.




When you run the app you should see something like this.



Thats it. You can now call yourself a Chrome Web App Developer.

6 comments:

  1. Eh, you didn't talk about the payment fee :)

    ReplyDelete
  2. ohh..I am sorry for that....

    but Google provides an API for payments called Web Store Payment API using which you can charge your App users.

    I did not use that API just yet. I will blog abt how to use it when I understand that.

    ReplyDelete
  3. Thanks for "local_path": "main.html". It helped me to quickly start playing with hosted apps.
    / Erik

    ReplyDelete
  4. I use <script src="..."> ... <body onload="initOnLoad();"> in my main page. When I load the page as regular page, everything works. When I try to load my work in progress as "unpacked app" (from directory), the javascript is never started.
    How can I test my code as app if this does not work?

    ReplyDelete
  5. @OK4RM Packaged apps won't allow inline scripts. You should try a javascript listener instead:
    document.body.onload = initOnLoad();

    The script tag shouldn't be a problem for you however, in fact you need it...

    ReplyDelete
  6. when i open the app in a new window( not browser tab)by using chrome.app.runtime.window.open(a.html) in .js file ,neither the href links work nor my javascript. i dont know why..pls help..i'm very new to packaged apps and js

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Share This

Share |