Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
  • Apps
Denis Potschien 6. Dezember 2017

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

Native Apps für Android- und iOS-Geräte haben in vie­ler­lei Hinsicht gro­ße Vorteile gegen­über per HTML5 und JavaScript ent­wi­ckel­ter Webanwendungen.

So kön­nen nati­ve Apps auf Kamera, Dateisystem und ande­re Gerätefeatures zugrei­fen, was Webapps nur bedingt kön­nen. Doch immer mehr Funktionen, die bis­lang nati­ven Apps vor­be­hal­ten waren, las­sen sich mitt­ler­wei­le auch per JavaScript abbil­den, so dass sich Webapps und nati­ve Apps immer mehr annä­hern. Sogenannte Progressive Web Apps (PWA) ste­hen klas­si­schen Apps fast in nichts mehr nach.

HTML5 und CSS3 waren nur der Anfang

Mit HTML5 hat die Auszeichnungssprache fürs Web einen Quantensprung hin­ge­legt. Neben einer bes­se­ren Semantik war vor allem die Unterstützung des mobi­len Internets ein Ziel von HTML5.

So wur­den spe­zi­el­le Eingabetypen für Formulare ein­ge­führt, wel­che bei Smartphones und Tablets pas­sen­de Tastaturen ein­blen­den – zum Beispiel für E-Mail-Adressen und nume­ri­sche Eingaben.

Unterschiedliche Tastaturen je nach Eingabefeld

Und die Animationsmöglichkeiten von CSS3 machen es mög­lich, res­sour­cen­spa­rend Bewegung in eine Website zu brin­gen, ohne auf JavaScript set­zen zu müs­sen.
Immer mehr JavaScript-APIs für Unterstützung mobi­ler Geräte
Neben Usability und Gestaltung sind es vor allem aber die vie­len mobi­len Features, die eine App erst inter­es­sant machen. Hier wur­den in den letz­ten Jahren zahl­rei­che JavaScript-APIs ein­ge­führt, die spe­zi­ell 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ög­lich machen. Die Vibration- und Battery-Status-API sor­gen sogar dafür, Vibrationsalarme ein­rich­ten und den aktu­el­len Akkustand abfra­gen zu kön­nen.

Wer sich ein­mal den aktu­el­len Stand der diver­sen JavaScript-APIs anschaut, wird fest­stel­len, dass eine Vielzahl der APIs spe­zi­ell für mobi­le Endgeräte gedacht ist.

Benachrichtigungen und Hintergrunddienste einrichten

Mit der Notification-API ist es bereits län­ger mög­lich, Benachrichtigungen zu erstel­len. Hierfür ist es aller­dings immer nötig, dass die Website, über wel­che die Benachrichtigung kommt, im Browser geöff­net ist.

Durch Website aus­ge­führ­te Benachrichtigung

Mit der neu­en Push-API und der Service-Worker-API ist es nicht mehr not­wen­dig, dass die ent­spre­chen­de Website geöff­net ist. Über die Service-Worker-API wird im Browser ein JavaScript regis­triert, wel­ches unab­hän­gig von einer Website aus­ge­führt wird. Das Ganze ist ver­gleich­bar mit Hintergrunddiensten nati­ver Mobilapps.

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

Das Beispiel regis­triert die Datei „app.js“ als Service-Worker. Diese Datei mit dem dar­in ent­hal­te­nen Script wird unab­hän­gig von der Website aus­ge­führt. Dies geschieht über einen Dienst der Browsers, der immer im Hintergrund läuft. Über die­se Datei las­sen sich bei­spiels­wei­se Push-Benachrichtigungen ein­rich­ten und aus­füh­ren.

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

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

});

Eine ein­fa­che Implementierung der Push-API ist mit der Bibliothek Push.js mög­lich. Hier sind auch Fallback-Lösungen für älte­re Browser vor­han­den, sodass du sorg­los dei­ne Benachrichtigungen ein­stel­len kannst.

Mit den Service-Workern lädst du zudem alle benö­tig­ten Dateien für die Offline-Nutzung her­un­ter. je nach Nutzung der App ist die­se im Idealfall dann auch ohne Internetverbindung nutz­bar.

Web-App-Manifest: Vollbildmodus und Icon auf Startbildschirm

Über das Web-App-Manifest sorgst du letz­ten Endes dafür, dass das Look-and-Feel dei­ner Webapp sich nicht mehr von nati­ven Apps unter­schei­det.

Dabei han­delt es sich um eine JSON-Datei, die im HTML-Dokument ein­ge­bun­den wird.

Über die Datei wird dann unter ande­rem fest­ge­legt, wie die Webapp auf dem Startbildschirm dar­ge­stellt wer­den soll. So wer­den ein Name, ein Kurzname sowie die Icons in ver­schie­de­nen Größen defi­niert.

 "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ög­lich, eine abwei­chen­de Start-URL anzu­ge­ben, die immer dann gela­den wird, wenn du die Webapp über die Startseite auf­rufst.

Mit der Eigenschaft “dis­play” ist es zudem mög­lich, die Webapp ganz ohne Browserlemente wie Adresszeile wie­der­zu­ge­ben.

"display": "standalone";

Auch eine Hintergrundfarbe kannst du mit „background_color“ ange­ben. Und wer will, kann die Ausgabe der App an eine bestimm­te Geräteorientierung bin­den. Per „ori­en­ta­ti­on“ sind die Werte „land­s­cape“ und „por­trait“ mög­lich.

Hast du sowohl einen Service-Worker ein­ge­rich­tet als auch ein Web-App-Manifest hin­ter­legt, blen­det der mobi­le Chrome beim Laden der Seite einen Badge am unte­ren Seitenrand an, über den du die Webapp auf dem Startbildschirm plat­zie­ren kannst.

Badge zum Installieren einer Webapp

Der Badge wird jedoch erst ein­ge­blen­det, wenn du eine Website min­des­tens zwei­mal an zwei ver­schie­de­nen Tagen inner­halb von zwei Wochen besucht hast.

Spätestens jetzt ist dei­ne Webapp nicht mehr von ande­ren nati­ven Apps zu unter­schei­den. Denn beim Aufruf über den Startbildschirm sieht man der Webapp nicht mehr an, dass sie in einem Browser gela­den wur­de. Außerdem sind vie­le Features wie Benachrichtigungen und ande­re Gerätefunktionen mög­lich.

Eine wei­te­re Voraussetzung muss jedoch noch erfüllt sein: Deine Webapp muss über HTTPS lau­fen, was mitt­ler­wei­le aber ohne­hin für vie­le JavaScript-APIs gilt.

Lighthouse-Erweiterung für Chrome

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

Lighthouse-Erweiterung

So prüfst du damit zum Beispiel, ob dei­ne Webapp alle Kriterien erfüllt, um zum Startbildschirm hin­zu­ge­fügt zu wer­den.

Denis Potschien

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.