Automatically Open Save to Home on mobile device

I have a guide on our mobile site explaining how to access the Save to Home functionality to a user. Rather than showing them in images, I want to have them tap a button and open the Save prompt automatically.

 

This is the code I have currently, but its not firing on our production enviro. Any suggestions would be helpful!

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Web App</title>
  <!-- Include Pendo script -->
  <script src="https://cdn.pendo.io/agent/static/<appID>/pendo.js"></script>
  <!-- Add your other meta tags, stylesheets, etc. here -->
</head>
<body>
  <!-- Your web app content goes here -->

  <!-- Button to trigger the install prompt -->
  <button id="install-button">Install App</button>

  <!-- Add your other HTML content here -->

  <script>
    let deferredPrompt; // Declare the deferredPrompt variable

    // Check if the browser supports the beforeinstallprompt event
    if ('serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window) {
      // Listen for the beforeinstallprompt event
      window.addEventListener('beforeinstallprompt', (event) => {
        // Prevent the browser's default prompt
        event.preventDefault();
        
        // Stash the event so it can be triggered later
        deferredPrompt = event;

        // Show your own custom install prompt to the user
        showInstallPrompt();
      });
    }

    function showInstallPrompt() {
      // Show your custom install prompt here, like a button or a message
      // For example:
      const installButton = document.getElementById('install-button');
      installButton.style.display = 'block';
      installButton.addEventListener('click', () => {
        // Prompt the user to add the app to the home screen
        deferredPrompt.prompt();
        
        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the install prompt');
          } else {
            console.log('User dismissed the install prompt');
          }
          
          // Reset the deferredPrompt variable
          deferredPrompt = null;
        });
      });
    }
  </script>
</body>
</html>

0

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post