How to get Add to Home Screen Pop up on Site Open in mobile browser

Question

How to get this pop up in mobile browser \"Add to home\" will create icon of chrome on home screen of mobile with site link on mobile.

Please suggest th

Answer 1

I found this detailed article on Medium. How to add “Add to Homescreen” popup in web app

Step 1: Create a blank service-worker.js file in your root folder. And put the below code in your html page, before closing tag.

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

Step 3: Add configurations in manifest file Here is the configurations sample.

{
  "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 the 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.

background_color: Set background color for splash screen.

name : Full name of the application.

You can validate your manifest here at https://manifest-validator.appspot.com