manifest.json einer PWA

Um Progressive Web Apps auf einem Endgerät zu installieren wird eine manifest.json-Datei benötigt, die im head-Bereich der Startseite unserer PWA verlinkt sein muss.

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

Die Manifest-Datei enthält alle Informationen über die App, die benötigt werden, um die PWA erfolgreich zu installieren. Dazu gehören Name, App-Icons und der Pfad zur Startdatei unserer PWA. Hier ein Beispiel:

{
    "name": "PWA-DEMO",
    "short_name": "PWA-DEMO",
    "lang": "de-DE",
    "start_url": "/index.html",
    "display": "standalone",
    "theme_color": "#e30613",
    "background_color": "#ffffff",
    "icons": [
      {
        "src": "pwa-demo.png",
        "sizes": "512x512",
        "type": "image\/png"
      },
        {
        "src": "pwa-demo-smaller.png",
        "sizes": "192x192",
        "type": "image\/png"
      }
    ]
}
    

"display": "standalone" gibt hierbei an, dass unsere App wie eine native App angezeigt werden soll. Die App wird dann in einem extra Browserfenster geöffnet , das aber keine Browser-Bedienelemente enthält. Die App wirkt dann im Prinzip genauso wie eine gewöhnliche native App.

PWA mit Chrome "nativ" installieren

Um eine PWA, die im Chrome aufgerufen wurde, als "native" App zum Beispiel auf einem Windows-Rechner zu installieren, reicht eine einfache Manifest-Datei noch nicht aus. Wir müssen zusätzlich einen Service-Worker implementieren.
Grundlagen zum Einbinden eines Service-Workers: Service Worker.
Das Service-Worker-Skript, das wir hier service-worker-pwa.js nennen, kann folgendermaßen in die HTML-Startseite eingbunden werden:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker-pwa.js');
}
    

In unserem Service-Worker (service-worker-pwa.js) müssen lediglich zwei EventListener registriert werden.

self.addEventListener('fetch', function(e){
});


self.addEventListener('install', function(event) {
});
    

Das genügt bereits zum einfachen Installieren der App. Wichtig ist daran zu denken, dass unsere App auf einem Server, der SSL nutzt, gehostet wird (zum Testen reicht aber auch ein lokaler Server ohne SSL).

Im Chrome unter Windows findet sich nun im Menü der Punkt "PWA-DEMO installieren". Nach dem Installieren, wird die App direkt gestartet.

Sinnvoller wäre es aber, die beiden Events im Service-Worker-Skript wirklich zu nutzen. Dort können wir zum Beispiel alle Dateien unserer App cachen. Im Moment werden alle Daten, die unsere App benötigt noch direkt aus dem Internet geladen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project