Add to Home Screen

The first chapter in building progressive web apps (PWA).

Progressive Web Apps are booming fast and all most all major apps are coming up with respective web app. Because web platform is becoming so universal that replicates app like behavior and objective that we want to achieve with Andriod/iOS app could be achieved with web browser itself. Add to home screen is a modern feature that enables us to add shortcut in device's home screen So why not give it a try.


Requirements :

1. Manifest.json file
2. Service worker

Time : 5 Minutes
Coffee : Just a cup is enough.

STEP 1

Create the HTML page (index.html)

STEP 2

Create a manifest file with json extension (manifest.json)


NOTE : A valid PNG icon should be available having at least 144px resolution

STEP 3

Write the code for service worker in .js extension (service-worker.js)

STEP 4

Sip your coffee and get prepared for next step. Not tough though, nothing to fear Ashiq will guide you well.

STEP 5

Link the manifest.json file that we created in STEP 2 with the html page (index.html). Just like any stylesheet or metatag paste this code in head section

STEP 6

Check and register the service worker. Add a script tag anywhere in html page (before ending body tag is prefered) and put the code as below.


NOTE : Service worker works only in https protocol, So be sure to use a secure server certificate. If something goes wrong just open the console(Ctrl + Shift + I) you will get to see the error message.


Check and download source code  from this link https://xbytelab.com/project/add_to_home_screen