X Byte Lab

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...

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. STE...