Responsive Webdesign und Progressive Web App (PWA): Die Unterschiede

Da diese beiden in Aussehen und Leistung so ähnlich sind, müssen Sie sich fragen, warum es keinen detaillierteren Vergleich zwischen den beiden gängigen Ansätzen der Webentwicklung gibt: Responsive Webdesign und Progressive Web App. Nun, das ist es . In diesem Artikel vergleichen wir Responsive Webdesign mit Progressive Web App und finden heraus, wo sie sich wirklich voneinander unterscheiden.

Sich anpassendes Webdesign

Was es ist

Responsive Webdesign (RWD) ist ein Ansatz zur Webentwicklung, der erstmals 2010 von Ethan Marcotte beschrieben wurde – fünf Jahre vor der Konzeption von Progressive Web App.

Wie es funktioniert

Grundsätzlich ist die Philosophie des responsiven Webdesigns, dass Design und Entwicklung mit dem Ziel erfolgen sollten, auf das Gerät des Benutzers zu reagieren – was bedeutet, auf das Verhalten, die Größe, die Plattform und die Ausrichtung des verwendeten Geräts zu reagieren. Dies wird durch die Verwendung von fließenden Rastern, flexiblen Bildern und CSS-Medienabfragen erreicht:

Fließende Raster, flexible Bilder und Medienabfragen sind die drei technischen Zutaten für responsives Webdesign…

Ethan Marcotte, Responsives Webdesign

Fließende Gitter

Responsive Websites, die mit Fluid Grids gestaltet wurden, können besser mit den unterschiedlichen Bildschirmgrößen auf dem Markt umgehen, da Fluid Grid eine neue prozentuale Berechnung verwendet, anstatt pixelbasierte Abmessungen zu definieren.

Flexible Bilder

Bilder im Web sind von Natur aus nicht flüssig, aber mit einigen Konfigurationen ( width -Eigenschaft auf 100% und height -Eigenschaft auf auto eingestellt) kann jedes Bild so gestaltet werden, dass es auf allen Geräten reagiert.

CSS-Medienabfragen

Während eine responsive Webseite mit flexiblen Bildern und fließenden Rastern technisch responsive ist, sieht sie nicht so gut aus, wie sie sein könnte. Hier kommen CSS-Medienabfragen ins Spiel, da diese verwendet werden, um ein noch besseres Erlebnis zu schaffen, das auf verschiedene Geräte zugeschnitten ist. Diese maßgeschneiderten Erfahrungen werden häufig durch das Hinzufügen von Haltepunkten eingeführt, die bei bestimmten Bildschirmgrößen wirksam werden.

Insgesamt hat Responsive Webdesign das heutige Web so viel barrierefreier gemacht, da der Ansatz mehr Entwicklungsphasen eliminiert, die früher erforderlich waren, um den unterschiedlichen Bildschirmgrößen auf dem Markt gerecht zu werden. Oder, in den Worten seines Schöpfers, dieser Ansatz der Webentwicklung ermöglicht es uns endlich, „ für die Ebbe und Flut der Dinge zu entwerfen “.

Beispiele

Responsive Websites sind heutzutage alltäglich, und fast jede Website, auf die Sie stoßen, ist von Natur aus in gewisser Weise reaktionsschnell.

Progressive Web-Apps

Was es ist

Progressive W eb App wurde erstmals 2015 von Alex Russel geprägt und ist aufgrund ihrer vielen Vorteile gegenüber der typischen responsiven Website die nächste natürliche Weiterentwicklung des Webs. Der „ progressive “ Teil lässt sich laut Pete LePage – Google Developer Advocate wie folgt erklären: „ Wenn der Benutzer im Laufe der Zeit eine Beziehung zur App aufbaut, wird sie immer leistungsfähiger “.

Um es für Laien auszudrücken: Eine PWA ist Ihre App-ähnliche Website mit (fast) allen Funktionen, die Sie von einer nativen mobilen Anwendung erwarten können , einschließlich Push-Benachrichtigungen, Offline-Funktionen und so weiter. Aus diesem Grund ist die gesamte Erfahrung eine Verbesserung gegenüber dem Gegenstück zu ihrer reaktionsschnellen Website, da PWA alle vermeintlichen Vorteile einer webbasierten Plattform beibehalten kann.

 Verwandter Artikel: Was ist eine progressive Webanwendung?

Wie es funktioniert

Es ist eigentlich ziemlich einfach, die Kernkomponenten einer PWA zusammenzufassen. Grundsätzlich sind dies die Anforderungen, um alle oben genannten progressiven Funktionen zu ermöglichen:

Web-App-Manifest

Das Web-App-Manifest ist eine JSON-Datei, die die erforderlichen Metadaten für den Installationsprozess Ihrer PWA bereitstellt und bestimmt, wie sich Ihre PWA auf dem Startbildschirm des Benutzers darstellt.

Servicemitarbeiter

Service Worker werden allgemein als grundlegende Komponente angesehen, die alle fortschrittlichen Funktionen von PWA ermöglicht, und laufen unabhängig vom Browser und in einem anderen Thread als das Haupt-JavaScript.

Sichere Kontexte

Als neuer Standard des Webs ist es erforderlich, dass eine PWA über ein sicheres Protokoll – HTTPS – getrennt werden muss. Dies garantiert eine sichere Kommunikation zwischen dem Benutzer und dem Server und gewährleistet im Gegenzug ein risikofreies Erlebnis.

Beispiele

Da sich PWAs nicht anders verhalten als native mobile Anwendungen, haben Sie möglicherweise schon einmal eine PWA-Site besucht, ohne es zu wissen. Denken Sie an große, App-ähnliche Websites wie Instagram und Pinterest – sie werden alle von PWA unterstützt.

 Empfohlene Lektüre: 12 beste Beispiele für progressive Web-Apps im Jahr 2020

Wo sie sich überschneiden

Ein ähnliches Erlebnis mit modernen Funktionen

Wenn für Sie bisher alles sinnvoll ist, sollten Sie sehen, dass sich Responsive Webdesign (RWD) und PWA in Bezug auf die Benutzererfahrung stark überschneiden. Technisch gesehen ist PWA reaktionsschnell – da der Ansatz für die Anzeige auf allen Geräten geeignet ist, mit ein wenig moderner Note, um mehr App-ähnliche Funktionen zu ermöglichen.

Und da es sich bei beiden um Ansätze zur Webentwicklung handelt, teilen sie fast alle die gleichen Vorteile aus dem Web, darunter:

• Eine URL, eine Codebasis für alle Plattformen
• Erhöhte Sicherheit mit HTTPS
• Bessere Auffindbarkeit und immer aktuell

Wo sie sich unterscheiden

An dieser Stelle wird es interessant, da sich diese beiden Ansätze zur Webentwicklung – obwohl sie sich größtenteils ähnlich sehen – in ihren Auswirkungen auf die reale Welt stark unterscheiden.

In Bezug auf die Funktionen

Eine PWA ist per Definition mit mehr Funktionen ausgestattet als Ihre typische responsive Website. Durch die Nutzung der jüngsten Fortschritte bei Webtechnologien, d. h. Servicemitarbeitern und Web-App-Manifest, kann PWA Funktionen bereitstellen, die zuvor ausschließlich nativen mobilen Apps vorbehalten waren, wie z. B.:

Zum Startbildschirm hinzufügen

Mit registrierten Servicemitarbeitern und einem Web-App-Manifest kann PWA auf jedem Gerät installiert werden, das über einen unterstützenden Browser verfügt.

>> Weitere Informationen: Erstellen Sie Ihre erste PWA

Mitteilungen

Über Servicemitarbeiter können Sie Benachrichtigungen senden und sie auf den Geräten der Benutzer anzeigen lassen, genau wie bei einer nativen Anwendung. Dies ist eine relativ neue Funktion des Webs, die Push-API, Benachrichtigungs-API und Web-Push-Protokoll nutzt; und in naher Zukunft wird diese Funktion dank der Einführung von Notifications Triggers und Badging API nur noch besser.

Offline-Fähigkeiten

Dank der Hilfe des programmierbaren Netzwerk-Proxys im Browser, nämlich Service Worker , kann PWA Offline-Inhalte proaktiv zwischenspeichern und bereitstellen, ohne sich auf veraltete Caching-Mechanismen wie HTTP-Cache verlassen zu müssen.

Hinweise : Responsive Websites können weiterhin von allen vorhandenen APIs aus dem Web profitieren, um ebenfalls ein optimales Benutzererlebnis zu bieten – es ist nur so, dass Sie nicht alle Funktionen erhalten, die auf Servicemitarbeiter angewiesen sind.

 Empfohlene Lektüre: Progressive Web App (PWA) und Hardwarezugriff

In Sachen Leistung

Da responsive Websites immer noch Ihre typische Website sind, die durch alle Nachteile des aktuellen HTTP-Caching-Mechanismus zurückgehalten wird, ist es vernünftig, eine bessere Leistung von PWA zu erwarten, da sie einen neueren, leistungsorientierteren Caching-Mechanismus namens Service Worker verwendet.

Schnellerer Caching-Mechanismus

Mit registrierten Servicemitarbeitern haben Sie die Kontrolle darüber, was genau zwischengespeichert wird, und erzielen dadurch bessere Erfahrungen für wiederkehrende Besucher.

Auch die reale Leistungsauswirkung von Servicemitarbeitern wurde nicht sorgfältig beobachtet. Durch die Verwendung der Zeit bis zum ersten Malen als Metrik zur Messung der ersten Erfahrung des Benutzers mit einer Website hat Google selbst eine Studie durchgeführt, in der die Leistung der Google I/O-Webanwendung mit einer kontrollierten Gruppe (bei der ein Servicemitarbeiter die Webanwendung steuert) und beobachtet wurde eine unterstützte Gruppe (wo Service Workes vom verwendeten Browser unterstützt wird, aber die Web-App noch nicht steuert).

Die Ergebnisse waren auf dem Desktop besonders beeindruckend, da hier zu sehen ist, dass Servicemitarbeiter ihren Teil dazu beigetragen haben, die ursprüngliche firstpaint Zeit (912 ms) auf nur 583 ms zu reduzieren. Dies kommt einer sofortigen Erfahrung so nahe, wie es nur geht.

Auf Mobilgeräten sieht es jedoch etwas weniger beeindruckend aus:

Hier können wir sehen, dass das hintere Ende der kontrollierten Gruppe der unterstützten Gruppe immer noch ein wenig ähnlich sieht. Dies liegt hauptsächlich daran, dass Service-Worker-Threads auf Mobilgeräten nicht so optimiert sind und im Vergleich zum Desktop mehr Zeit zum Starten benötigen.

Insgesamt ist die Leistungssteigerung, die mit Service Workern – oder anders gesagt mit PWA – erzielt wird, geradezu phänomenal. Auf Seiten der mobilen Servicemitarbeiter bleibt natürlich noch einiges zu tun; aber wir glauben, dass es im Großen und Ganzen immer noch ein kleiner Schritt zu dem ist, was das Web einmal war, und ein Schritt in die richtige Richtung.

In Sachen Sicherheit

HTTPS – Die Trennlinie

Während eine typische responsive Website genauso sicher sein kann wie eine PWA, ist es für responsive Websites nicht erforderlich , sichere Kommunikationsprotokolle zu verwenden. Dies ist bei PWA-basierten Websites der umgekehrte Fall, da Google, der Gründer von PWA, verlangt, dass die gesamte Kommunikation zwischen dem Server und dem Client in einer PWA durch die Verwendung von HTTPS verschlüsselt werden muss.

Die meisten Funktionen im Zusammenhang mit einer PWA wie Geolokalisierung und sogar Servicemitarbeiter sind erst verfügbar, wenn die App über HTTPS geladen wurde.

MDN-Webdokumente, Progressive Web-Apps (PWAs)

 Verwandter Artikel: Benötigen Sie HTTPS?

Fazit

Die oben erwähnte Leistungssteigerung, die mit Servicemitarbeitern erzielt wurde, kombiniert mit zusätzlichen App-ähnlichen Funktionen wie Push-Benachrichtigungen, Hinzufügen zum Startbildschirm (und in naher Zukunft Geofencing und regelmäßige Synchronisierung) machen PWA zum geeigneten Kandidaten, um der nächste zu sein Entwicklung des Webs. Ab sofort wird die PWA-Bewegung bereits von fast allen großen Jungs gefördert, einschließlich Microsoft mit ihrem Vorstoß zur Einführung von PWA in Windows 10. Es wird nicht mehr lange dauern, bis wir eine Zukunft voller Progressive Web Apps sehen – wie das, was Steve Jobs sich vorgestellt hat:

Die vollständige Safari-Engine befindet sich im iPhone. Und so können Sie erstaunliche Web 2.0- und Ajax-Apps schreiben, die genauso aussehen und sich genauso verhalten wie Apps auf dem iPhone. Und diese Apps lassen sich perfekt in iPhone-Dienste integrieren. Sie können einen Anruf tätigen, eine E-Mail senden und einen Standort auf Google Maps nachschlagen.

Steve Jobs, 2007