Progressive Web Apps - PWA

18.01.2017

Opten Rocks 38 Severin d'Heureuse

TL;DR

Von Google im Jahr 2015 vorgestellt sind Progressive Web Apps zum Schlagwort von 2016 geworden. Die einfache Entwicklung von Progressive Web Apps mit Kenntnissen in CSS, HTML und JavaScript und der unmittelbaren Verbesserung der User Experience haben die Aufmerksamkeit vieler Entwickler auf sich gezogen. Progressive Web Apps profitieren von den Vorteilen des viel grösseren Web-Ökosystems mit seinen Plugins und seiner Community im Vergleich zu dessen Pendant in der nativen Welt. Wir bei der OPTEN AG sind überzeugt, dass Progressive Web Apps die Zukunft von Applikationen, ob nun auf dem Mobile oder Desktop, sind.

Doch was sind Progressive Web Apps genau?

Nicht wie hybride oder native Applikationen, die man über einen App Store zur Verfügung stellt, sind Progressive Web Apps grundsätzlich nur Webseiten. Wenn ein Benutzer diese Webseite genügend oft aufruft und sie spezifischen Qualitätskriterien entspricht (zum Beispiel, dass die Seite auch Offline läuft oder Metadaten für den Homescreen zur Verfügung stehen), beginnt der Browser die Webseite als App zu behandeln. Das bedeutet zum Beispiel, dass der Browser nach der Freigabe für Push-Notifications oder dem Hinzufügen der App zum Homescreen fragt.

Ausserdem verfügen Progressive Web Apps über einige spezifische Attribute wie:

  • Progressive: Jeder Benutzer hat die Möglichkeit, die Progressive Web App zu benutzen. Es spielt keine Rolle mit welchem Browser oder welchem Gerät er auf die Progressive Web App zugreift.
  • Responsive: Eine Progressive Web App ist optimiert für jede Art von Bildschirm: Desktop, Tablet, Mobile und was auch immer als nächstes kommt. Schlussendlich sind PWAs ja nur Webseiten mit erweiterter Funktionalität und können somit mit den bestehenden responsiven Möglichkeiten entwickelt werden.
  • Verbindungsunabhängig: Mithilfe eines sogenannten Service Worker, deren Implementierung eine der Anforderungen für ein Progressive Web App ist, können gecachte Inhalte offline und bei schlechter Verbindungsqualität schneller geladen werden.
  • App-Like: Die Progressive Web App fühlt sich für den Benutzer an wie eine native App (App-Like Interaktionen und Navigation).
  • Auf dem neusten Stand: Nie mehr ein Update verpassen! Danke dem Service Worker Update Prozess ist die Progressive Web App immer auf dem neusten Stand.
  • Sicher: Eine sichere https Verbindung ist ebenfalls eine Voraussetzung für eine Progressive Web App.
  • Auffindbar: Da Progressive Web Apps normale Webseiten sind, die über eine URL aufgerufen werden können, werden Sie mitsamt ihrer Inhalte auch von Suchmaschinen indexiert.
  • Re-Engagement: Mithilfe von Push Notifikationen kann der Benutzer re-engaged werden.
  • Installierbar: Erlaubt es den Benutzern die App dem Homescreen hinzuzufügen ohne dass sie diese zuerst im App Store suchen müssen.
  • Verlinkbar: Zum Teilen der App brauchen die Benutzer nur die URL, diese können sie dann direkt ihren Freunden versenden.
Wieso sollte ich eine Progressive Web App entwickeln?

Eine gute Progressive Web App bringt viele Vorteile mit sich.
Zum einen führt eine Progressive Web App dank Push Notifications zu einem höheren User-Engagement und gemäss eXtra Electronics bleiben die Benutzer durchschnittlich auch zwei Mal solange auf der Seite als zuvor.
Ausserdem verbessert sich die Conversion bei Web Shops. Die Progressive Web App von AliExpress verbesserte deren Conversion-Rate für neue Benutzer über alle Browser gesehen um über 100%.
Progressive Web Apps haben einen beträchtlichen Einfluss auf die User Experience da sie, egal mit was für einer Netzwerkverbindung, zuverlässig und schnell geladen werden.

Was brauche ich um eine Progressive Web App zu entwickeln?

  • Chrome 52 oder grösser
  • Einen Webserver
  • Einen Texteditor
  • Grundlegendes Verständnis in HTML, CSS und JavaScript

 

Wie entwickle ich eine Progressive Web App?

1. SSL

Die Webseite muss über https (Eine Verschlüsselte http Verbindung) ausgeliefert werden.
Dazu muss ein SSL-Zertifikat auf dem Server installiert werden. Mehr dazu findest du auf der Webseite unseres Hosting Partners Simplehosting: https://www.simplehosting.ch/en/sicherheit/ssl-certificate/

 

2. Responsiveness

Die Webseite muss responsive auf Tablet und Mobiles angezeigt werden.
Für die Implementierung von responsiven Webseiten gibt es Online viele Anleitungen und Tutorials. Wir bei OPTEN brauchen das CSS Framework Bootstrap (http://getbootstrap.com/) um responsive Webseiten zu entwickeln.

 

3. Startseite im Offlinemoduls

Im Minimum die Startseite wird geladen, wenn das Gerät offline ist.
Dazu kann die Technologie des Service Workers verwendet werden. Für technisch Interessierte wird später noch genauer auf die Implementierung eines Service Workers eingegangen.

 

4. Metadaten

Die Webseite stellt Metadaten zur Verfügung, die definieren wie das App auf dem Homescreen aussehen wird.
Dazu wird ein sogenanntes Web App Manifest erstellt das so aussehen könnte:

{
  "short_name": "OPTEN",
  "name": "Der OPTEN Blog mit spannenden Themen",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": " /?utm_source=homescreen"
}

Das Web App Manifest muss dann nur noch im head des html Dokuments referenziert werden:

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

Weitere Informationen zum Thema Web App Manifest findest du unter https://developer.mozilla.org/en-US/docs/Web/Manifest

 

5. Schnelle Ladezeit

Das erste Laden der Webseite muss auch mit einer 3G Verbindung schnell sein.
Es gibt sehr viele Möglichkeiten, um die Ladezeit einer Webseite zu verringern. Eine komplette Abhandlung dieses Themas wäre eigentlich einen eigenen Blog-Post wert. Deshalb werde ich hier nur ein paar Online-Ressourcen zur Verfügung stellen.

 

6. Darstellung

Die Seiten werden auf allen gängigen Browsern optimal dargestellt.
Dazu sollte die Webseite auf den Browsern Edge, Internet Explorer, Chrome, Firefox und Safari getestet werden. Ausserdem sollten die Tests mit den Betriebssystemen Windows, OSX, iOS und Android durchgeführt werden.

 

7. Seitenübergänge

Seitenübergänge fühlen sich nicht an, als ob Sie das Netzwerk blockieren.
Wenn der Benutzer auf der Seite herumklickt, also interne Links oder Buttons anklickt, sollte er immer ein direktes Feedback erhalten. Dies geht entweder über:

  • Die Webseite wechselt direkt zur neuen Seite und zeigt einen Platzhalter an während das Gerät auf die Inhalte der Webseite wartet.
  • Es wird ein Loading Indikator angezeigt, solange die Applikation auf eine Antwort des Netzwerks wartet.

Single Page Applikationen welche zum Beispiel mithilfe von Angular oder React programmiert sind, bieten diese Funktionalitäten heute schon an.

Wie implementiere ich einen Service Worker?
Für die Techies unter euch ;)

Ein Service Worker bietet Funktionalitäten, welche bis jetzt nur von nativen Applikationen implementiert wurden, nun auch für Webseiten an. Dazu gehören Hintergrundsynchronisierung, Push Notifications, Caching von bestimmten Inhalten für den Offlinegebrauch und vieles mehr.

Ein Service Worker ist ein Script, welches der Webbrowser abgekapselt von der Webseite im Hintergrund laufen lässt.

 

1. Einen Service Worker registrieren

Um einen Service Worker zu installieren, muss man den Service Worker zuerst für die Seite registrieren. Dies teilt dem Browser mit, wo das JavaScript File mit dem Service Worker liegt. Zuerst muss jedoch überprüft werden, ob der Browser die Service Worker API überhaupt zur Verfügung stellt.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration erfolgreich :)
    }).catch(function(err) {
      // Fehler bei der Registration :(
    });
  });
}

2. Einen Service Worker installieren

Nachdem das Service Worker Script registriert wurde, muss der Installations-Prozess implementiert werden. Dazu muss man eine Callback Funktion für den „install“ Event definieren:

self.addEventListener('install', function(event) {
  // Installation wird hier durchgeführt
});

In unserem Beispiel möchten wir definieren, welche URLs von Service Worker gecacht werden. Dazu fügen wir folgenden Code dem Callback des „install“ Events hinzu:

event.waitUntil(
    caches.open(“opten-cache-v1”)
      .then(function(cache) {
        return cache.addAll([
          '/',
          '/styles/main.css',
          '/script/main.js'
        ]);
      })
  );

Dieser Code sagt dem Service Worker, dass er die Root Seite (“/”) sowie das Stylesheet und das JavaScript File der Seite dem Cache hinzufügen soll.

3. Gecachte Inhalte zurückgeben

Nun, da wir dem Service Worker gesagt haben, welche Files wir cachen möchten, müssen wir diese gecachten Inhalte zum richtigen Zeitpunkt auch noch zurückgeben. Dies geschieht über den „fetch“ Event des Service Workers. Der „fetch“ Event wird immer dann aufgerufen, wenn der Benutzer neue Inhalte von der Webseite anfordert, dies geschieht zum Beispiel beim Neu laden der Seite oder bei der Navigation auf eine Unterseite. Der Code dazu könnte folgendermassen aussehen:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

Dieser Code überprüft bei jedem Request ob dieser dem Cache hinzugefügt worden ist. Falls ja gibt er direkt das gecachte Resultat zurück und falls nein führt er wie normal einen Request zum Server aus.

Weitere nützliche Links

Wir verwenden Cookies zur Bereitstellung von Website-Funktionen und zu Analysezwecken. Mehr zum Datenschutz

Schliessen Schliessen