Today we see how to create a web app for Google Chrome , test it, try it and publish it on the crome web store .
For more information on web apps, I refer you to the official Google website at this link .
I have already created a web app for the analogica.it forum , so we will follow step by step everything I have already done to create and publish the analogica.it web app
At the end of the tutorial we will have our web app published on the chrome web store
and once installed, when we go to open a new tab we will have the link to our webapp
which is nothing more than a link to our forum (but it is valid for any other web site, blog, …)
1 – We prepare the work tools
To make our first web app we need:
- a 128 × 128 format image (icon)
- a text editor (notepad is fine too)
2 – We create our web app
To create our web app, all we have to do is:
- create a folder and call it “[yoursite] _webapp” (but we can call it whatever we like)
- copy the 128 × 128 icon to the folder
- create a new text file and rename it to ” json“
At this point we open the manifest.json file in edit and insert the following code
{ “name”: “[your_app]”, “description”: “[your_desc]”, “version”: “1.0.0”, “manifest_version”: 2, “app”: { “urls”: [ “[your_url]” ], “launch”: { “web_url”: “[your_url]” } }, “icons”: { “128”: “[your_icon]” }}
Insert the data of your app in place of everything that I put between squares, for example for analogica.it the values are:
[your_app] = analogica.it
[tua_desc] = passion for silver salts photography
[your_url] = http://www.analogica.it
[your_icon] = icon.png
3 – Let’s test our web app
We are ready to test our web app using the tools that chrome itself makes available to us.
First we zip the newly created folder.
Let’s go to Chrome settings> Tools > Extensions
This will open the page with all our extensions installed.
We select the ” developer mode ”
And click on the ” Load Unpackaged Extension ” button .
We choose our zip file and confirm, we will also see our newly created extension among the extensions.
To verify its correct functioning we open a new Chrome tab , we should see our app together with the other installed apps.
We click on the app and verify that the link to our site (forum, blog, …) works correctly.
If all goes well we can proceed with the deployment on the chrome web store.
4 – We publish our web app
IMPORTANT: To publish our web app on the chrome web store it is necessary to pay a “donation” of 5 dollars to Google, the payment will be required before the final publication.
We access the chrome web store https://chrome.google.com/webstore/category/home with our gmail account.
Click on the settings icon at the top right and access the developer dashboard
It will look more or less like this (don’t pay attention to my card already published, the first time it will obviously be empty)
Click on “Add new article” and select the zip file previously tested locally
At this point we must enter the detailed data of our app
A detailed description
An icon, a screenshot, any video and promotional images
The references
The categories
The eventual price
Language and other settings
Finally, click on ” publish changes ”
5 – We install our “official” web app
At this point we are ready to install our web app directly from the chrome web store.
So we access the link of our app
Ex: https://chrome.google.com/webstore/detail/analogicait/mfdaclgfjhnnmikoacnnjfccohepomnb
And we verify that it has been published correctly
Overview
Details
Reviews
If everything is ok we can click on the ” add ” button
At this point our app will be permanently installed .
