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 :

Manifest.json file
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

Comments

How to Convert MBR to GPT without Data Loss?

How to Convert MBR to GPT without Data Loss? Why Convert MBR to GPT? Nowadays, many Windows users have come up with the question of "how to convert MBR to GPT without data loss". Also, in many technical blogs and forums, this question can be heard frequently as well. Why do they want to convert MBR to GPT? Let's see the difference between MBR and GPT as follows. The MBR hard disk can only support 2TB hard disk at most, but GPT can support 256TB. The users can only create four primary partitions or three primary partitions and one extended partition at most. The GPT can support 128 primary partitions at most. Some booting main boards can not support GPT as their system drive, such as MAC. Some Windows operating systems can not work with GPT hard disk, such as Windows 2000, XP, Windows 2003 32bit. How to Convert MBR to GPT without Data Loss? Diskpart The Diskpart Command can achieve the goal by the following steps. Step 1: click "Start

Download Metro based Immersive Explorer

Immersive Explorer wnload Immersive Explorer ,I explorer immersive explorer, xbit, xbyte, x byte.com, xbyte.com Are you bored of using old windows explorer, may be the answer is yes, But I am here to make your desktop look and feel gorgeous, with a new metro based explorer "Immersive Explorer". Download this small app and feel the difference. Immersive Explorer (get this app) for Windows 8, 8.1 or Windows 7 Immersive Explorer is an open source alternative to the default file explorer included in Windows (known as Windows Explorer). It is designed to provide an "immersive" experience to the user by focusing on the content rather than hiding it behind icons and large window chrome and borders. It allows the user to avoid opening different applications and switching between multiple windows when doing tasks as simple as viewing a picture, thanks to the built-in viewer. Although it is not a Windows 8 "Metro application

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

X Byte Lab

Search This Blog