Skip to main content

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

Labels:

Comments

Post a Comment

Popular posts from this blog

YouWave Home 4.1.1 Crack

YouWave Home 4.1.1 Crack is Here !  (100% Working ) YouWave for Android 4.1.1  - The Android Emulator YouWave  is a software which is used to run the android apps in your computer and its also used to play games i.e., android games with the Desktop or laptop using YouWave .Playing with the Android emulator on your computer is a pretty geeky endeavor, but YouWave makes it easy to accomplish on your Windows PC. If you can download and install a Windows program, you can have an Android virtual machine running on your desktop in just a few minutes. Probably this is the best alternative for BlueStacks.But YouWave won’t launch most of the games like Temple Run,Subway Surfers etc. while you can play them on BlueStacks. YouWave Universal Crack ?  :  YouWave Universal Crack is Here ! YouWave Features Runs Android apps and app stores on your PC, no phone required Download thousands of apps online via app stores within youwave High performance – ...
5 comments
Read more

Photos of JNV Goalpara

Class 12 batch of 2014-2015 (JNV Goalpara) jnv goalpara, jnv dudhnoi, ashiq dey, hafizur rahman, khairul, Mriganka Banikya, Mustafizur Rahman, Ashiq Dey, Hafizur Rahman Tongey, Kamrul Islam Baba, Ashiq Dey, Khairul Islam, Hafizur Rahman Tongey, Bicky Boro, Kamrul Islam (Baba), Mohibul Hoque, Gyanjyoti Rabha, Subhankar Das, Mohibul Islam, Lowkesh Tiwari, Rofiqul Islam All the boys of JNV goalpara love to stay at nv goalpara, all about jnv goalpara, ragging at nv, navodayan song, Jawahar Navodaya Vidyalaya located in Dudhnoi Golpara Assam is a Co-Educational Senior Secondary institution affiliated to the Central Board of Secondary Education (CBSE) on Provisional basis since 1988. The school has been operating officially under the trust/society N.V.S.. The school is equipped with 15 class rooms and all essential facilities. If you're looking for details in admission/application forms, fees, school timings, vacations/holidays schedule or facilit...
2 comments
Read more

Add to home screen on custom button click

In the last post I had shared with you how to make the browser show a "Add to Home Screen" dialog box in Mobile devices. It is possible in both Android, iOS and even on Latest desktop browsers too. This feature is available in modern web browser and it helps us to install the PWA in user's device. In this post we will learn how to show Add to Home Screen prompt when user clicks a button. The dialog box like the image below will popup on user's screen once they click the button designed to do that task. Below is the  Add to home screen popup dialog box . To popup add to home screen dialog box all we need to do is - Trash the  beforeinstallprompt Call  deferredPrompt.prompt() when a custom button is cliked Who wants to waste time in reading. So here's the code for you. NOTE : manifest.json and service-worker.js file needs to be available in the same directory. Refer to last post to learn how to do that. Check and download source co...
Post a Comment
Read more