qciganoandClaude Sonnet 5
4aee6c7b98
Die Icons/Manifeste waren schon vorbereitet, aber es gab keinen echten Weg, die Installation auch zu STARTEN, ohne das kleine, leicht zu übersehende Icon im Browser selbst zu suchen. Jetzt: - Ein Service Worker (public/sw.js) ist Voraussetzung dafür, dass Browser die Seite überhaupt als "installierbare App" erkennen. Bewusst minimal gehalten: strikt "network-first" — bei bestehender Verbindung wird IMMER zuerst das echte Netzwerk gefragt, der Cache dient nur als Rückfalllösung, wenn wirklich keine Verbindung besteht. Dadurch besteht KEIN Risiko, dass der Adminbereich veraltete Inhalte zeigt, während man online ist — als Bonus funktionieren bereits besuchte Seiten aber auch kurz offline (mit echtem Offline-Test geprüft). - Neuer "Installieren"-Button direkt in der Kopfzeile (Hauptseite) bzw. unten rechts (Adminbereich) — erscheint automatisch, sobald der Browser eine Installation wirklich anbietet, verschwindet danach wieder bzw. bleibt komplett versteckt, wenn schon als App installiert. Ein Klick reicht, kein Suchen im Browser-Menü mehr nötig. - Beide Bereiche (Hauptseite + Admin) nutzen dieselben, bereits vorhandenen Logo-Icons/Manifeste — landet also mit dem echten VanVan-Logo auf dem Startbildschirm/Desktop. Co-Authored-By: Claude Sonnet 5 <[email protected]>
42 lines
1.8 KiB
JavaScript
42 lines
1.8 KiB
JavaScript
// Minimaler, bewusst zurückhaltender Service Worker — NICHT für "volles Offline", sondern
|
|
// hauptsächlich damit der Browser die Seite überhaupt als installierbare App erkennt (die
|
|
// meisten Browser verlangen dafür einen registrierten Service Worker mit echtem
|
|
// fetch-Handler) und als kleiner Bonus: falls doch mal keine Verbindung besteht, können bereits
|
|
// besuchte Seiten trotzdem noch geöffnet werden.
|
|
//
|
|
// WICHTIG: strikt "network-first" — bei bestehender Verbindung wird IMMER zuerst das echte
|
|
// Netzwerk gefragt, der Cache dient nur als Rückfalllösung für den Offline-Fall. Das ist bewusst
|
|
// so gewählt, damit z.B. der Adminbereich (Sveltia CMS) NIE veraltete Inhalte aus dem Cache
|
|
// zeigt, solange eine Internetverbindung besteht.
|
|
|
|
const CACHE_NAME = "vandiy-shell-v1";
|
|
|
|
self.addEventListener("install", () => {
|
|
self.skipWaiting();
|
|
});
|
|
|
|
self.addEventListener("activate", (event) => {
|
|
event.waitUntil(
|
|
caches.keys().then((keys) =>
|
|
Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))
|
|
).then(() => self.clients.claim())
|
|
);
|
|
});
|
|
|
|
self.addEventListener("fetch", (event) => {
|
|
if (event.request.method !== "GET") return;
|
|
// Cross-Origin-Requests (Google Fonts, PayPal-SDK, GitHub-API des Admin-Bereichs, ...)
|
|
// unangetastet lassen — nur die eigene Seite selbst wird für den Offline-Fall vorgehalten.
|
|
if (new URL(event.request.url).origin !== self.location.origin) return;
|
|
|
|
event.respondWith(
|
|
fetch(event.request)
|
|
.then((response) => {
|
|
const clone = response.clone();
|
|
caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone)).catch(() => {});
|
|
return response;
|
|
})
|
|
.catch(() => caches.match(event.request).then((cached) => cached || Response.error()))
|
|
);
|
|
});
|