How to add “Add to Homescreen” popup in web app

Step 1: Create service worker file

create a blank service-worker.js file in your root folder. And put the below code in your html page, before closing </html> tag.

<script> if ('serviceWorker' in navigator) {    console.log("Will the service worker register?");    navigator.serviceWorker.register('service-worker.js')
.then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened:", err) });

Step 2: Create manifest file

create manifest.json file in root folder. Add below tag in your html page header section

<link rel="manifest" href="/manifest.json">

Step 3: Add configurations in manifest file

Here is the configurations we used.

"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
"src": "assets/icons/launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
"src": "assets/icons/launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
"src": "assets/icons/launcher-icon-3x.png",
"type": "image/png",
"sizes": "144x144"
"src": "assets/icons/launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
"start_url": "/?utm_source=launcher"

In above code you can replace your own values.

short_name : this name is visible on Homescreen along app icon.
icons : set different size icons for different screen sizes

theme_color : this color code will change the color of addresser in chrome.
see below screen

background_color : set background color for splash screen.
name : Full name of application

Splash screen of BetaPage

You can validate your manifest here

Leave a Comment

Your email address will not be published.