Basics: What does a Chrome Web App consist of?
A Chrome Web App consists of a .crx file that contains the metadata describing the app. (The .crx file format is just a variation of ZIP that’s used by Google Chrome.)
The .crx file for a hosted app (app made from an existing website) must contain an icon and a manifest that has details about how the app should function in the browser.
Getting Started:
These are the only 2 things you need to make a Chrome Web App. The manifest and an icon for the web app. The Manifest - Every app needs a manifest—a JSON-formatted file named manifest.json that describes it. The Icon - Every app also needs an icon. The icon is used on the New Tab page.
Creating The Manifest:
In order to create a manifest file, open the notepad or any other text editor you use and save the document as a .json file. The code below shows the manifest.json we used in making the Aston at The Kuningan Suites Web App.
{
"name": "Aston at The Kuningan Suites",
"description": "A Simple Web App To Create Mind Maps with Aston",
"version": "1.0",
"icons": {
"aston": "aston.png"
},
"app": {
"urls": [
"http://thekuningansuites.com/"
],
"launch": {
"web_url": "http://thekuningansuites.com"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}
This manifest and the icon it points to ( aston.png ) make the aston at the kuningan suites web app installable as a hosted app in Chrome. When it’s installed, the specified icon appears on Chrome’s New Tab page. Clicking that icon launches the app by bringing up the page specified by the “web_url” field.
Permissions:
The “permissions” field lets you specify HTML5 permissions that the app requires. By specifying “unlimitedStorage” and “notifications”, this app is able to use those HTML5 features without having to repeatedly ask the user for permission.
During app installation, the user is told which permissions the app needs; installing the app implicitly grants those permissions for all pages whose URLs match those in the “apps” field of the manifest.
You can use the above code to create the manifest for your own web app. Just replace the various fields like name, versions, app, launch etc. with your own.
To learn more about how the various parameters of the manifest work, read Google’s documentation.
Creating the Icon:
It is necessary to have an icon when a web app is made, and according to Google’s specifications it should be exactly 128×128 pixels. So we edited the Aston Logo a bit so that we know which app this icon represents. We used the Webpage Screenshot extension to take a screenshot and the beautiful Aviary Chrome Web App to edit the image.
Verify If Your Web App Works As Expected:
Now that you have the two necessary components to make a web app, we now need to load the unpacked app into the browser, to confirm that the app is valid.
1) First, create a folder (you might name it my_app or anything else you want) and put the files we created above, in it:
o manifest.json
o aston.png
You’ve just created the metadata for a hosted app. Now we can load the app.
2) In Chrome, bring up the extensions management page by clicking the wrench icon and choosingTools > Extensions.
3) At top right corner – If Developer mode has a + by it, click the +. The + changes to a -, and more buttons and information appear.
4) Click the Load unpacked extension button, which open a new window. Now browse to the location where you created the my_app folder shown in step 1, and select the folder.
5) If everything in the manifest file is correctly specified, your web app will install appear in the list of installed extensions. If there is an error, Chrome will tell you what went wrong.
[ Read More ]
A Chrome Web App consists of a .crx file that contains the metadata describing the app. (The .crx file format is just a variation of ZIP that’s used by Google Chrome.)
The .crx file for a hosted app (app made from an existing website) must contain an icon and a manifest that has details about how the app should function in the browser.
Getting Started:
These are the only 2 things you need to make a Chrome Web App. The manifest and an icon for the web app. The Manifest - Every app needs a manifest—a JSON-formatted file named manifest.json that describes it. The Icon - Every app also needs an icon. The icon is used on the New Tab page.
Creating The Manifest:
In order to create a manifest file, open the notepad or any other text editor you use and save the document as a .json file. The code below shows the manifest.json we used in making the Aston at The Kuningan Suites Web App.
{
"name": "Aston at The Kuningan Suites",
"description": "A Simple Web App To Create Mind Maps with Aston",
"version": "1.0",
"icons": {
"aston": "aston.png"
},
"app": {
"urls": [
"http://thekuningansuites.com/"
],
"launch": {
"web_url": "http://thekuningansuites.com"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}
This manifest and the icon it points to ( aston.png ) make the aston at the kuningan suites web app installable as a hosted app in Chrome. When it’s installed, the specified icon appears on Chrome’s New Tab page. Clicking that icon launches the app by bringing up the page specified by the “web_url” field.
Permissions:
The “permissions” field lets you specify HTML5 permissions that the app requires. By specifying “unlimitedStorage” and “notifications”, this app is able to use those HTML5 features without having to repeatedly ask the user for permission.
During app installation, the user is told which permissions the app needs; installing the app implicitly grants those permissions for all pages whose URLs match those in the “apps” field of the manifest.
You can use the above code to create the manifest for your own web app. Just replace the various fields like name, versions, app, launch etc. with your own.
To learn more about how the various parameters of the manifest work, read Google’s documentation.
Creating the Icon:
It is necessary to have an icon when a web app is made, and according to Google’s specifications it should be exactly 128×128 pixels. So we edited the Aston Logo a bit so that we know which app this icon represents. We used the Webpage Screenshot extension to take a screenshot and the beautiful Aviary Chrome Web App to edit the image.
Verify If Your Web App Works As Expected:
Now that you have the two necessary components to make a web app, we now need to load the unpacked app into the browser, to confirm that the app is valid.
1) First, create a folder (you might name it my_app or anything else you want) and put the files we created above, in it:
o manifest.json
o aston.png
You’ve just created the metadata for a hosted app. Now we can load the app.
2) In Chrome, bring up the extensions management page by clicking the wrench icon and choosingTools > Extensions.
3) At top right corner – If Developer mode has a + by it, click the +. The + changes to a -, and more buttons and information appear.
4) Click the Load unpacked extension button, which open a new window. Now browse to the location where you created the my_app folder shown in step 1, and select the folder.
5) If everything in the manifest file is correctly specified, your web app will install appear in the list of installed extensions. If there is an error, Chrome will tell you what went wrong.
