JavaScript ask user to install webapp

[hno2005]

hi
I've made a webapplication for my website ... I just need something like image below to ask users to install the webapp if they have not already installed it ... how can I do so ?

 

[vishvajitd]

You can prompt users to install your web app using a "beforeinstallprompt" event. Here's an example of how you can use this event to show a custom prompt to install your web app:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the default prompt
  event.preventDefault();

  // Store the event for later use
  deferredPrompt = event;

  // Show your custom install prompt
  showInstallPrompt();
});

function showInstallPrompt() {
  // Get the install button and add a click listener
  const installButton = document.getElementById('installButton');
  installButton.addEventListener('click', (event) => {
    // Show the native install prompt
    deferredPrompt.prompt();

    // Wait for the user to make a choice
    deferredPrompt.userChoice.then((choiceResult) => {
      // If the user accepted the install, store it in local storage
      if (choiceResult.outcome === 'accepted') {
        localStorage.setItem('installed', true);
      }

      // Reset the deferred prompt
      deferredPrompt = null;
    });
  });

  // Show the install prompt
  installButton.style.display = 'block';
}

// Check if the app has already been installed
if (localStorage.getItem('installed')) {
  // Hide the install prompt
  installButton.style.display = 'none';
}