Tizen HTML5 WebApp – Install to Home Screen with Google Chrome Beta

Tizen HTML5 WebApp Install to Home Screen with Google Chrome Beta

Google just recently unleashed the Google Chrome Beta, a new software with new features, with Google Chrome Beta the user do have the ability to set up an application shortcut icon to a web app by selecting the “Add to HomeScreen” menu in the menu item of Google Chrome (see photos below).

The new option is a great addition to the features of Google Chrome (hopefully others will follow) as you can see, you can access any webapp via icon instead of accessing bookmark or typing the url of the webapp in the browser. This is very beneficial especially to HTML 5 apps, as it will be easy access to the users.

With this we tested the feature on our website as well as Tizen HTML 5 demo apps if this thing works well or not.We downloaded the software Google Chrome Beta and install it in our Galaxy S3 running Android O.S to see if how the Tizen HTML 5 webapp will work by using the Google Chrome Install to HomeScreen functionality.

After the installation we first tested it to our website downloadtizenapps.com to see if how the site will behave if we integrated it into a shortcut icon in our Android Home Screen, to make it work exactly we have to add some meta tags to the page of our site to be able for Google Chrome to add icons and will behave like a webapp, the attributes are:

After the initial tweaking we access the site and executed the “Add to homescreen” option , the site was added to homescreen with its specified icon, we used unoptimized icon ( the icon on the homescreen don’t look good), just to see the behavior, it works and it was added to the homescreen, without the code above the site will still be added to your homescreen but no personalized icon for the shortcut.

We selected the shortcut icon of our site and it works, the only thing is that, you can still see the URL of the site, above the page , to avoid this you still need additional tweaking to hide the URL (see more options Learn How mobile_mobifying.

Ok we proceeded to our objective and that is how will an HTML 5 WebApp works in Android O.S, we want to use a webapp to see how will an HTML 5 works with the shortcut icon on the menu, to be able to do this we used the  HTML 5 WebApps from Tizen https://developer.tizen.org/downloads/sample-web-applications

we downloaded the demos from https://01.org/html5webapps/webapps/ we used the Annex HTML 5 WebApp sample by Smuppava, (see photos below) we added the attributes above in the page of the webapp as well as personalized icon (note: icons are not optimized, the icon added to home screen might vary) see Android rules on how to create optimized icons for apps.

We uploaded the whole package to one of our servers and access the Tizen HTML 5 webapp via browser, (see below) then we selected the “Add to Homescreen” option from the Google Chrome Beta Menu, success!.

After the initial execution, we access the shortcut icon of the Annex on our Android homescreen, and the webapp launch in a “Full Screen Mode” great!. The Webapp still follows the same security policies and access to the same API’s, it works and behave like a native application, no menus, no url, no buttons of a browser, just plain webapp . If every webapps will be integrated with mark ups and attributes just like the one above and other features, the HTML 5 does have a better future compared to native apps, as you only need minor modifications to make it work with other platforms, it is much safer, no need any installations and easy to update for developers.

Galaxy Running the Sample Web App installed using Google Chrome Beta Add to homescreen functionality

This shows that any HTML 5 WebApp created for Tizen or other platforms will work to other operating system as well with only minor modifications or non at all..So far we only tested the webapp in online mode and haven’t tried to make it work yet with offline mode, (see details on how to make it work offline Caching the App).

So far the companies right now are in the wait and see status for the HTML 5 webapps, they are relunctant to invest in this technology, so far only two smartphone operating systems are eager to push the technology and Tizen is the leading O.S even scoring high even in the benchmark test in HTML 5. So far so good, as users do have an option whether to used native apps or HTML 5 apps, we will see in years to come if this HTML 5 will become the mainstream or not… but IT experts think a hybrid.. native and HTML 5 blend together to create great apps.

Leave a Reply