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>
Comments
Please sign in to leave a comment.