Tobi/EUR-DZD_currency_converter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

debugging PWA

Browse source
This commit is contained in:
Tobi 2024-04-09 10:06:44 +02:00
parent c4629d777a
commit 153f15b1c0
1 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
index.html
View file

@ -96,14 +96,30 @@
padding: 20px;
}
</style>
<style>
/* Center the button horizontally */
#installButton {
display: block;
}
/* Show installation instructions when needed */
#install-instructions.show {
display: block;
}
</style>
</head>
<body>
<div id="install-instructions" style="text-align: center; padding: 20px;">
<div id="install-instructions" style="display: none; text-align: center; padding: 20px;">
<p>For the best experience, add this web app to your home screen:</p>
<p>1. Tap the <strong>Share</strong> button.</p>
<p>2. Tap <strong>Add to Home Screen</strong>.</p>
</div>
<button onclick="installApp()">Install App</button>
<button id="installButton" style="display: none; margin: 0 auto; padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer;">
Install App
</button>
<h1>Exchange Rate Calculator</h1>
<form>
@ -185,20 +201,27 @@
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the default installation prompt
event.preventDefault();
// Stash the event so it can be triggered later
deferredPrompt = event;
// Show installation instructions only if app is not already installed
if (!window.matchMedia('(display-mode: standalone)').matches) {
document.getElementById('install-instructions').style.display = 'block';
document.getElementById('install-instructions').classList.add('show');
document.getElementById('installButton').style.display = 'block';
}
});
function installApp() {
// Show the installation prompt when the user clicks the button
if (deferredPrompt) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
document.getElementById('install-instructions').style.display = 'none';
// App installed, hide installation instructions
document.getElementById('install-instructions').classList.remove('show');
document.getElementById('installButton').style.display = 'none';
}
deferredPrompt = null;
});
@ -206,6 +229,7 @@
}
</script>
</body>
</html>