"ADD TO HOME SCREEN" Popup not showing on my ASP.Net Site

Question

I am trying to make Add to Home Screen banner with my Asp.net project My Index.js is

// Make sure we are accessing over https, if not redirect
if ((!location.port || location.port === "80") && location.protocol !== "https:" && location.host !== "localhost") {
    location.protocol = "https:";
}

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('sw.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope:', registration.scope);
    }).catch(function (error) {
        console.log('ServiceWorker registration failed:', error);
    });
}

and my Sw.js is

console.log('I am a Service Worker!');
self.addEventListener('install', function () {
    self.skipWaiting();
});

self.addEventListener('activate', function (event) {
    event.waitUntil(clients.claim());
});

and my Manifest file is like

{
  "name": "App_Name",
  "short_name": "APP",
  "icons": [
  {
        "src": "120x120.png",
        "type": "image/png",
        "sizes": "128x128"
      }, 
   {
        "src": "152x152.png",
        "type": "image/png",
        "sizes": "152x152"
      }, 
   {
        "src": "144x144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, 
   {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "256x256"
      },
      {
        "src": "192x192.png",
        "type": "image/png",
        "sizes": "512x512"
      }
   ],
  "start_url": "Welcome.aspx?launcher=true",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#aac73c ",
  "theme_color": "#63528a"
}

This Works when click "Add to home Screen" form Devtool in Application Tab. but it cannot show a Popup of add to home screen like this.

please advise... Thanks in Advance

Answer 1

Browsers manages when to show the App Install Banner (aka the "Add to Homescreen" prompt). I guess they base it on how much the user has interacted with the app (these heuristics/criteria are different per browser and may also change from time to time).

For development purposes, as long as it worked when clicking DevTools' "Add to Homescreen", you can be confident that it will work on other devices as well.

There is also a way to bypass these browser heuristics and just show the App Install Banner right away. This is hidden behind a flag in Chrome, so go to chrome://flags and look for "Bypass user engagement checks", and enable that flag.

Answer 2

How about trying the steps in this blog How to add “Add to Homescreen” popup in web app

Lighthouse by Google was introduced.

It is an open-source, automated tool for improving the quality of your web apps. You can run it as a Chrome Extension or from the command line. You give Lighthouse a URL that you want to audit, it runs a barrage of tests against the page, and then it generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

There are two ways to run Lighthouse, as a Chrome Extension, or as a command line tool. The Chrome Extension provides a more user-friendly interface for reading reports. The command line tool enables you to integrate Lighthouse into continuous integration systems.

Follow this steps from the blog and suggested in SO post as well.

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)
    });
 }
</script>

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.