Progressive Web Apps (oder kurz: „PWA“) gibt es schon länger – aber erst vor Kurzem habe ich begriffen, wie gering der Aufwand ist, eine beliebige Website schnell in eine PWA zu verwandeln.

PWAs erlauben es euch, eure Website / Web App mit folgenden Eigenschaften auszustatten:

  • Eure Besucher können die Seite auf ihrem Smartphone zu ihrem Homescreen hinzufügen.
  • Eure Besucher können die Inhalte eurer Seite auch bei schlechter oder gar keiner Internetverbindung nutzen.

Diese beiden Fähigkeiten kombiniert erlauben es mit etwas Kreativität, Apps zu schreiben, die sowohl im Browser als auch offline auf einem Telefon funktionieren. Schon vor geraumer Zeit hatte ich ein paar schlaue Ideen für den sinnvollen Einsatz von PWAs gesammelt. Vor allen Dingen die geringe Installationsgröße und die Installation ohne App Store machen diese Technologie für Gelegenheits-Apps sehr interessant.

Wie baut man schnell und unkompliziert eine PWA?

Im Endeffekt besteht eine komplette PWA in der einfachsten Ausführung aus drei Teilen:

  • Ein App-Manifest namens manifest.json, in der der Name und die Icons eurer App beschrieben werden (siehe Doku von MDN und Google),
  • einen Service-Worker namens sw.js, der die Offline-Strategie eurer App beschreibt (siehe Doku von MDN und Google),
  • und ein paar zusätzliche Angaben in eurem HTML, dass die manifest.json und die sw.js dem Browser bekannt macht.

Das ganze Setup ist so einfach, dass ich die praktische Umsetzung bzw. Kopiervorlagen für eine generische PWA in einem kleinen PWA-Starter-Kit zusammengefasst habe. Hier findet ihr Template-Schnipsel zum Kopieren, und bei Bedarf sogar ein kleines Tool, was diese Template-Schnipsel mit euren Daten ausfüllt.

Beim Bau des Service Workers kann man auch von PWA Builder komplexere Beispiele herunterladen, oder mit der Google Workbox sehr komfortabel Offline-Strategien programmieren.

Natürlich berührt man mit dieser Methode nur einen Teil der Möglichkeiten einer PWA. Gleichzeitig habt ihr so einen pragmatischen Start in das Thema „PWA“.

Wie testet man eine PWA?

Ob eure PWA funktioniert könnt ihr in zwei Browsern ganz einfach testen:

  • Auf eurem Desktop-Rechner könnt ihr Google Chrome verwenden. Startet dort den Inspektor (F12), öffnet den Tab „Audits“ und startet dort einen Audit.
  • Auf Android-Telefonen könnt ihr mit Firefox Mobile die Seite aufrufen. Wenn ihr alles richtig gemacht habt, müsste in der Adressleiste das Symbol für das Hinzufügen zum Homescreen auftauchen. (Siehe auch „Add to homescreen“ (A2HS))

Ein paar Beispiele für PWAs

Bei PWA.rocks gibt es eine größere Liste an schönen PWAs. Ich persönlich habe in den versprochenen fünf Minuten ein altes Uhren-Projekt von mir in eine PWA verwandelt.

Fazit

Die Integration einer PWA in eine bereits existierende Website ist äußerst unaufwändig, und bringt für euch und eure Besucher viele Vorteile.