Progressive Web Apps (PWAs) sind Webanwendungen, die moderne Webtechnologien nutzen, um eine App-ähnliche Erfahrung auf verschiedenen Geräten und Plattformen zu bieten. PWAs kombinieren das Beste aus Webseiten und nativen Apps
Das Erstellen und Einbetten einer Progressive Web App (PWA) kann in mehrere Schritte unterteilt werden:
Ein Manifest ist eine JSON-Datei, die Metadaten über die App enthält. Es definiert grundlegende Eigenschaften wie Name, Beschreibung, Start-URL, Symbole usw. Hier ist ein einfaches Beispiel für ein Manifest:
{
"name": "Meine PWA",
"short_name": "PWA",
"description": "Eine fantastische Progressive Web App",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196f3",
"icons": [
{
"src": "/icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Der Service Worker ist ein JavaScript-Skript, das im Hintergrund läuft und Netzwerkanforderungen abfangen kann, z.B. um eine Offlinefunktionalität zu ermöglichen.
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/css/styles.css',
'/img/banner-7.jpg',
'/img/logo.png',
// Füge hier weitere Dateien hinzu, die gecached werden sollen
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Im Header müssen jetzt noch ein Script und eine Verlinkung hinzugefügt werden.
<link rel="manifest" href="/manifest.json">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>