elpatron/datecalc
1
0
Fork 0
Code Issues Pull Requests Activity

Add „Add to Homescreen“-Prompt

Browse Source
This commit is contained in:
elpatron
2025-07-23 18:19:06 +02:00
parent 9a57955902
commit f2e9827fcf
1 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
templates/index.html
View File

@@ -22,6 +22,48 @@
<link rel="stylesheet" href="/static/style.css">
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#2563eb">
<style>
.pwa-banner {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: #2563eb;
color: #fff;
padding: 1em 1.5em 1.2em 1.5em;
box-shadow: 0 -2px 12px #1e293b22;
z-index: 1000;
font-size: 1.08em;
text-align: center;
border-radius: 16px 16px 0 0;
margin: 0 auto;
max-width: 480px;
left: 50%;
transform: translateX(-50%);
}
.pwa-banner button {
background: #fff;
color: #2563eb;
border: none;
border-radius: 6px;
font-weight: 600;
padding: 0.5em 1.2em;
margin-left: 1em;
cursor: pointer;
}
.pwa-banner .close-btn {
background: none;
color: #fff;
border: none;
font-size: 1.3em;
position: absolute;
right: 1.2em;
top: 0.7em;
cursor: pointer;
}
@media (min-width: 600px) {
.pwa-banner { max-width: 420px; }
}
</style>
<script>
function setToday(id) {
const today = new Date().toISOString().split('T')[0];
@@ -38,6 +80,39 @@
document.addEventListener('DOMContentLoaded', function() {
openAccordion(parseInt("{{ active_idx|default(0) }}"));
});
let deferredPrompt;
function isIos() {
return /iphone|ipad|ipod/i.test(navigator.userAgent);
}
function isInStandaloneMode() {
return ('standalone' in window.navigator) && window.navigator.standalone;
}
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showPwaBanner('Installiere diese App für ein besseres Erlebnis!');
document.getElementById('pwa-install-btn').style.display = '';
});
function showPwaBanner(text) {
const banner = document.getElementById('pwa-banner');
document.getElementById('pwa-banner-text').textContent = text;
banner.style.display = 'block';
}
document.getElementById('pwa-install-btn').addEventListener('click', function() {
if (deferredPrompt) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then(() => {
deferredPrompt = null;
document.getElementById('pwa-banner').style.display = 'none';
});
}
});
// iOS Fallback
window.addEventListener('load', function() {
if (isIos() && !isInStandaloneMode()) {
showPwaBanner('Tipp: Über das Teilen-Menü → Zum Home-Bildschirm hinzufügen');
}
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/static/service-worker.js');
@@ -46,6 +121,11 @@
</script>
</head>
<body>
<div id="pwa-banner" class="pwa-banner">
<span id="pwa-banner-text"></span>
<button id="pwa-install-btn" style="display:none;">Installieren</button>
<button class="close-btn" onclick="document.getElementById('pwa-banner').style.display='none'">×</button>
</div>
<div class="container">
<h1>Elpatrons Datumsrechner</h1>
<div class="accordion">