Diese Anleitung zeigt dir, wie du eine Progressive Web App (PWA) für deine Website erstellst. Eine PWA verbessert die Benutzererfahrung, indem sie eine app-ähnliche Oberfläche und Offline-Unterstützung bietet.
Was ist eine Progressive Web App (PWA)?
Eine PWA ist eine moderne Webanwendung, die:
- Offline funktioniert dank Caching.
- Auf dem Home-Bildschirm installierbar ist.
- Schnell lädt und eine native App-Erfahrung bietet.
Schritt 1: manifest.json erstellen
Die manifest.json definiert die grundlegenden Metadaten der PWA wie Name, Icon und Theme-Farbe.
Erstelle eine Datei namens manifest.json im Root-Verzeichnis der Website:
{
"name": "Meine PWA",
"short_name": "PWA",
"description": "Eine progressive Web App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4caf50",
"icons": [
{
"src": "/icons/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icons/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"scope": "/",
"orientation": "portrait"
}Erklärung der wichtigsten Felder:
- name: Der vollständige Name der Anwendung.
- short_name: Kürzerer Name für den Home-Bildschirm.
- start_url: Startpunkt der App.
- display:
standalonesorgt dafür, dass die PWA wie eine native App läuft. - icons: Verweise auf App-Icons in verschiedenen Größen.
Verlinkung in der index.html:
<link rel="manifest" href="/manifest.json">Schritt 2: Service Worker erstellen
Der Service Worker ermöglicht Caching und Offline-Verfügbarkeit.
Erstelle eine Datei namens service-worker.js im Root-Verzeichnis der Website:
const CACHE_NAME = "pwa-cache-v1";
const urlsToCache = [
"/",
"/index.html",
"/manifest.json",
"/icons/icon-192x192.png",
"/icons/icon-512x512.png"
];
// Installationsphase
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
// Aktivierung und Cache-Bereinigung
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cache) => {
if (cache !== CACHE_NAME) {
return caches.delete(cache);
}
})
);
})
);
});
// Fetch Event für Offline-Unterstützung
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});Erklärung:
- Installationsphase: Ressourcen werden beim ersten Besuch gecacht.
- Aktivierung: Alte Caches werden gelöscht.
- Fetch-Event: Greift zuerst auf den Cache zu und nutzt nur das Netzwerk, wenn nötig.
Schritt 3: Service Worker im HTML registrieren
Registriere den Service Worker im <head> der index.html:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('Service Worker registriert'))
.catch((error) => console.error('Service Worker Fehler:', error));
}
</script>Schritt 4: HTTPS sicherstellen
Ein Service Worker funktioniert nur über eine gesicherte HTTPS-Verbindung. Stelle sicher, dass dein Webserver mit einem SSL-Zertifikat ausgestattet ist.
Schritt 5: Cache und Service Worker aktualisieren
- Browser-Cache leeren: Entwicklertools → Application → Clear Storage.
- Service Worker neu registrieren: Entwicklertools → Application → Service Worker → Unregister.
✅ Zusammenfassung
manifest.jsonfür die Metadaten.service-worker.jsfür Caching und Offline-Funktionen.- Verlinkung korrekt im HTML-Header.
- HTTPS verwenden.
Nach diesen Schritten sollte deine Website erfolgreich als PWA funktionieren. Ein Ergebnis kannst du unter https://shinrainet.de ansehen.
Schreibe eine Antwort