How to add “add to home screen” as a popup in mobile view

Question

I wanted to show "add to homescreen " as a pop up in web site when it will open on mobile view. i used core php,jquery to build my website

Answer 1

You need to fulfill conditions mentioned on Google Web Fundamentals where are also examples of usage.

1. You need to add manifest.json file to your root, that includes:

   • short_name or name
   • icons must include a 192px and a 512px sized icons
   • start_url
   • display must be one of: fullscreen, standalone, or minimal-ui

2. Your website must run on https.

3. Has service worker with fetch.

If you meet all those criteria, web should fire beforeinstallprompt event, where you show some button (btnAdd in example lower) or bar and then you can show prompt.

Example from google:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});


//show prompt on click
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});