There are three types of chrome web apps:

  1. hosted app,which run on their own hosted server
  2. package app,that is app which downloaded the entire app and run on your browser(offline functionality)
  3. Extension is an extension for chrome browser

ok!Now,let’s see what we need for hosted chrome app.

Manifest.json

The first thing we have to do is create a manifest.json file. This is the template of how manifest.json look alike.

{
 "name": "CFML 10 Reference",
 "description": "Find your CFML 10 tags",
 "version": "1",
 "omnibox": { "keyword" : "cfml" },
 "manifest_version": 2,
 "background": {
 "scripts": ["background.js"]
 },
 
 "app": {
 "urls": [
 "*://help.adobe.com/en_US/ColdFusion/10.0/CFMLRef/index.html",
 "*://help.adobe.com/en_US/ColdFusion/10.0/CFMLRef/index.html"
 ],
 "launch": {
 "web_url": "http://help.adobe.com/en_US/ColdFusion/10.0/CFMLRef/index.html"
 }
 },
 
 "icons": {
 "16": "favicon.png",
 "128": "cf10.png"
 },
 
 "permissions": [
 "unlimitedStorage",
 "notifications"
 ]
}

Icons

The next step is you need icons for your app.the first one is favicon(16px*16px) and the other is for the icon(128px *128px) on chrome’s new tab. After that,you put these files altogether into a folder and name whatever you want.Now,you can test your application with chrome.

Go to chrome > settings > extensions > check developer mode and click on “load unpacked extension”. Choose the folder you created via file explorer.(there might be slightly variations according to chrome versions.)

If something wrong with your app,chrome gonna show you a pop-up message and give you the error message. If you want a more detailed example.take a look at this countdown app tutorial.

The first tutorial I learned is Chrome official helloworld! tutorial. Moreover,google also offers bunch of sample apps. So,you can download it and try it in your browser and see how they works. It’s easy and fun and you can build your site’s chrome app within half an hour for sure.