• Apps

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

So können native Apps auf Kamera, Dateisystem und andere Gerätefeatures zugreifen, was Webapps nur bedingt können. Doch immer mehr Funktionen, die bislang nativen Apps vorbehalten waren, lassen sich mittlerweile auch per JavaScript abbilden, so dass sich Webapps und native Apps immer mehr annähern. Sogenannte Progressive Web Apps (PWA) stehen klassischen Apps fast in nichts mehr nach.

HTML5 und CSS3 waren nur der Anfang

Mit HTML5 hat die Auszeichnungssprache fürs Web einen Quantensprung hingelegt. Neben einer besseren Semantik war vor allem die Unterstützung des mobilen Internets ein Ziel von HTML5.

So wurden spezielle Eingabetypen für Formulare eingeführt, welche bei Smartphones und Tablets passende Tastaturen einblenden – zum Beispiel für E-Mail-Adressen und numerische Eingaben.

Unterschiedliche Tastaturen je nach Eingabefeld

Und die Animationsmöglichkeiten von CSS3 machen es möglich, ressourcensparend Bewegung in eine Website zu bringen, ohne auf JavaScript setzen zu müssen.
Immer mehr JavaScript-APIs für Unterstützung mobiler Geräte
Neben Usability und Gestaltung sind es vor allem aber die vielen mobilen Features, die eine App erst interessant machen. Hier wurden in den letzten Jahren zahlreiche JavaScript-APIs eingeführt, die speziell für Mobilgeräte gedacht sind.

Dazu gehört die Geolocation-API, die Zugriff auf die Standortinformationen eines Gerätes hat, sowie die Device-Orientation-API, mit der du auf die Geräteorientierung zugreifst.

Derzeit noch in der Entwicklung sind APIs, die Audio- und Video-Streaming sowie -Capturing möglich machen. Die Vibration- und Battery-Status-API sorgen sogar dafür, Vibrationsalarme einrichten und den aktuellen Akkustand abfragen zu können.

Wer sich einmal den aktuellen Stand der diversen JavaScript-APIs anschaut, wird feststellen, dass eine Vielzahl der APIs speziell für mobile Endgeräte gedacht ist.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Benachrichtigungen und Hintergrunddienste einrichten

Mit der Notification-API ist es bereits länger möglich, Benachrichtigungen zu erstellen. Hierfür ist es allerdings immer nötig, dass die Website, über welche die Benachrichtigung kommt, im Browser geöffnet ist.

Durch Website ausgeführte Benachrichtigung

Mit der neuen Push-API und der Service-Worker-API ist es nicht mehr notwendig, dass die entsprechende Website geöffnet ist. Über die Service-Worker-API wird im Browser ein JavaScript registriert, welches unabhängig von einer Website ausgeführt wird. Das Ganze ist vergleichbar mit Hintergrunddiensten nativer Mobilapps.

navigator.serviceWorker.register(”/app.js”)

Das Beispiel registriert die Datei „app.js“ als Service-Worker. Diese Datei mit dem darin enthaltenen Script wird unabhängig von der Website ausgeführt. Dies geschieht über einen Dienst der Browsers, der immer im Hintergrund läuft. Über diese Datei lassen sich beispielsweise Push-Benachrichtigungen einrichten und ausführen.

self.addEventListener("push", function(e) {
    const optionen = {
    body: "Text",
    icon: "/icon.png",
    badge: "/badge.png"
  };

  event.waitUntil(self.registration.showNotification("Titel", optionen));

});

Eine einfache Implementierung der Push-API ist mit der Bibliothek Push.js möglich. Hier sind auch Fallback-Lösungen für ältere Browser vorhanden, sodass du sorglos deine Benachrichtigungen einstellen kannst.

Mit den Service-Workern lädst du zudem alle benötigten Dateien für die Offline-Nutzung herunter. je nach Nutzung der App ist diese im Idealfall dann auch ohne Internetverbindung nutzbar.

Web-App-Manifest: Vollbildmodus und Icon auf Startbildschirm

Über das Web-App-Manifest sorgst du letzten Endes dafür, dass das Look-and-Feel deiner Webapp sich nicht mehr von nativen Apps unterscheidet.

Dabei handelt es sich um eine JSON-Datei, die im HTML-Dokument eingebunden wird.

Über die Datei wird dann unter anderem festgelegt, wie die Webapp auf dem Startbildschirm dargestellt werden soll. So werden ein Name, ein Kurzname sowie die Icons in verschiedenen Größen definiert.

 "short_name": "Meine App",
  "name": "Meine ganz großartige App",
  "icons": [
    {
      "src": "icon.png",
      "type": "image/png",
      "sizes": "48x48"
    }
 ],
  "start_url": "app.html"
 }

Über „start_url“ ist es zudem möglich, eine abweichende Start-URL anzugeben, die immer dann geladen wird, wenn du die Webapp über die Startseite aufrufst.

Mit der Eigenschaft “display” ist es zudem möglich, die Webapp ganz ohne Browserlemente wie Adresszeile wiederzugeben.

"display": "standalone";

Auch eine Hintergrundfarbe kannst du mit „background_color“ angeben. Und wer will, kann die Ausgabe der App an eine bestimmte Geräteorientierung binden. Per „orientation“ sind die Werte „landscape“ und „portrait“ möglich.

Hast du sowohl einen Service-Worker eingerichtet als auch ein Web-App-Manifest hinterlegt, blendet der mobile Chrome beim Laden der Seite einen Badge am unteren Seitenrand an, über den du die Webapp auf dem Startbildschirm platzieren kannst.

Badge zum Installieren einer Webapp

Der Badge wird jedoch erst eingeblendet, wenn du eine Website mindestens zweimal an zwei verschiedenen Tagen innerhalb von zwei Wochen besucht hast.

Spätestens jetzt ist deine Webapp nicht mehr von anderen nativen Apps zu unterscheiden. Denn beim Aufruf über den Startbildschirm sieht man der Webapp nicht mehr an, dass sie in einem Browser geladen wurde. Außerdem sind viele Features wie Benachrichtigungen und andere Gerätefunktionen möglich.

Eine weitere Voraussetzung muss jedoch noch erfüllt sein: Deine Webapp muss über HTTPS laufen, was mittlerweile aber ohnehin für viele JavaScript-APIs gilt.

Lighthouse-Erweiterung für Chrome

Mit der Erweiterung Lighthouse stellt dir Chrome ein Tool zur Verfügung, welches dir bei der Entwicklung von Progressive Web Apps hilft.

Lighthouse-Erweiterung

So prüfst du damit zum Beispiel, ob deine Webapp alle Kriterien erfüllt, um zum Startbildschirm hinzugefügt zu werden.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz