Add Code into Footer page before body.
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
console.log('beforeinstallprompt event triggered');
e.preventDefault(); // Prevent the default mini-infobar from appearing
deferredPrompt = e; // Store the event for later use
// Automatically show the install prompt after a short delay
setTimeout(() => {
if (deferredPrompt) {
console.log('Showing install prompt');
deferredPrompt.prompt(); // Show the install prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the PWA installation');
} else {
console.log('User dismissed the PWA installation');
}
deferredPrompt = null; // Clear the stored event
});
} else {
console.log('No deferred prompt available');
}
}, 3000); // Adjust the delay as needed
});
// Optional: Detect and log PWA support
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
} else {
console.log('Service Worker is not supported');
}
if ('beforeinstallprompt' in window) {
console.log('beforeinstallprompt is supported');
} else {
console.log('beforeinstallprompt is not supported');
}
</script>
----------------
create button on website
<button id="installButton" style="display:none;">Install App</button>
<script>
document.getElementById('installButton').style.display = 'block'; // Show the button
document.getElementById('installButton').addEventListener('click', () => {
if (deferredPrompt) {
deferredPrompt.prompt(); // Show the install prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the PWA installation');
}
deferredPrompt = null; // Clear the stored event
});
}
});
</script>
