Steffen Jahr Thinktecture AG

Wer sich die Mühe macht, seine Anwendung um Features einer PWA zu erweitern, kann dem Benutzer einen echten Mehrwert bieten.

Cross-Plattform-Applikationen sind heute aus der App-Entwicklung nicht mehr wegzudenken. Längst ist es recht einfach geworden, solche Applikationen zu erstellen und seine Anwendung auf die unterschiedlichen Systeme zu verteilen. Diese Applikationen haben allerdings den Nachteil, dass die Webanwendung in einen nativen Container eingebettet sein muss, um als App auf dem Endgerät installiert werden zu können. Doch was wäre, wenn es anders wäre?

Im Frühjahr 2015 wurde im Umfeld von Google der Begriff „Progressive Web Apps“ geprägt. Er beschreibt eine Art von Applikationen, die installierbar und offline nutzbar sind, Push-Benachrichtigungen empfangen können und ohne nativen Container auskommen. Klingt zu schön, um wahr zu sein? Dieser Artikel soll einen kleinen Einblick in die Welt der PWAs geben und zeigen, welche Features zu einer PWA gehören.

Progressive Web Apps

PWAs sind Webanwendungen, die eine Reihe von Eigenschaften in sich vereinen. Um das zu erreichen, setzen PWAs auf bewährte, aber dennoch aktuelle Technologien wie HTML5, CSS3 und JavaScript. Die Eigenschaften und Features sind wie folgt definiert:

  • Progressive: „Progressive“ bedeutet, dass eine Anwendung progressiv – also nach und nach – mit Features erweitert wird, sofern der Browser sie unterstützt. Da PWAs mit Standard-APIs arbeiten, kann einfach erkannt werden, welche Features der Browser umfasst, um sie entsprechend zu aktivieren. Steht dem Browser ein Feature nicht zur Verfügung, wird das dem Benutzer mitgeteilt. Dadurch können PWAs auch in älteren Browsern mit eingeschränktem Funktionsumfang laufen.
  • Responsive: Responsive Anwendungen besitzen ein Layout für alle Form- und Gerätefaktoren – unabhängig davon, ob es sich um mobile oder Desktopgeräte handelt.
  • Installable: Durch die Nutzung eines Service Workers, den wir uns im weiteren Verlauf genauer ansehen werden, und eines Manifests zur Anwendung ist es möglich, die Applikation auf einem Gerät direkt aus dem Browser zu installieren – ohne Umweg über einen App Store.
  • Connectivity Independent: Die PWA hält ihre Daten offline und kann auch ohne Internet genutzt werden.
  • Safe: PWAs sind nur mittels HTTPS nutzbar – einzige Ausnahme bietet hier localhost im Zeitraum der Entwicklung.
  • Discoverable: Damit eine Anwendung von einer Webseite unterschieden werden kann, steht mit der manifest.json eine Datei zur Verfügung, die die Anwendung um Metadaten erweitert und sie für den Browser und Suchmaschinen als App identifizierbar macht.
  • App-like: Um ein natives Anwendungsgefühl beim Benutzer zu erzeugen, werden APIs eingesetzt, die auf die nativen Ressourcen des Geräts zurückgreifen, z. B. auf die Kamera. Um auch der Bedienung der Anwendung einen nativen Touch zu verleihen, werden zudem moderne Gestaltungselemente wie CSS3 und aktuelle Technologie wie SPAs (siehe Kasten: „Single-Page Applications“) eingebracht.
  • Fresh: Durch Einsatz des Sync-APIs können die Daten abhängig von der Verbindungsgeschwindigkeit, dem Batteriestatus und dem Standort mit dem Server synchronisiert werden. Damit wird die Anwendung immer mit den neusten Daten versorgt.
  • Re-engageable: Mittels Push-API und nativen Notifications können Benutzer zur Anwendung zurückgeholt und es kann auf deren Aktionen reagiert werden.
  • Linkable: PWAs können durch einen normalen URL geteilt werden, ohne dass eine vorherige Installation nötig ist, da es keinen Unterschied zwischen installierter und Webversion gibt.

Eine PWA versucht, möglichst viele dieser Eigenschaften zu erfüllen, um damit dem Benutzer das bestmögliche Gefühl bei der Nutzung der Anwendung zu geben und einer nativen App möglichst nahe zu kommen.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 4.17 - "Ionic"

Alle Infos zum Heft
579797556Einführung in die Entwicklung von Progressive Web Apps
X
- Gib Deinen Standort ein -
- or -