PWA: manifest.json, Service Worker, Meta-Tags und README-Hinweis hinzugefügt

This commit is contained in:
2025-07-23 18:06:23 +02:00
parent 4c5371c07f
commit 9a57955902
4 changed files with 49 additions and 0 deletions

View File

@@ -97,6 +97,14 @@ Starte mit:
docker-compose up --build
```
## Progressive Web App (PWA)
Elpatrons Datumsrechner ist als PWA installierbar (z.B. auf Android/iOS-Homescreen oder Desktop). Die App funktioniert offline für die Startseite und statische Ressourcen, die Datumsberechnung bleibt serverseitig.
- Manifest und Service Worker sind integriert
- App-Icon und Theme-Color für Homescreen
- Installation über Browser-Menü ("Zum Startbildschirm hinzufügen")
## Entwicklung & Hinweise
- Die HTML-Templates liegen im Ordner `templates/` (Trennung von Logik und Darstellung)

14
static/manifest.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "Elpatrons Datumsrechner",
"short_name": "Datumsrechner",
"start_url": "/",
"display": "standalone",
"background_color": "#2563eb",
"theme_color": "#2563eb",
"description": "Open Source Web-App für Kalender- und Datumsberechnungen.",
"icons": [
{ "src": "/favicon.png", "sizes": "32x32", "type": "image/png" },
{ "src": "/favicon.ico", "sizes": "48x48 64x64 128x128 256x256", "type": "image/x-icon" },
{ "src": "/logo.svg", "sizes": "any", "type": "image/svg+xml" }
]
}

20
static/service-worker.js Normal file
View File

@@ -0,0 +1,20 @@
const CACHE_NAME = 'datumsrechner-cache-v1';
const urlsToCache = [
'/',
'/static/style.css',
'/favicon.ico',
'/favicon.png',
'/logo.svg',
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});

View File

@@ -20,6 +20,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/static/style.css">
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#2563eb">
<script>
function setToday(id) {
const today = new Date().toISOString().split('T')[0];
@@ -36,6 +38,11 @@
document.addEventListener('DOMContentLoaded', function() {
openAccordion(parseInt("{{ active_idx|default(0) }}"));
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/static/service-worker.js');
});
}
</script>
</head>
<body>