PWA: manifest.json, Service Worker, Meta-Tags und README-Hinweis hinzugefügt
This commit is contained in:
@@ -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
14
static/manifest.json
Normal 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
20
static/service-worker.js
Normal 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))
|
||||
);
|
||||
});
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user