Die Idee von Apps, welche aus dem World Wide Web heraus verbreitet werden, existiert seit dem ersten iPhone (2007). Damals dachte Apple selbst noch daran, keinen eigenen Appstore mit nativen Apps von Drittanbietern zu betreiben, sondern alle Apps als Webanwendung im Safari auszuführen zu lassen. Doch kurz nach Erscheinen des iPhones, verwarf Apple diese Idee direkt wieder und implementierte das heute bekannte System mit signierten nativen Apps.
Heute, einige Jahre später, erleben die sogenannten "Progressive Web Apps" (oder kurz "PWAs") ihr Comeback. Dies ist nicht zuletzt den technischen Möglichkeiten geschuldet, welche seit HTML5 eingeführt wurden. So stehen PWAs zum heutigen Standpunkt ihrem nativen Pendant kaum etwas nach.
In diesem und den folgenden Posts möchte ich eine Übersicht über aktuelle Technologien zur Entwicklung von Progressive Web Apps liefern. Außerdem werde ich auf deren aktuelle Unterstützung in den verschiedenen Browsern eingehen, sowie eventuelle Vorgänger abgrenzen.
Einleitung
"Application Cache is a Douchebag". Mit diesen Worten startet Jake Archibald seinen Blog-Eintrag, in dem er über die Technologie zur Offline Nutzung von Webseiten spricht. Neben dieser wurden noch viele weitere Technologien und Funktionen eingeführt, um das World Wide Web mächtiger zu machen. So dauerte es nicht lange, bis aus statischen Webseiten Apps entstanden, die es mit ihren nativen Gegenstücken aufnehmen wollten. Doch die Resultate waren den nativen Apps aufgrund von Technologien wie dem Application Cache deutlich unterlegen, da diese teils fehlerhaft oder einfach unpraktikabel waren. Heute jedoch, knapp vier Jahre nach dem Erscheinen von HTML5, gibt es Technologien, welche Entwicklern versprechen, Web Apps mit ähnlich guter User-Experience wie native Apps sie bieten, zu entwickeln. Solche Apps nennt man allgemein "Progressive Web Apps".
Was sind Progressive Web Apps?
Progressive Web Apps (oder PWAs) sind Web Applikationen, welche als einfache Webseite starten, aber je weiter die Entwicklung voranschreitet immer mehr an native Apps erinnern. Sie bieten das Design und die User-Experience, wie es Nutzer aus nativen Apps kennen. Dazu gehören (Push-)Notifikationen, welche Systemweit erscheinen, oder auch die die Offline-Nutzung, wenn mal kein Internet verfügbar ist.
Vorteile gegenüber nativen Apps
Wenn Progressive Web Apps native Apps "nur imitieren", was sind dann die Vorteile? Die Vorteile ergeben sich aus dem Kern von PWAs, der Webentwicklung. Folgende drei Aspekte sind das, was Progressive Web Apps von nativen Apps abhebt:
- Direkt verfügbare Updates
- Niedrigere Kosten
- Geringerer Arbeitsaufwand
Vorteile von nativen Apps
Wo es Vorteile gibt, muss es auch Nachteile geben. Auch wenn es erst der Browser ist, welcher einem mit seinen Schnittstellen erlaubt auf Hardware zuzugreifen, so ist er es auch, welcher die Grenzen zieht. So werden einer Web App nie die Ressourcen zur Verfügung stehen, wie wenn sie nativ implementiert worden wäre.
Einschränkungen
Neben den Ressourcen sind die Enschränkungen auf die verschiedenen Browser zurückzuführen. Während der Google Chrome schon heute alle der folgenden Technologien unterstützt, so ist es gerade Apples Safari, welcher kaum eine Schnittstelle vollständig unterstützt.
Die folgenden Posts
In den folgenden Posts der Serie "Überblick über Technologien zur Entwicklung von Progressive Web Apps" werde ich auf folgende Technologien eingehen:
- Service Worker API inkl. CacheStorage & SyncManager
- IndexedDB
- Notification & Push API
- Payment Request API
- Credential Management API
- Web Share API & Web Share Target API
- Media Session API
Dabei werde ich mich maßgeblich an dem Buch Building Progressive Web Apps von Tal Ater orientieren.
Quellen und weiterführende Links
https://www.heise.de/developer/artikel/Progressive-Web-Apps-Teil-1-Das-Web-wird-nativ-er-3733624.html (besucht am 26.01.2018 13:00 Uhr)
https://blog.ionicframework.com/what-is-a-progressive-web-app/ (besucht am 26.01.2018 13:45 Uhr)
https://de.ryte.com/magazine/mobile-optimierung-progressive-web-apps-vs-native-apps (besucht am 26.01.2018 13:57 Uhr)
In dem Sinne, frohes Coden.
(() => {
const colors = [
'001f3f', '0074d9', '7fdbff', '39cccc',
'3d9970', '2ecc40', '01ff70', 'ffdc00',
'ff851b', 'ff4136', '85144b', 'f012be',
];
const contents = ['%cI', '%c❤', '%cweb', '%cdev'];
const options = Array.from(
new Array(contents.length),
() => `
color:#${colors[Math.floor(Math.random() * colors.length)]};
font-size:64px;
`
);
console.log.apply(console, [contents.join('')].concat(options));
})();