Add this to your root +layout.svelte in your already working PWA
<script>
let deferredPrompt;
let installButtonVisible = false;
let output = '';
onMount(() => {
if ('BeforeInstallPromptEvent' in window) {
showResult('⏳ BeforeInstallPromptEvent supported but not fired yet');
} else {
showResult('❌ BeforeInstallPromptEvent NOT supported');
}
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
installButtonVisible = true;
showResult('✅ BeforeInstallPromptEvent fired', true);
});
window.addEventListener('appinstalled', (e) => {
showResult('✅ AppInstalled fired', true);
});
});
function showResult(text, append = false) {
if (append) {
document.querySelector('output').innerHTML += '<br>' + text;
} else {
document.querySelector('output').innerHTML = text;
}
}
async function installApp() {
console.log('installApp button clicked');
if (deferredPrompt) {
deferredPrompt.prompt();
showResult('🆗 Installation Dialog opened');
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
showResult('😀 User accepted the install prompt.', true);
} else if (outcome === 'dismissed') {
showResult('😟 User dismissed the install prompt');
}
// Hide the install button
// installButtonVisible = false;
}
}
</script>
<div class="container">
<h1>Installation Prompt Demo</h1>
<p class="instructions">Load this PWA in a browser supporting beforeinstallprompt.</p>
<section class="toolbar">
{#if installButtonVisible}
<button on:click={installApp}>Install this App</button>
{/if}
</section>
<output>{@html output}</output>
</div>
<slot />
<style>
h1 {
text-align: center;
}
.toolbar {
width: 100%;
display: flex;
margin-top: 16px;
justify-content: center;
}
.instructions {
text-align: center;
margin-bottom: 16px;
}
output {
display: block;
color: gray;
margin: 32px 16px;
text-align: center;
border: 1px silver dashed;
padding: 16px;
border-radius: 16px;
}
button {
display: block;
font-size: 16px;
border: 2px solid black;
border-radius: 8px;
padding: 16px;
margin: 0 8px;
text-transform: uppercase;
}
</style>
https://glitch.com/edit/#!/mlearn-pwa-web-app-install-prompt