Seit Beginn des Smartphone-Zeitalters sind Jahre vergangen. Damit begann die Ära der nativen Apps. Apps spielen weiterhin eine große Rolle in unserem täglichen Leben, und viele Unternehmer haben sich mehrmals gefragt: Sollten wir eine App haben? Natürlich ist die einzige Antwort darauf — es kommt darauf an. Das Erstellen und Verwalten einer nativen App ist umständlich und oft recht teuer. Zum Glück gibt es eine andere Option. Diese Option kombiniert die Freuden einer nativen App mit der Technologie, die wir im Web verwenden: die Progressive Web App, auch bekannt als PWA.

Was ist eine PWA?

Twitter.com ist eine PWA

PWA steht für Progressive Web app. Dies ist eine App aus den Web-Technologien, die wir alle kennen und lieben, wie HTML, CSS und JavaScript, aber mit einem Gefühl und Funktionalität, die eine tatsächliche native App Rivalen gebaut. Dank einiger intelligenter Ergänzungen können Sie fast jede Website in eine progressive Web-App verwandeln. Dies bedeutet, dass Sie eine PWA im Vergleich zu einer nativen App, die ziemlich schwierig zu entwickeln ist, ziemlich schnell erstellen können. Außerdem können Sie alle Funktionen nativer Apps wie Push-Benachrichtigungen, Offline-Support und vieles mehr anbieten.

Viele Websites, die Sie online finden, sind eigentlich eine Progressive Web App. Nehmen twitter.com , zum Beispiel. Wenn Sie diese Website auf Ihrem Smartphone besuchen, können Sie sie auf Ihrem Startbildschirm installieren. Wenn Sie nun die gespeicherte Twitter-Site öffnen, werden Sie feststellen, dass sie wie eine native App aussieht und funktioniert. Es gibt kein Browserfenster oder nichts. Es gibt keinen Unterschied, ob Sie es von einem iPhone oder einem Android-Smartphone aus ausführen. Einfach einloggen und los geht’s. Dies ist ein großer Vorteil beim Erstellen Ihrer Web-App unter Berücksichtigung einer PWA.

PWAs werden immer beliebter. Viele große Websites sind PWAs, wie Starbucks.com, Pinterest.com, Washingtonpost.com und Uber.com sind tatsächlich auf Ihrem Startbildschirm installierbar und bieten eine vergleichbare Erfahrung mit ihren nativen Apps.

Was ist der Unterschied zwischen einer nativen App und einer PWA?

Eine native App, wie die, die Sie aus Apples App Store oder Googles Play Store herunterladen, wird oft in einer für diese Plattform spezifischen Programmiersprache erstellt. Für iOS-Apps wäre das also Swift und für Android-Apps Java. Wenn Sie eine App für diese Plattformen erstellen möchten, müssen Sie die Technologie kennen. Ja, es gibt Verknüpfungen, aber diese haben ihre eigenen Einschränkungen. Wenn Sie eine App auf allen mobilen Plattformen haben möchten, müssen Sie die verschiedenen Technologien kennen. Es gibt keine einfache Möglichkeit, eine zu erstellen und in allen Geschäften zu veröffentlichen.

Natürlich gibt es Möglichkeiten, das Beste aus beiden Welten herauszuholen. Eine progressive Web App zum Beispiel. Diese läuft im Browser und funktioniert — einmal auf dem Homescreen gespeichert – wie eine native App. Es erhält sogar Zugriff auf die zugrunde liegende Hardware und Software, auf die der Browser aus Sicherheitsgründen nicht zugreifen kann. Wenn die PWA eine hervorragende Leistung erbringt, werden Benutzer nie wissen, dass sie eine webbasierte App anstelle einer nativen verwenden.

Es gibt natürlich einige Vorbehalte. Während Browser die Technologie dafür schnell übernommen haben, gibt es noch einige Einschränkungen. Unter iOS funktioniert die benötigte Technologie in Safari fleckig. Apple (will) noch nicht alles unterstützen, was es ein bisschen mühsam macht, überall genau die gleiche Erfahrung zu machen.

Was sind die Vorteile einer PWA?

Der Hauptgrund, warum jeder nach Apps jagt, ist, weil sie mehr Engagement bieten. Benutzer, die Ihre App installieren, sind Ihre größten Fans und verwandeln ihre Nutzung eher in Verkäufe oder Anmeldungen. Dank Push-Benachrichtigungen ist es viel einfacher, wieder mit Benutzern in Kontakt zu treten. Apps können eine hervorragende Erfahrung bieten, die einer Marke gut tun kann.

Wir haben in diesem Artikel über einige der Vorteile von PWAs gesprochen, aber hier ist ein kurzer Überblick:

• Sie müssen den Prozess nicht durchlaufen, um in verschiedene App Stores zu gelangen
• Sie können PWAs mit gängigen Webtechnologien erstellen
• Sie sind oft billiger zu bauen
• Da Sie Ihre Website in eine App verwandeln, müssen Sie weniger Codebasen warten
• PWAs reagieren und arbeiten mit vielen verschiedenen Bildschirmgrößen
• PWAs sind glatt, schnell und leicht
• Sie müssen keine großen brocken Geld an Google und Apple
• Sie arbeiten offline, im Gegensatz zu Ihrer regulären Website
• PWAs sind über Suchmaschinen auffindbar (die viel größer sind publikum als App Stores. Plus, wenn Sie möchten, können Sie immer noch Ihre PWAs über App Stores verteilt bekommen)
• Sie können Push-Benachrichtigungen verwenden, um Benutzer erneut zu engagieren
• Die Installation einer PWA kann zu einem höheren Engagement führen

Dennoch gewinnen native Apps manchmal. PWAs erhalten immer tieferen Zugriff auf das Betriebssystem eines Smartphones, aber eine native App kann noch tiefer gehen. Außerdem gibt es Grenzen für das, was eine PWA tun kann. Zum Beispiel sind PWAs nicht die beste Wahl, wenn Sie Hochleistungsspiele erstellen möchten.

Alles in allem ist es sehr sinnvoll, über eine PWA in Ihrer mobilen Strategie nachzudenken. Aber die Hauptfrage, die Sie sich stellen sollten, ist: Will mein Publikum das?

Für wen ist das?

Sollte jeder einfach eine PWA bauen und damit fertig sein? Nein, betrachten Sie Ihr Unternehmen und — noch wichtiger – Ihre Zielgruppe. Verwenden sie überhaupt Apps? Ist dies nicht ein zu komplexer Weg, um zu dem zu gelangen, was Sie erreichen möchten? Auch hier müssen Sie, wie bei allem, die Bedürfnisse Ihres Publikums erforschen. Fragen Sie sich, was diese Technologie tun soll? Wo sind Ihre Nutzer? Haben sie eine gute Datenverbindung und solide Hardware? Wie und wo nutzen sie Ihre Inhalte? Und glauben Sie, dass eine App ihnen helfen kann, ihre Arbeit besser zu machen?

PWAs sind großartig und ihre Implementierung muss gar nicht so schwer sein. Aber nur weil es einfach ist, heißt das nicht, dass du es tun solltest. Wenn Ihr Publikum es nicht braucht, warum sollten Sie eines bauen?

Was sind die SEO-Bedenken einer PWA?

Die PWA ist inhärent webzentriert. Es wurde aus dem Web geboren und mit Blick auf Suchmaschinen entwickelt, um das Auffinden zu vereinfachen. Natürlich können Sie aus jeder alten Site eine progressive Web-App erstellen, und dafür ist nicht viel erforderlich. Viele PWAs verwenden jedoch JavaScript, um komplexere Funktionen zu erstellen, und obwohl Suchmaschinen JavaScript gut rendern können, kann dies dennoch Anlass zur Sorge geben.

Wenn Sie eine PWA einrichten, müssen Sie sicherstellen, dass auf Ihr JavaScript zugegriffen werden kann. Blockieren Sie keine Dateien für Bots und stellen Sie sicher, dass Links verfügbar sind. Um den Rendering-Prozess zu verbessern, können Sie Ihr JavaScript-Framework serverseitiges Rendering verwenden lassen.

Wenn Sie Ihre Website in eine PWA verwandeln, bedeutet dies nicht, dass Sie die SEO dieser Website direkt verbessern. Wenn es sinnvoll ist, Ihre Website in eine PWA zu verwandeln, tun Sie dies, aber tun Sie es nicht für wahrgenommene SEO-Vorteile. Wenn Sie eine großartige PWA haben, bieten Sie Ihren Benutzern eine fantastische Benutzererfahrung, die Sie Ihrer Konkurrenz Konkurrenz machen könnte. In diesem Zusammenhang ist es eine gute Idee, sie für Ihre mobile SEO-Strategie zu betrachten.

Was sind die drei Hauptbausteine?

Es braucht nicht viel, um eine PWA einzurichten. Es gibt drei Dinge, die Sie bereitstellen müssen, bevor Ihre Website zu einer gültigen PWA wird.

• Eine sichere Verbindung (HTTPS): PWAs funktionieren nur auf vertrauenswürdigen Verbindungen, Sie müssen sie über eine sichere Verbindung bereitstellen. Dies ist nicht nur aus Sicherheitsgründen, sondern auch ein sehr wichtiger Vertrauensfaktor für die Benutzer.
• Ein Service Worker: Ein Service Worker ist ein Skript, das im Hintergrund ausgeführt wird. Auf diese Weise können Sie festlegen, wie Netzwerkanforderungen für Ihre PWA behandelt werden sollen, sodass komplexere Arbeiten ausgeführt werden können.
• Die Manifestdatei: Diese JSON-Datei enthält Informationen darüber, wie Ihre PWA aussehen und funktionieren soll. Hier bestimmen Sie den Namen, die Beschreibung, die Symbole, die Farben usw.

Hier ist ein Beispielmanifest von Google:

Es sieht nicht allzu schwer aus, oder? Ein paar interessante Dinge in dieser Auflistung:

• start-url: Dies bestimmt, wo Ihre App starten soll. Es ist besser, Benutzer auf einer bestimmten Seite für Ihre PWA landen zu lassen.
• display: Dies hilft Ihnen zu bestimmen, welche Art von Browser-Benutzeroberfläche Sie anzeigen möchten. Optionen sind fullscreenstandaloneminimal-ui und die Standard browser Schnittstelle.

Diese drei oben aufgeführten Punkte sind die Mindestanforderungen für die Ausführung einer PWA. Sie können die Funktionalität über JavaScript (Frameworks) erweitern.

Wie richte ich eine PWA ein?

Es gibt viele Ressourcen, um sich an der Erstellung einer einfachen PWA zu versuchen. So bekommen Sie ein Gefühl für den Prozess. Google hat ein ausgezeichnetes, einfach zu befolgendes Tutorial zu PWAS im Web.entwickler-Site. Mozilla hat viele Dokumentationen zum Erstellen von Progressive Web Apps. Microsoft verfügt auch über umfangreiche Entwicklerdokumente zum Erstellen von PWAs. Microsoft hat sogar ein Tool namens PWABuilder entwickelt, mit dem Sie Ihre Website in eine PWA verwandeln können. Natürlich gibt es WordPress-Plugins, mit denen Sie eine PWA Ihrer Website erstellen können. Darüber hinaus arbeitet Google daran, die Basisunterstützung für PWAs in WordPress Core zu integrieren.

Binden Sie Ihre Benutzer mit einer progressiven Web-App ein

Progressive Web-Apps können eine großartige Ergänzung zu Ihrem mobilen Toolkit sein. Gut gemacht, sie sind schnell, arbeiten offline und funktionieren wie eine native App. Alles in allem können sie Ihren Benutzern eine großartige Benutzererfahrung bieten. Zufriedene Nutzer sind zufriedene Nutzer, oder?