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:
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?
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:
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