Flanke 7 Bildmarke
Zurück zur Übersicht

Progressive Web Apps - ein Überblick

Teilen via:

Website meets App in einem. 

App oder doch lieber Website? Oder beides? Bei der Sichtbarkeit im Internet gibt es für Unternehmen nicht nur viele Möglichkeiten, sondern auch Herausforderungen. Das Entwickeln einer Website, die das eigene Unternehmen vollumfänglich repräsentiert, passiert nicht mal ebenso oder nebenbei. App Entwicklung ist nicht weniger komplex, meist sogar noch viel umfassender, zeitintensiver und damit auch teurer. 
Wer sich für eine App entscheidet, steht dann irgendwann vor der Frage: Mobile oder Desktop? Auch nicht gerade einfach zu beantworten, behält man dabei im Kopf, dass keiner weiß, welche Trends morgen den Ton angeben. 

Nun gibt es auch eine hybride Variante, quasi ein Mix aus beidem - und zwar: Progressive Web Apps. 

Was sind eigentlich Progressive Web Apps?

Progressive Web Apps (PWA) sind hybride Websites, die wie traditionelle Smartphone-Apps funktionieren, allerdings sind sie über einen Browser zugänglich. Diese Kombi aus Website und App kann von Google ähnlich wie herkömmliche Websites indexiert werden. 
Die Indexierung einer Website ist wichtig, denn sie bestimmt über die Sichtbarkeit der Website. Der Index ist ein großes strukturiertes Verzeichnis, aus dem der Algorithmus von Google seine Informationen zieht. Eine Website kann in den Suchergebnissen erst auftauchen, wenn sie im Index gelistet ist.
Progressive Web Apps bieten Nutzern gleichzeitig auch die Möglichkeit, Inhalte ähnlich wie bei nativen Apps zu verwenden, und sind auf verschiedenen Plattformen verfügbar. “Mobile First” ist gerade für Entwickler:innen immer noch sehr wichtig, denn viele Inhalte aus dem WWW werden über Smartphones oder Tablets abgegrufen. Wer also eine hybride Version eine Website anbietet (PWA), die auch am Smartphone top performed, kann sich damit einen entscheidenden Vorteil erarbeiten. 

PWAs bieten alle Vorteile nativer Apps, ohne dass eine Installation erforderlich ist. Sie sind leichter zu entwickeln, zu crawlen und zu nutzen, was auch ein Grund ist, warum sie eine attraktive Option für mobile Anwendungen sind.

Der Hintergrund

Die Technologie hinter PWAs geht auf eine Initiative von Google zurück.

Website-Betreibende haben verschiedene Möglichkeiten, ihre Inhalte für mobile Nutzer bereitzustellen: mobile Optimierung oder eben native Apps. 
Native Apps werden über App Stores installiert, während Responsive Web Design Websites an alle Geräte anpasst. Die Apps sind dabei eigenständige Systeme und meist nicht direkt über Suchmaschinen zugänglich.

Google hat auf die wachsende Nutzung geschlossener Web-Systeme reagiert und das App Indexing eingeführt, wodurch Links zu App-Inhalten erstellt und indexiert werden können. Wir haben gelernt: Indexierung ist entscheidend für die Sichtbarkeit, und das betrifft nicht nur Websites, sondern auch Apps.
Durch das App Indexing erscheinen App-Ergebnisse nun auch in der Google-Suche, wenn die entsprechende App bereits auf dem Gerät installiert ist.

Google fördert Progressive Web Apps (PWA), die die Vorteile von Apps und Websites kombinieren. PWAs sind ohne Installation nutzbar, passen sich an verschiedene Geräte an und funktionieren auch bei schlechter Internetverbindung. Eigentlich mega, oder?

Wir fassen mal zusammen, was PWAs bieten:

  • Nutzung auf allen Geräten

  • Funktion auch offline

  • Schnelles Laden

  • Hervorragende User Experience

Google definiert PWAs als zuverlässig, schnell und benutzerfreundlich. Und natürlich nicht zu vergessen: Was Google mag, ist meist sichtbarer als das, was Google nicht mag. 

Technisch: So funktionieren PWAs 

Jetzt wird es etwas technisch, wir versuchen aber, es so einfach wie möglich zu halten. Wer gerne lesen möchte, wie PWAs funktionieren und das an Hand eines praktischen Beispiels genauer verstehen möchte, der kann sich gerne diesen Artikel anschauen. 

Progressive Web Apps (PWA) basieren auf drei zentralen Hauptkomponenten: Service Worker, Application Shell und Web App Manifest. Und die erklären wir jetzt mal. 

  1. Service Worker: Diese JavaScript-Dateien ermöglichen das Laden und Cachen von Inhalten im Hintergrund, wodurch PWAs auch ohne Internetverbindung funktionieren. Sie minimieren Ladepausen und können ganze Programmabläufe konfigurieren, um Inhalte vor dem Klick auf einen Link zu laden.

  2. Application Shell: Diese Komponente sorgt dafür, dass die mobile Ansicht der PWA generiert wird und sich an den jeweiligen Browser anpasst. Die App Shell bildet das Grundgerüst für dynamisch geladene Inhalte und wird im Cache des Geräts gespeichert, wodurch das Design der PWA der Optik einer nativen App ähnelt.

  3. Web App Manifest: Diese JSON-Datei wird auf dem Server hinterlegt und ermöglicht es, die PWA wie eine native App auf dem Endgerät abzuspeichern. Sie definiert das App-Icon, die Möglichkeit, die App im Browser oder eigenständig zu laden, und erlaubt das Versenden von Push-Nachrichten, wenn der Nutzer dies bei der „Installation“ bestätigt.

JSON steht für JavaScript Object Notation und ist ein Datenformat oder auch Datenaustauschformat, was in einer einfach lesbaren Textform vorhanden ist. Ein JSON Objekt beginnt mit einer geschwungenen Klammer - für alle, die schon mal Website Code gesehen haben und sich die Frage gestellt haben.

Kurzer Überblick: die Vorteile

Einige der Vorteile haben wir im Laufe dieses Artikels immer mal wieder erwähnt, jetzt hier nochmal alle im Überblick. 

Die Entwicklung von Progressive Web Apps (PWA) ist deutlich kostengünstiger als die von nativen Apps und erfordert weniger Pflegeaufwand. Das liegt unter anderem daran, dass es weniger komplex ist eine PWA zu bauen - weniger komplex, ergo weniger teuer. 

Updates können kontinuierlich erfolgen, ohne dass eine Bindung an App Stores notwendig ist, was es den Webmastern ermöglicht, ihre PWA selbst zu promoten. Und es gibt damit auch keine Kosten für App Stores. 

Die Inhalte der PWA können indexiert werden und somit in den Suchergebnissen ranken. Da Google hinter der Initiative steckt , gibt es auch das App Indexing und damit etwas Push durch Google. 

Da es keine Plattform-Beschränkung gibt, können User die Inhalte der PWA mit jedem mobilen Endgerät verwenden. Auch super, denn bei Apps für Smartphones müssen diese an das jeweilige Betriebssystem des Endgeräts angepasst werden - was hier nicht der Fall ist. 

Web-Inhalte lassen sich bei nahezu jeder Verbindungsqualität nutzen, und die Bindung der User an die eigenen Webinhalte wird durch die „Installation“ der PWA erhöht. Fallen wir also mal für ein paar Tage in die Steinzeit zurück (ohne Internetverbindung), kann man PWA Inhalte trotzdem anschauen. 

Summary 

Website oder App? Auf diese Frage gibt es mit PWAs eine dritte Antwort, die Unternehmen eine tolle Möglichkeit bietet, ihre Sichtbarkeit im Web zu erhöhen. Sie kombinieren die Vorteile von Websites und nativen Apps, was sie zu einer flexiblen und kosteneffizienten Option macht. Unternehmen, die ihre digitale Präsenz neu ausrichten (eine neue Website wollen oder auch mal über eine App nachgedacht haben), sollten die Implementierung von PWAs ernsthaft in Betracht ziehen, denn die Vorteile sind nicht von der Hand zu weisen. 

Mehr Blogartikel findet ihr hier: Blog von Flanke 7.

Du hast ein spannendes Projekt?

Philip Vögele Emoji

Nimm gerne Kontakt mit uns auf,
wir freuen uns auf den Austausch mit dir.

Mehr Beiträge

  1. | Web Development

    Webdesign ist mehr als nur die Zusammenstellung von Farben und Schriften. Es ist ein komplexes Zusammenspiel aus verschiedenen Det..

  2. | Web Development

    In einer Suchmaschine gefunden zu werden ist zum einen nicht einfach und auf der anderen Seite etwas, dem sich eigentlich jeder wi..

  3. | Web Development

    Schon mal vom BFSG gehört? Ab spätestens Mitte 2025 wird es für alle Unternehmen in Europa ein Thema werden, die eine Website oder..