Website als PWA installierbar machen

Website für Smartphones in eine PWA verwandeln

Georg Kaser // Progressive Web Apps

Mit dieser Anleitung können Sie jede Website ganz einfach in eine Progressive Web App (PWA) verwandeln, die dann am Handy installiert werden kann.

Mit dieser Anleitung können Sie jede Website ganz einfach in eine Progressive Web App (PWA) verwandeln, die dann am Handy installiert werden kann.

Viele Normal-User wissen es wahrscheinlich noch nicht - aber man kann eine mobile Website so bauen, dass man sie am Handy "installieren" kann und sie sich fast so wie eine native App aus dem App-Store verhält. Oft kann das die Entwicklung einer teuren nativen App überflüssig machen, weil diese technischen Möglichkeiten bereits die gewünschten Anforderungen erfüllen.

Progressive Web App (PWA) - Schon mal gehört, aber was ist das?

Unter dem Begriff "Progressive Web App" werden Techniken der modernen Web-Entwicklung mit den Möglichkeiten die bisher nur nativen Apps vorbehalten waren vereint. Es handelt sich dabei im wesentlichen um eine "normale" (natürlich responsive, also auch für mobile Darstellung optimierte) Website mit dem wesentlichen Unterschied, dass im Hintergrund ein sog. Service Worker läuft, der auch ausgeführt wird, wenn die Seite z.B. gar nicht geöffnet ist. Das bietet ungeahnte Möglichkeiten, die sonst nur in nativen Apps zu finden sind - z.B. Offline Funktionalität, Hintergrund Aktualisierungen oder Push-Notifications, Geofencing (auslösen einer Aktion abhängig vom aktuellen Standort), die Konzernen wie Apple, die einen großen Teil ihrer Einnahmen über ihren App-Store generieren, das Fürchten lehren. PWAs werden hauptsächlich von Google stark vorangetrieben - alleine schon deswegen kann man hier von einem großen Potential ausgehen.

Die eigene Website mit grundlegenden PWA Features ausrüsten

Ich möchte Ihnen hier in drei Schritten zeigen, wie man relativ einfach eine bestehende Website als PWA am Smartphone oder im Browser installierbar macht. Grundvoraussetzung das die nachfolgenden Schritte funktionieren sind:

  • Eine responsive Website (Mehr dazu hier)
  • Eine https Verbindung (sollte wegen DSGVO bereits Standard sein)
  • Einen Text-Editor und etwas Geduld ;)

Als Beispiel dient meine private Foto-Blog Seite https://geor.gs/

PWA - Schritt 1: Die nötigen Icons erstellen und einbinden

Eine PWA braucht ein Icon. Da es verschiedene Systeme und Aufslösungen gibt, braucht es verschiedene Icons:

  • 48 x 48 Pixel (Android mdpi)
  • 96 x 96 Pixel (Android xhdpi
  • 180 x 180 Pixel (iOS)
  • 192 x 192 Pixel (Android xxxhdpi)
  • 512 x 512 Pixel (Android Splash Screen)

Es gibt noch andere Größen, diese kann man leicht im Netz nachschlagen. Ich beschränke mich hier auf diese Größen.

Diese Icons müssen Sie jetzt auf den Server hochladen und im Quellcode der Seite (im Head Bereich) einbinden:

<link rel="apple-touch-icon" href="/assets/theme/img/icons/georgs-180x180.png" type="image/png" />
<link rel="icon" href="/assets/theme/img/icons/georgs-192x192.png" type="image/png" />
<link rel="fav-icon" href="/assets/theme/img/icons/georgs-48x48.png" type="image/png" />

Zusätzlich sollte man für den Apple Safari in dem Meta-Tags noch folgende Tags einfügen. Der erste Tag ist für den App-Titel zuständig (ersetzen Sie dabei den App Titel mit dem Namen Ihrer PWA), der zweite blendet die Bedienelemente des Browsers aus:

<meta name="apple-mobile-web-app-title" content="App Titel">
<meta name="apple-mobile-web-app-capable" content="yes">

PWA - Schritt 2: Manifest erstellen und einbinden

Erstellen Sie eine Datei mit dem Namen manifest.json und laden Sie diese auf Ihren Server hoch. Kopieren Sie die folgenden Zeilen in diese Datei und passen Sie die Werte an Ihre PWA an (vergessen Sie auch die Anpassung der Pfade nicht):

{
    "description": "geor.gs - Georgs Fototagebuch mit (fast) täglich neuen Fotos",
    "display": "standalone",
    "name": "geor.gs - Georgs Fototagebuch",
    "orientation": "portrait",
    "short_name": "geor.gs",
    "theme_color": "#ffffff",
    "scope": "/",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "/assets/theme/img/icons/georgs-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/assets/theme/img/icons/georgs-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/assets/theme/img/icons/georgs-180x180.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/assets/theme/img/icons/georgs-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/theme/img/icons/georgs-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "start_url": "/"
}

Diese verlinken Sie dann wieder im Head-Bereich Ihrer PWA mit dem folgenden Tag:

<link rel="manifest" href="/manifest.json" type="application/json" >

PWA - Schritt 3: Den Service Worker erstellen und einbinden

Hier ein Beispiel Service Worker. Passen Sie im Code den Pfad zu Ihrer PWA an, die gezeigt werden soll, wenn die App offline ist:

self.addEventListener("install", function (event) {
    var offlinePage = new Request("offline.html");
    event.waitUntil(
        fetch(offlinePage).then(function (response) {
            return caches.open("pwa-offline").then(function (cache) {
                console.log("Offline Page während Install gecached" + response.url);
                return cache.put(offlinePage, response);
            });
        }));
});

self.addEventListener("fetch", function (event) {
    event.respondWith(
        fetch(event.request).catch(function (error) {
            console.error("Netzwerkanfragen fehlgeschlagen. Liefere Offline Page " + error);
            return caches.open("pwa-offline").then(function (cache) {
                return cache.match("offline.html");
            });
        }));
});

self.addEventListener("refreshOffline", function (response) {
    return caches.open("pwa-offline").then(function (cache) {
        console.log("Offline Seite aktualisiert vom refreshOffline event: " + response.url);
        return cache.put(offlinePage, response);
    });
});

self.addEventListener("notificationclose", function (e) {
    var notification = e.notification;
    var primaryKey = notification.data.primaryKey;

    console.log("Closed notification: " + primaryKey);
});

Jetzt müssen Sie das Manifest nur noch in der Seite einbinden, am besten mit einer Abfrage, ob der Browser überhaupt eine Service Worker API hat. Fügen Sie dazu folgenden Quellcode auf Ihrer PWA ein und passen Sie wiederum die Pfade entsprechend an:

<script>
    if ("serviceWorker" in navigator) {
        window.addEventListener("load", function() {
            navigator.serviceWorker.register( "/service-worker.js").then(
                function(success) {
                    console.log( "ServiceWorker wurde erfolgreich registriert.", success);
                }
                ).catch(
                function(error) {
                    console.log( "ServiceWorker konnte leider nicht registriert werden.", error);
                }
            );
        });
    }
</script>

Wenn Sie alles richtig gemacht haben, sollten Ihre Website eine funktionierende PWA sein.

Falls Sie's alleine nicht schaffen - natürlich wandle ich gerne auch Ihre Seite in ein PWA um. Nutzen Sie dafür das Anfrageformular.

Gutes Gelingen!

Website für Smartphones in eine PWA verwandeln
+49 157 84925965 Angebot anfordern
Logo

Ihr REDAXO Web-Entwickler aus Worms für Deutschland, Österreich und die Schweiz!
+49 157 84925965

Angebot anfordern