PWA vs. AMP: Was ist besser und wie unterscheiden sie sich voneinander?

Etwa ein Jahrzehnt nach der Einführung des ersten iPhones holt das mobile Web endlich den Lebensstil seiner Nutzer ein. Das Pinch and Zoom wurde durch reaktionsschnelle Seiten ausgelöscht. AMP und native Apps bekämpfen langsame Ladezeiten …

Aber es gibt immer noch einen großen Problembereich für das mobile Web: Engagement. Die 1.000 besten mobilen Websites erreichen 4x mehr Menschen als die 1.000 besten nativen Apps. Diese Websites beschäftigen Benutzer jedoch im Durchschnitt 20-mal weniger Minuten als mobile Apps.

Es scheint, dass mobile Websites Besucher anziehen, aber nicht halten können. Eine der neueren Technologien, die dieses Problem lösen, sind progressive Web-Apps.

Was sind progressive Web-Apps?

Progressive Web-Apps sind mobile Website-Erlebnisse, die so gestaltet sind, dass sie so aussehen, sich anfühlen und funktionieren wie native mobile Apps. Benutzer begegnen ihnen in einem Browser wie auf jeder mobilen Website. Nach der Interaktion mit dieser Website wird der Benutzer aufgefordert, die Web-App auf seinem Gerät zu installieren. Wenn sie sich für die Installation entscheiden, wird die App wie eine native App auf das Gerät heruntergeladen.

Der Begriff „Progressive Web Apps“ wurde 2015 von Google geprägt. Das Unternehmen sagt, Progressive Web Apps erfüllen drei Kriterien:

• Zuverlässig – Laden Sie sofort und zeigen Sie nie den Downasaur, selbst unter unsicheren Netzwerkbedingungen.
• Schnell – Reagieren Sie schnell auf Benutzerinteraktionen mit seidenweichen Animationen und ohne ruckartiges Scrollen.
• Ansprechend – Fühlen Sie sich wie eine natürliche App auf dem Gerät mit einem immersiven Benutzererlebnis.

Wenn diese Anforderungen erfüllt sind, kann die mobile Web-App den Benutzern als herunterladbar angeboten werden. Bevor wir tiefer in progressive Web-Apps eintauchen, kehren wir kurz an die Oberfläche zurück und definieren native Apps und eine andere Technologie, die das mobile Web beschleunigt, Accelerated Mobile Pages (AMP).

Was ist eine native App?

Native Apps werden über einen Marktplatz wie den App Store oder Google Play installiert und leben als Symbole auf dem Startbildschirm eines Geräts. Sie wurden speziell für ein bestimmtes Gerät entwickelt und können alle seine Funktionen wie GPS, Kamera, Kontaktliste und mehr nutzen. Dies sind Apps, die sich wahrscheinlich derzeit auf Ihrem Gerät befinden, wie Google Maps, Gmail oder Instagram.

Was ist AMP?

Das Open-Source-Projekt Accelerated Mobile Pages (kurz AMP) ermöglicht es Entwicklern, Webseiten zu erstellen, die nahezu sofort mit einer einzigartigen Programmiersprache geladen werden. Diese Sprache ist eine abgespeckte Version von HTML und CSS, die die Verwendung von JavaScript einschränkt. Diese Seiten werden auf einem CDN gehostet, das eine zwischengespeicherte Version der Seite liefert, wenn sie von einem Benutzer besucht wird.

Progressive Web-Apps vs. native Apps

Native Apps bieten sofortige und nahtlose Benutzererfahrungen und werden von großen Marktplätzen wie dem App Store und Google Play unterstützt. Warum also eine progressive Web-App gegenüber der traditionellen nativen Version wählen? In einem Artikel für Forbes bietet Andrew Gazdecki eine allgemeine Erklärung:

Mobile Websites sind schnell und einfach zu erreichen, aber sie sind in der Regel weniger angenehm in Bezug auf die Benutzererfahrung. Native Apps bieten die beste Benutzererfahrung, sind jedoch auf bestimmte Geräte beschränkt und haben hohe Akzeptanzbarrieren. Native Apps erfordern einen Download, was bedeutet, dass zuerst ein beträchtliches Buy-In von den Verbrauchern generiert wird und der Vorteil des Impulsverhaltens verloren geht. Zwischen diesen Optionen sitzt die neueste mobile Lösung: die PWA.

Schauen wir uns für eine genauere Erklärung einige der größten Unterschiede zwischen nativen Apps und progressiven Web-Apps an:

• Nutzung von Funktionen: Derzeit können zwar Web-Apps die Funktionen eines Geräts nutzen, native Apps jedoch mehr. Dinge wie GPS, Push-Benachrichtigungen und Gesten sind in einer nativen App leichter verfügbar.
• Inhaltsbeschränkungen: Um Ihrer App eine Chance zu geben, bei Google Play oder im App Store zu konkurrieren, müssen Sie sich den Regeln des Marktplatzes beugen. Inhaltsbeschränkungen und Gebühren erschweren es einigen Websites, erfolgreiche native Apps zu erstellen. Für Web-Apps werden jedoch weder Inhaltsbeschränkungen noch Gebühren auferlegt, was es für jedermann einfacher macht, eine App unabhängig vom Inhaltstyp zu erstellen.
• Offline-Konnektivität: Hier liegt der Vorteil bei nativen Apps, die ein umfassenderes Caching bieten als progressive Web-Apps, die in HTML5 erstellt wurden. Wenn Ihre App offline funktionieren muss, ist derzeit die native Lösung die bessere Wahl.
• Installation: Die Installation einer nativen App erfordert erhebliche Maßnahmen seitens des Benutzers. Sie müssen einen Marktplatz öffnen und nach einer App suchen und diese dann herunterladen. Es muss eine ernsthafte Absicht vorliegen. Bei der Installation einer progressiven Web-App gibt es viel weniger Reibungspunkte. Das Hinzufügen eines Lesezeichens zu Ihrem Gerät ist wie das Erstellen eines Lesezeichens auf Ihrem Startbildschirm. Es ist einfacher, eine progressive Web-App zu installieren, aber der Prozess ist viel weniger vertraut, was eine frühe Einführung verhindern kann.
• Geschwindigkeit: Derzeit hinken progressive Web-Apps nativen Anwendungen hinterher. Sie schließen die Lücke jedoch kontinuierlich. Das gilt besonders, wenn man den nächsten Vergleich betrachtet.

Progressive Web-Apps vs. AMP

Leute wie Gazdecki glauben, dass progressive Web-Apps irgendwann native Anwendungen ersetzen werden, aber was ist mit AMP? Wo kommen hier beschleunigte mobile Seiten ins Spiel, und gibt es einen Platz für beides? Ein paar wichtige Unterschiede zwischen diesen beiden:

• Auffindbarkeit: AMP gewinnt diesen Kampf. AMP erhält die Hilfe eines Karussells in den Google-Suchergebnissen, wo progressive Web-Apps keine Verbesserung der Auffindbarkeit durch Suchmaschinen erhalten.
• Engagement: Progressive Web-Apps sind nicht auf die Verwendung von AMP-HTML oder -CSS beschränkt, sodass sie weitaus ansprechendere Inhalte enthalten können als AMP. Alle interaktiven Elemente, die JavaScript erfordern, können nicht mit dem AMP-Framework erstellt werden. Für AMP sind dynamische Inhalte vom Tisch.
• Geschwindigkeit: Der Vorteil geht hier aus dem gleichen Grund an AMP, aus dem progressive Web-Apps Engagement gewinnen. AMP kann nur leichtgewichtige Inhalte unterstützen, aber das sorgt für schnellere Ladezeiten.

Im Smashing Magazine fasst Paul Bakaus den Kompromiss zwischen den beiden Formaten gut zusammen:

Um das Erlebnis zuverlässig schnell zu machen, müssen Sie bei der Implementierung von AMP-Seiten mit einigen Einschränkungen leben. AMP ist nicht nützlich, wenn Sie hochdynamische Funktionen benötigen, wie z. B. Push-Benachrichtigungen oder Webzahlungen, oder alles, was zusätzliches JavaScript erfordert.

Da AMP-Seiten normalerweise aus einem AMP-Cache bereitgestellt werden, erhalten Sie auch nicht die größten Vorteile von Progressive Web Apps bei diesem ersten Klick, da Ihr eigener Service Worker nicht ausgeführt werden kann. Andererseits kann eine Progressive Web App beim ersten Klick niemals so schnell sein wie AMP, da Plattformen AMP-Seiten sicher und kostengünstig vorab rendern können – eine Funktion, die auch das Einbetten vereinfacht (z. B. in einen Inline-Viewer).

Aber müssen wir uns am Ende wirklich für eines entscheiden?

Kooperation statt Konkurrenz

Sie können sich dafür entscheiden, AMP ausschließlich zu verwenden, um ein schnelles, aber einfaches Erlebnis zu schaffen. Sie könnten sich auf eine progressive Web-App verlassen, um eine dynamische, aber langsamere Benutzererfahrung zu schaffen. Oder Sie könnten schnell anfangen und schnell bleiben, indem Sie beides in Ihr Webdesign integrieren.

Heutzutage wird die Verwendung von AMP zusammen mit progressiven Web-Apps immer häufiger, wobei Entwickler beides auf drei Arten nutzen.

1. AMP als progressive Web-App

Wenn Ihre Inhalte hauptsächlich statisch sind und Sie sich mit der eingeschränkten Funktionalität von AMP zufrieden geben können, können Sie mit dieser Option blitzschnelle Erlebnisse als progressive Web-App erstellen. AMP zum Beispiel ist so aufgebaut – eine progressive Web-App, die vollständig AMP-geladen ist. Es verfügt über einen Servicemitarbeiter, der den Offline-Zugriff ermöglicht, sowie ein Manifest, das das Banner „Zum Startbildschirm hinzufügen“ anzeigt.

2. AMP zu einer progressiven Web-App

Eine andere Möglichkeit, AMP und eine progressive Web-App zusammen zu verwenden, besteht darin, Ihre AMP-Seite als Haken zu Ihrer Website zu betrachten. Es fängt den Benutzer mit einer sofortigen Last ein und rollt ihn dann in Ihre progressive Webanwendung. Auf diese Weise können Sie die schnell ladenden AMP-Seiten mit einer dynamischeren PWA als bei der ersten Option kombinieren.

3. AMP in einer progressiven Web-App

Wie schon bei AMP vs. PWA muss es hier nicht um alles oder nichts gehen. Sie müssen nicht alle Ihre Seiten mit AMP erstellen; Sie müssen AMP und PWAs auch nicht als Haken und Stange trennen. Jetzt können Sie tatsächlich nur einen kleinen Unterabschnitt einer einzelnen Seite AMPen und dadurch ihre Größe und Ladezeit verringern, ohne den vollständigen Kompromiss der dynamischen Funktionalität einzugehen.

Dies beinhaltet die Verwendung einer anderen Form von AMP namens „Shadow AMP“, die es AMP ermöglicht, sich in einem Bereich einer Webseite zu verschachteln. Das Ergebnis ist AMP innerhalb der Shell einer progressiven Webanwendung. Um es in Aktion zu sehen, sehen Sie sich die von Google erstellte Demo namens ShadowReader an:

Sind Sie bereit, Ihre eigene progressive Web-App zu erstellen?

Das Erstellen einer schnellen, nativen App-ähnlichen Erfahrung mit der Auffindbarkeit des Webs beginnt hier, wo Sie alle Kästchen lernen können, die Sie ankreuzen müssen, um die Kriterien von Google für PWAs zu erfüllen. Weitere Informationen zur gemeinsamen Verwendung von AMP und PWAs finden Sie unter:

• Dieser Vortrag von Ben Morss
• Dieser Vortrag von Eric Lindley

Wenn Sie bereit sind, verwenden Sie den AMP-Post-Click-Landingpage-Builder in Instapage, um die bisher schnellste Benutzererfahrung zu bieten.