Was ist PWA? Eine einfache Erklärung für den Nicht-Technikfreak

Sie sollten im Voraus wissen, dass dieser Beitrag aus der Sicht eines Vermarkters geschrieben wurde. (Nun, ich kann etwas HTML und CSS lesen und schreiben, ich kann Javascript einigermaßen verstehen, aber das macht mich nicht zu einem Technikfreak).

Was ist PWA?

PWA (Progressive W eb Apps) ermöglicht es einem Webbrowser, das Aussehen und Verhalten einer nativen mobilen App zu haben (dh Apps, die aus iOS- und Android-Stores heruntergeladen wurden). Diese nativen Apps sind für ein reibungsloses mobiles Erlebnis optimiert und verfügen über einige einzigartige Funktionen wie Web-Push-Benachrichtigungen. Die PWA-Technologie nutzt die Erfahrung beim Surfen im Internet in Browsern wie Chrome und Safari, sodass sie der einer nativen App nahe kommt. Dies erhöht als Ergebnis den Verkehr und das Engagement im Web.

Der Begriff wurde erstmals 2015 von Google eingeführt. 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 “.

Ist PWA dasselbe wie eine Website?

Ja, Progressive Web Applications sind Websites.

Dank moderner Webtechnologie sehen sie jedoch nur wie eine App aus und fühlen sich auch so an. Dies bedeutet, dass Benutzer Progressive Web Apps in ihrem Browser mit einer URL durchsuchen, genau wie bei jeder Website, aber direkt nachdem sie auf der PWA gelandet sind, erhalten sie die Erfahrung, eine „App“ direkt in ihrem Browser zu verwenden, ohne dies zu müssen Herunterladen und installieren.

Eine „App“ zu sein bedeutet nicht, dass PWA auf Mobilgeräte beschränkt ist. Sie können auch auf dem Desktop implementiert werden. Wahrscheinlich haben Sie PWA schon oft besucht, ohne es zu merken. Wenn Sie schon einmal auf Ihrem Laptop auf Instagram, Pinterest oder Tinder gestöbert haben, dann herzlichen Glückwunsch! Sie sind einigen der erfolgreichsten PWA-Anwender im Web begegnet.

Schauen wir uns ein Beispiel einer PWA-Website an, da es Ihnen helfen kann, PWA viel einfacher zu verstehen.

Ein Beispiel für eine PWA

Die G-SP eCommerce-Website ist eine PWA. Wenn Sie die Website auf dem Handy besuchen, können Sie die Website-URL tatsächlich zum Startbildschirm Ihres Telefons hinzufügen.

Wann immer Sie die Website erneut besuchen möchten, ist sie genau dort mit einem Symbol auf Ihrem Startbildschirm, genau wie alle anderen Apps wie Facebook oder Linkedin.

Wenn Sie die G-SP-Web-App von Ihrem Startbildschirm aus öffnen, können Sie sehen, dass die Website jetzt im Vollbildmodus ohne Suchleiste des Browsers angezeigt wird. Außerdem gibt es unten ein App-ähnliches Navigationsmenü. Darüber hinaus fühlt es sich butterweich an, wenn Sie scrollen und tippen, was anders ist als bei einigen anderen Web-Browsing-Erfahrungen, die Sie vielleicht zuvor gemacht haben.

 Literatur-Empfehlungen:
- G-SP PWA-Fallstudie: eine Transformation für ein erstklassiges mobiles Erlebnis
- Top 3 Anwendungsfälle von PWA

Tipps, um festzustellen, ob eine Website eine PWA ist

Wenn Sie kein Entwickler sind und sich in den Quellcode der Website einarbeiten, können Sie nicht genau feststellen, ob eine Website auf PWA-Technologie basiert.

Abgesehen davon gibt es ein paar Tricks, die Ihnen, obwohl sie kein genaues Ergebnis garantieren, einige Anzeichen dafür geben können, dass es sich bei einer bestimmten Website um eine PWA handelt.

Einseitige Website

Dies ist der einfachste Weg, um festzustellen, ob eine Website möglicherweise eine PWA ist. Es basiert auf der Natur von PWA: Progressive Web Apps sind technisch gesehen eine Single-Page-Website. Das bedeutet nicht, dass eine Website, die auf PWA basiert, nur eine einzige Seite hat. Dies bedeutet, dass das Seitenaufrufereignis nur einmal stattfindet , wenn ein Benutzer die Website zum ersten Mal lädt. Danach werden alle Seitenladevorgänge von Javascript abgewickelt. Dies ist anders als bei normalen Websites, bei denen jede Seitenänderung ein Neuladen der Seite zusammen mit dem gesamten HTML-Quelltext verursacht.

Wie funktioniert das? Nun, ganz einfach: Werfen Sie einen Blick auf den aktiven Tab Ihres Browsers. Wenn es sich bei der Website um eine PWA handelt, wird die Website beim Seitenwechsel nicht neu geladen, d. h. es gibt keine „Lade“-Animation auf der Registerkarte des Browsers.

Wir können feststellen, dass die Website der New York Times keine PWA ist:

Schauen wir uns als Beispiel unsere Website SimiCart an:

Verstehst du, was ich meine? Die Website wird nicht neu geladen, wenn Sie die Seite wechseln! Technisch gesehen bleiben Sie die ganze Zeit nur auf einer „Seite“. Aus diesem Grund werden PWA-Seiten so schnell und reibungslos geladen. Alle Seiten werden beim ersten Besuch der Website vorgeladen und Ihnen anschließend zugestellt. Sie sind nicht von Ihrer Netzwerkgeschwindigkeit abhängig und können sogar offline arbeiten!

Servicemitarbeiter

Nein, das sind keine menschlichen Arbeiter. Service Workers ist der Name der Technologie hinter einer Progressive Web App, die ihre Offline-Fähigkeit, Push-Benachrichtigungen und Ressourcen-Caching unterstützt. Laut Google sind Service Worker das Herzstück der PWA-Techniken. Wenn wir also herausfinden können, ob eine Website Service Workers-Technologie verwendet, können wir feststellen, ob es sich bei der Website möglicherweise um eine PWA handelt.

Wenn Sie Chrome-basierte Browser verwenden, können Sie dies einfach mit dem Inspector Tool überprüfen. Klicken Sie mit der rechten Maustaste auf die Website, die Sie überprüfen möchten, und klicken Sie auf Element prüfen. Gehen Sie dann zur Registerkarte Anwendung > Servicemitarbeiter. Sie können leicht erkennen, ob sich auf dieser Site Servicemitarbeiter befinden.

Auch dieser Trick gibt Ihnen nur einen Hinweis auf die Möglichkeit, dass eine bestimmte Website eine PWA ist. Obwohl Service Workers ein Kernbestandteil von PWA sind, gibt es sie nicht ausschließlich für PWA. Nicht-PWA-Websites können auch Service Worker nutzen, um ihre Funktionalität zu verbessern.

Wenn Sie mehr über PWA Service Worker erfahren möchten, haben wir einen exklusiven Artikel für Sie, in dem Sie alles über diese erstaunliche Technologie erfahren.

Sicherer HTTPS-Ursprung

Sie können jedoch genau feststellen, ob eine Website keine PWA ist, indem Sie sich ihre URL ansehen. Wenn die URL einer Website mit http:// anstelle von https:// beginnt, handelt es sich nicht um eine PWA. Dies liegt daran, dass PWA nur auf Websites funktionieren kann, die auf einer sicheren Domäne ausgeführt werden, nämlich HTTPS .

Wie beliebt ist PWA?

Wie Google vorschlägt, ist PWA „die Zukunft der mobilen App“, PWA gewinnt an Popularität, zuerst bei großen Unternehmen, dann bei kleineren Unternehmen und Organisationen.

Es treibt fast überall Wettbewerbe voran – von der Windows-Plattform bis hin zu großen App-Marktplätzen wie dem Google Play Store

Sie können feststellen, dass die Websites vieler großer Namen PWA sind, wie Telegram, AliExpress, FlipBoard und sogar die PWA-Versionen bekannter PWA-Spiele wie 2048 oder Web Flap.

PWA-Vorteile: Was können Progressive Web Apps?

Zum Zeitpunkt der Erstellung dieses Artikels kann PWA bereits die meisten Dinge tun, die zuvor ausschließlich nativen Apps vorbehalten waren. Dazu gehört der Zugriff auf Funktionen auf Geräteebene wie Kamera und Mikrofon, GPS, Offline-Modus, Dateizugriff und vieles mehr. Um sich einen Überblick darüber zu verschaffen, was PWA alles kann, können Sie einen Blick auf https://whatpwacando.today/ werfen .

Daher ist die Web-App eine gute Wahl für diejenigen, die das mobile Erlebnis ihrer Marke online verbessern möchten, ohne in eine mobile App zu investieren.

Lassen Sie uns etwas tiefer in die Vorteile von PWA gegenüber normalen mobilen Apps und responsiven Websites eintauchen:

PWA vs. responsive Website

Im Vergleich zu beispielsweise einer Website ist eine PWA aus folgenden Gründen überlegen:

• Geschwindigkeit: Bei gleichem Inhalt lädt PWA dank der Service Workers-Technologie schneller als normale Websites. Es ist schnell beim ersten Laden und sogar noch schneller beim zweiten Laden, da es alle Inhalte vorab zwischenspeichert und sie bei Bedarf liefert.
• Offline-Modus : Auch die Offline-Verfügbarkeit wird durch die Service Workers-Technologie ermöglicht. Mit richtig integrierten Servicemitarbeitern werden alle Inhalte beim ersten Besuch der PWA vorgeladen und anschließend über Javascript bereitgestellt, was PWA zum neuen Go-to-Ansatz für Websites macht, deren ununterbrochenes Erlebnis ein Muss ist . Wir haben eine Anleitung, wie Sie Ihre PWA offline arbeiten lassen können, falls Sie jemals eine benötigen.
• Web-Push-Benachrichtigung: Genau wie eine native mobile App kann PWA Push-Benachrichtigungen direkt von mobilen Webbrowsern an den Startbildschirm der Benutzer senden. Dies ist besonders hilfreich für E-Commerce-Shops, um personalisierte Deals und Angebote an ihre Kunden zu senden. Web-Push für PWA Android ist seit Ewigkeiten aktiviert, und zum Glück wird es sehr bald für PWA iOS kommen.
• Zum Startbildschirm hinzufügen: Diese Funktion fordert mobile Benutzer auf, die PWA zu „installieren“. Nachdem der Benutzer die Eingabeaufforderung akzeptiert hat, wird die PWA zu ihrem mobilen Startbildschirm hinzugefügt und wie jede andere installierte App ausgeführt. Hier ist unser Leitfaden zum Hinzufügen von PWA zum Startbildschirm. Verpassen Sie es nicht!

Die alte Eingabeaufforderung „Zum Startbildschirm hinzufügen“ in Chrome sieht in etwa so aus:

 >> Empfohlene Lektüre: Vollständiger Vergleich zwischen PWA und responsiver Website

PWA vs. native App

Und PWA ist nicht nur besser als Websites, sondern Marken entscheiden sich jetzt auch für PWAs gegenüber nativen Apps, weil PWAs folgende Vorteile bieten:

• Plattformübergreifend : Sobald PWA erstellt wurde, kann über alle mobilen Plattformen wie Android, iOS oder Windows darauf zugegriffen werden, da PWA browserbasiert und nicht betriebssystembasiert ist.
• Aktualität : An PWA vorgenommene Änderungen werden sofort wirksam, sobald Benutzer die Seite aktualisieren.
• Indexierbarkeit : Da PWA technisch immer noch eine Website ist, können ihre Inhalte indiziert und in Suchmaschinen wie Google gefunden werden. Dies eröffnet Möglichkeiten für SEO (Search Engine Optimization)-Praktiken, wodurch PWA im Vergleich zu nativen Apps eine größere Benutzerbasis erreichen kann.
• Keine Veröffentlichung erforderlich : Bei nativen Apps kann der Veröffentlichungsprozess in den App-Stores manchmal sehr mühsam sein. Stellen Sie sich vor, Sie senden Ihre App an App-Stores und warten aufgeregt 5 Tage, nur um eine Ablehnung mit einer Begründung zu erhalten, die Sie 10 Mal zum erneuten Lesen benötigen, und Sie wissen immer noch nicht, worum es geht. Und in einigen Fällen wird Ihre App möglicherweise nie akzeptiert. (Sexshops oder Vape-Produkte, irgendjemand?). Bei PWA gibt es keine App-Übermittlung. Was für eine Erleichterung! Falls Sie Ihre PWAs im Apple Appstore, Google Play und Microsoft Store veröffentlichen möchten, gehen Sie wie folgt vor!
• Niedrige Entwicklungskosten : Da PWA einmal entwickelt werden kann und dann für alle mobilen Plattformen und Browser verfügbar ist, die es unterstützen, sind die Entwicklungskosten für PWA im Vergleich zu nativen Apps relativ gering. Ein weiterer Grund ist, dass PWA Programmiersprachen und Technologien verwendet, die allgemein bekannter sind und eine viel größere Entwicklerbasis haben.

 Literatur-Empfehlungen:
- Progressive Web App vs. Native App: Was passt besser zu Ihnen?
- Vorteile von PWA für E-Commerce

PWA-Nachteil

Offensichtlich klingt das alles zu gut, um wahr zu sein; und wenn etwas zu schön scheint, um wahr zu sein, fragen die Leute oft: „Okay, wo ist der Haken?“.

PWA haben trotz ihrer branchenprägenden Eigenschaften immer noch ihre Nachteile:

• Erreichbarkeit

Da die Technologie noch neu ist, gibt es keinen aktuellen App-Marktplatz für PWAs, was wiederum ihre Fähigkeit einschränkt, ein breiteres Publikum zu erreichen. Es gibt jedoch Bewegungen von bekannten Unternehmen wie Microsoft mit der Aufnahme von PWAs in den Microsoft Store, sodass eine Zukunft ausgerechnet PWA in Windows 10 nicht so weit hergeholt erscheint.

• Kommunikation mit anderen installierten Apps :

Da PWA im Wesentlichen immer noch eine App-ähnliche Webseite ist, kann sie in vielerlei Hinsicht eingeschränkt werden. Die größte Einschränkung könnte darin bestehen, dass die anwendungsübergreifende Kommunizierbarkeit eingeschränkt ist, was für Entwickler ein Problem darstellen könnte.

FAQ

Wofür wird PWA verwendet?

Eine Web-App, die schnell, zuverlässig und angenehm zu bedienen ist, kann für viele Zwecke eingesetzt werden. Zum Beispiel Tik Tok, die PWAs von Aliexpress, bringen die Leute dazu, sich mit den Websites vertraut zu machen, und fordern sie so auf, ihre nativen Apps herunterzuladen. Spotify verwendet PWA, um die Leistung und Reaktionsfähigkeit seiner Website weiter zu optimieren, und bietet seinen Benutzern damit eine weitere Option neben dem Herunterladen ihrer App. Auch Spiele wie Pacman oder 2048 nutzen PWA, um mehr Webnutzer zu erreichen.

Was ist der Unterschied zwischen PWA und einer normalen App?

Aus technischer Sicht muss eine native App aus ihrem App Store heruntergeladen werden, während Sie über einen Webbrowser auf PWA zugreifen können. Aus geschäftlicher Sicht kann PWA SEO-freundlicher, billiger und schneller zu entwickeln sein. In der Zwischenzeit ist eine native App immer noch am besten für komplizierte mobile Projekte geeignet, außerdem kann sie eine stärkere Markenglaubwürdigkeit schaffen.

Funktioniert PWA nur auf Mobilgeräten?

Nein, PWA funktioniert sowohl auf dem Desktop als auch auf Mobilgeräten und Tablets.

Was ist die Programmiersprache von PWA?

PWA wurde mit gängigen Programmiersprachen und Webtechnologien wie HTML, CSS, Javascript und WebAssembly erstellt.

Fazit

„Wird PWA native Apps ersetzen?“

Wir denken nicht.

Noch.

Seit dem vierten Quartal 2019 gibt es fast 3 Millionen Apps bei Google Play und über 2 Millionen Apps im Apple App Store (Statista, 2019). Diese Zahl wächst immer noch und es sieht nicht so aus, als würden all diese Apps in absehbarer Zeit ersetzt werden. Benutzergewohnheiten sind eine Sache und nicht leicht zu ändern.

Allerdings haben Progressive Web Apps ein großes Potenzial. Wir bei SimiCart glauben, dass Progressive Web Apps die Zukunft ist. Mit seiner Geschwindigkeit, Layout-Flexibilität und Funktionsfähigkeit ist PWA dazu bestimmt, Desktop-Sites, mobile Sites, native mobile Apps und sogar native Windows-Anwendungen zu ersetzen. Ja, Sie haben richtig gehört, Windows-Anwendungen . Allein in der E-Commerce-Welt ist Progressive Web App derzeit der bevorzugte Ansatz für Ladenbesitzer, die ein leichtes, reaktionsschnelles und ansprechendes Erlebnis für Online-Käufer wünschen.

Tatsächlich zeigen Statistiken, dass eine einmonatige Verzögerung bei der PWA-Implementierung zu einem Umsatzverlust von bis zu 1,4 Millionen US-Dollar und weiteren 6,8 Millionen US-Dollar führen kann, wenn Marken sich entscheiden, sie um sechs Monate zu verschieben.

Für Besitzer von E-Commerce-Shops, die nach einer rundum perfekten Magento-PWA -Lösung suchen, bieten wir hier bei SimiCart ein Komplettpaket für Sie und Ihren Shop.