Open in App
Login Anmelden

Select your language

Suggested languages for you:
StudySmarter - Die all-in-one Lernapp.
4.8 • +11k Ratings
Mehr als 5 Millionen Downloads
Free
|
|
Progressive Web Apps

Du kennst das Problem vielleicht: Du rufst eine Website über Dein Smartphone auf und stellst fest, dass die Seite nicht für mobile Geräte optimiert ist. Die Schrift ist viel zu klein, das Scrollen funktioniert irgendwie auch nicht richtig und die Inhalte laden nur zur Hälfte. 

Inhalt von Fachexperten überprüft
Kostenlose StudySmarter App mit über 20 Millionen Studierenden
Mockup Schule

Entdecke über 50 Millionen kostenlose Lernmaterialien in unserer App.

Progressive Web Apps

Illustration

Lerne mit deinen Freunden und bleibe auf dem richtigen Kurs mit deinen persönlichen Lernstatistiken

Jetzt kostenlos anmelden

Nie wieder prokastinieren mit unseren Lernerinnerungen.

Jetzt kostenlos anmelden
Illustration

Du kennst das Problem vielleicht: Du rufst eine Website über Dein Smartphone auf und stellst fest, dass die Seite nicht für mobile Geräte optimiert ist. Die Schrift ist viel zu klein, das Scrollen funktioniert irgendwie auch nicht richtig und die Inhalte laden nur zur Hälfte.

Eine Lösung dafür, wenn die Website nicht einfach herkömmlich – also durch ein Responsive Webdesign – an das passende Endgerät angepasst werden soll: Progressive Web Apps.

Progressive Web Apps Definition

Also, das wichtigste zuerst: Was ist eine Progressive Web App – abgekürzt PWA?

Unter einer Progressive Web App versteht man eine hybride Website, die über einen herkömmlichen Browser aufgerufen werden kann, jedoch die Eigenschaften von Smartphone Apps besitzt.

Es handelt sich also im Grunde einfach um eine Kombination aus Website und nativer App. Doch wie werden PWAs aus SEO-Sicht betrachtet?

Eine native App ist eine Anwendung, die speziell für mobile Endgeräte und das jeweilige Betriebssystem (z. B. Android oder iOS) konzipiert wurde.

Progressive Web Apps SEO

Können PWAs SEO gerecht sein? Die Antwort ist schlicht: ja. PWAs können, wie normale Webseiten auch indexiert werden und somit in der Googlesuche ranken. Auch native Apps können theoretisch indexiert werden, allerdings bleibt hier weiterhin der Nachteil, dass sie installiert werden müssen, bevor man sie verwenden kann.

Die 2019 von Google eingeführte "Mobile First-Indexierung" sorgt unter anderem dafür, dass PWAs bei der Websuche weiter oben ranken. Dieses Feature gilt allerdings nur für ab dem Zeitpunkt neu hinzugefügte Websites – ältere Seiten werden nach wie vor nach dem alten Prinzip bewertet.

Weitere Informationen findest Du in den Erklärungen zu den Suchmaschinen und zum PageRank auf StudySmarter.

Vorteile Progressive Web Apps

Doch was sind nun eigentlich die Vorteile von PWAs?

  • PWAs besitzen keine Beschränkung auf eine bestimmte Plattform und können mit jedem mobilen Endgerät verwendet werden.
  • Es ist möglich eine PWA bzw. ihre Inhalte zu indexieren und damit ranken zu lassen.
  • Die Inhalte einer PWA können bei jeder Verbindungsqualität genutzt werden – also auch offline.
  • Eine PWA benötigt keinen App Store – die App muss also selbst vertrieben werden.
  • PWAs kosten in ihrer Entwicklung deutlich weniger als herkömmliche native Apps. Außerdem ist die Wartung weniger aufwendig.
  • Kontinuierliche Updates durchführbar.
  • Zugriff auf Kamera, Mikrofon, Sensorik sowie Push-Nachrichten und Geolocation sind für PWAs ebenfalls möglich.

Gegenüber normaler Websites haben PWAs also eigentlich nur Vorteile. Doch wie sieht es beim Vergleich mit nativen Apps aus?

Vorteile von PWAs gegenüber nativer Apps:

  • Müssen nicht extra über einen App Store installiert werden
  • Einfacher zu erstellen
  • Leichter zu crawlen
  • Nicht an ein Betriebssystem gebunden

Noch mal zur Erinnerung: Ein (Web-)Crawler ist ein Programm, das Inhalte im Internet durchsucht und diese indexiert. Mehr dazu findest Du in der Erklärung zum Webcrawler auf StudySmarter.

Nachteile Progressive Web Apps

Neben den Vorteilen gibt es auch ein paar Gründe, die gegen die Verwendung von PWAs sprechen:

  • PWAs eignen sich nicht so gut für hardwarenah programmierte Anwendungen und auch sehr umfangreiche, offline verwendbare Apps sind nicht so leicht umsetzbar.
  • Der Vorteil, dass kein App Store benötigt wird, kann auch ein Nachteil sein, da die Anwendung so deutlich schwerer gefunden wird. Einfach, weil die meisten Leute zuerst im App Store nach einer App suchen.
  • Es ist ein größerer Fokus auf die Web-Infrastruktur und Caching-Technologien vonnöten, damit Inhalte auch Offline zur Verfügung stehen.
  • Und zu guter Letzt ist nicht jedem bekannt, dass PWAs auch installiert werden können, um sie – wie eine native App – als Icon auf den Bildschirm eines Smartphones abzulegen.

Progressive Web Apps Funktionsweise

Wie funktionieren PWAs? Grob gesagt funktionieren die Apps mithilfe sogenannter "Service Worker" – das ist im Grunde einfach ein JavaScript. Das Service-Worker-Script sorgt dafür, dass im Hintergrund Inhalte in den Cache geladen werden und somit keine Internetverbindung benötigt wird.

Um die Plattformunabhängigkeit umzusetzen, wird ein "Application Shell" verwendet. Das sorgt dafür, dass Inhalte dynamisch, je nach verwendetem Endgeräte, geladen werden.

Weiterhin wird noch ein "Web App Manifest" in Form einer JSON-Datei benötigt. Dies ermöglicht es Nutzern, die PWA wie eine native App auf dem Endgerät zu speichern. Die App wird dabei nicht vollständig installiert, stattdessen wird lediglich die Application Shell, also das Grundgerüst, abgespeichert.

Progressive Web Apps Beispiele

Es folgen nun noch ein paar Anwendungsbeispiele, bei denen bereits PWAs verwendet werden – vielleicht nutzt Du die eine oder andere App sogar selbst.

  • Starbucks
  • BMW
  • 2048 Game
  • Uber
  • Pinterest
  • Spotify
  • Twitter
  • Google Maps Go
  • Telegram

Teilweise bieten Firmen PWAs auch zusätzlich zu nativen Apps an, vor allem, wenn letztere vorher bereits existiert haben.

Dass Du Dich in einer PWA befindest, siehst Du übrigens nur, da in der URL ganz am Ende ein entsprechender Vermerk gekennzeichnet ist. Beim Beispiel aus Abb. 1 wäre das "=mlpwa".

Ein weiterer Bereich, auf den kurz eingegangen werden soll, ist die Nutzung von PWA in der Marketingbranche.

Progressive Web Apps Marketing

Eine Branche in der PWAs eine immer wichtigere Rolle spielen ist das Marketing. Aspekte von PWAs, die für das Marketing besonders nützlich sind, sind folgende:

  • Bieten eine vergleichbar gute User Experience wie native Apps und sind dabei kostengünstiger in der Produktion.
  • Kombinieren das Beste von Web-Apps sowie nativen Apps.
  • Vorteile bei der Suchmaschinenoptimierung (SEO), da PWAs indexierbar sind und somit auch bei der Websuche angezeigt werden.

Auch im Marketing muss der Fakt berücksichtigt werden, dass PWAs nicht in App Stores angeboten werden. Bei kleineren Firmen wird das kaum eine Auswirkung haben, da deren Apps in der Regel ohnehin zufällig entdeckt werden.

Bei größeren Unternehmen kann es jedoch tatsächlich eher ein Nachteil sein. Einfach, weil Kunden es über die Jahre gewohnt sind, Apps aus App Stores herunterzuladen. Außerdem kann es ein negatives Licht auf eine Firma werfen, wenn sie eine App bereitstellt, die nicht in einem App Store zu finden ist.

Progressive Web Apps Tools

Nun soll noch geklärt werden, welche Tools Du verwenden kannst, um eine PWA zu erstellen.

ToolKurzbeschreibung
ReactJS ReactJS ist eine Open-Source-JavaScript-Bibliothek, mit der eine einfache Erstellung einer PWA für verschiedene Browser und Betriebssysteme möglich ist.
PolymerPolymer ist ebenfalls eine Open-Source-JavaScript-Bibliothek, die verwendet werden kann, um Web-Apps und auch PWAs zu entwickeln.
Vue.JSVue.JS ist ein Framework für JavaScript, dass in Kombination mit dem Quasar-Framework ebenfalls für die Erstellung von PWAs eingesetzt werden kann
PWA-BuilderPWA-Builder wurde ursprünglich von Microsoft entwickelt und ist in der Lage Websites auf ihre PWA-Tauglichkeit zu überprüfen. Außerdem ermöglicht es das Tool fehlende Komponenten nachträglich zu integrieren.

Weiterführende Informationen und was ein Framework noch einmal war, kannst Du in der gleichnamigen Erklärung auf StudySmarter nachlesen.

Nicht außer Acht gelassen werden soll zudem das Konzept AMP.

Progressive Web Apps – AMP

Doch was ist AMP eigentlich?

Bei AMP (Accelerated Mobile Pages) handelt es sich um ein optimiertes Website-Seitenformat für mobile Endgeräte.

Das AMP-Projekt wurde von Google ins Leben gerufen, ist Open-Source und soll im Grunde dafür sorgen, dass das Anzeigen von Seiten auf mobilen Plattformen beschleunigt wird. AMP ist dabei ein Webkomponenten-Framework, mit dessen Hilfe PWAs verwendet werden können.

Progressive Web Apps - Das Wichtigste

  • Progressive Web Apps Definition: Eine Progressive Web App (kurz: PWA) ist eine hybride Website, die über einen Browser aufgerufen werden kann, jedoch die Eigenschaften einer Smartphone-App besitzt.
  • Progressive Web Apps SEO: PWAs können indexiert werden und somit in der Googlesuche ranken.
  • Vorteile von Progressive Web Apps:
    • Plattformunabhängig und mit jedem mobilen Endgerät verwendbar
    • Auch offline nutzbar
    • Günstiger in ihrer Entwicklung als native Apps
  • Progressive Web Apps Beispiele: Starbucks, BMW, Pinterest, Spotify und Twitter
  • Progressive Web Apps Marketing: PWAs kombinieren das Beste von Web-Apps und nativen Apps miteinander.
  • Mögliche Tools für Progressive Web Apps sind z. B. ReactJS, Polymer, Vue.JS und PWA-Builder.
  • Bei AMP handelt es sich um ein optimiertes Website-Seitenformat für mobile Endgeräte, mit deren Hilfe ebenfalls PWAs umgesetzt werden können.

Nachweise

  1. searchmetrics.com: Progressive Web Apps. (30.11.2022)
  2. dev-insider.de: Die App als PWA – Pro und Contra. (30.11.2022)
  3. dev-insider.de: 8 Tools für PWA-Entwickler. (30.11.2022)

Häufig gestellte Fragen zum Thema Progressive Web Apps

Eine Progressive Web App (kurz: PWA) ist eine hybride Website, die über einen herkömmlichen Browser aufgerufen werden kann, jedoch die Eigenschaften einer Smartphone-App besitzt. 

PWAs werden in einer bestimmten Art und Weise programmiert, damit sie sowohl die Funktionen von Websites als auch die Eigenschaften nativer Apps enthalten.   

Web Apps sind wie eine Website über einen Webbrowser erreichbar und muss nicht installiert werden. Eine PWA ist hingegen eine Kombination aus App und Website – sie ist über einen Browser erreichbar, kann aber auch installiert werden. 

Unternehmen, die bereits PWAs verwenden, sind z. B. Starbucks, BMW, Pinterest, Spotify oder Twitter. 

Finales Progressive Web Apps Quiz

Progressive Web Apps Quiz - Teste dein Wissen

Frage

Ergänze

Unter einer Progressive Web App versteht man eine ______ (1) Website, die über einen herkömmlichen ______ (2) aufgerufen werden kann, jedoch die Eigenschaften von ______ (3) besitzt. 

Antwort anzeigen

Antwort

(1) hybride  

(2) Browser  

(3) Smartphone Apps 

Frage anzeigen

Frage

Was ist eine native App?

Antwort anzeigen

Antwort

Eine native App ist eine Anwendung, die speziell für mobile Endgeräte und das jeweilige Betriebssystem konzipiert wurde.

Frage anzeigen

Frage

Wahr oder falsch

Progressive Web Apps können nicht SEO gerecht umgesetzt werden.

Antwort anzeigen

Antwort

Falsch

Frage anzeigen

Frage

Welches Konzept wurde 2019 von Google in Hinsicht auf die Indexierung neu eingeführt?

Antwort anzeigen

Antwort

Mobile First-Indexierung

Frage anzeigen

Frage

Vorteil oder Nachteil

Es ist möglich eine PWA bzw. ihre Inhalte zu indexieren und damit ranken zu lassen.

Antwort anzeigen

Antwort

Vorteil

Frage anzeigen

Frage

Vorteil oder Nachteil

Eine PWA benötigt keinen App Sstore.

Antwort anzeigen

Antwort

Beides

Frage anzeigen

Frage

Vorteil oder Nachteil

Progressive Web Apps sind nicht an ein Betriebssystem gebunden.

Antwort anzeigen

Antwort

Vorteil

Frage anzeigen

Frage

Vorteil oder Nachteil

Progressive Web Apps benötigen einen ausreichenden Fokus auf ihre Web-Infrastruktur und Caching-Technologien.

Antwort anzeigen

Antwort

Nachteil

Frage anzeigen

Frage

Vorteil oder Nachteil

Progressive Web Apps können auch installiert werden.

Antwort anzeigen

Antwort

Nachteil

Frage anzeigen

Frage

Welche drei Komponenten werden i. d. R. benötigt, damit eine PWA funktioniert?

Antwort anzeigen

Antwort

  • Service Worker
  • Application Shell
  • Web App Manifest

Frage anzeigen

Frage

Nennen mindestens fünf Beispiele für eine Progressive Web App.

Antwort anzeigen

Antwort

  • Starbucks
  • BMW
  • 2048 Game 
  • Uber
  • Pinterest
  • Spotify
  • Twitter
  • Google Maps Go
  • Telegram

Frage anzeigen

Frage

Was ist eine Web-App?

Antwort anzeigen

Antwort

Eine Web-App läuft im Gegensatz zu einer nativen App in einem entsprechenden Webbrowser und muss nicht installiert werden. 

Frage anzeigen

Frage

Ergänze

PWAs bieten eine vergleichbar gute ______ (1) wie native Apps und sind dabei ______ (2) in der Produktion. 

Antwort anzeigen

Antwort

(1) User Experience 

(2) kostengünstiger  

Frage anzeigen

Frage

Wahr oder falsch

PWAs spielen eine wichtige Rolle in der Marketingbranche.

Antwort anzeigen

Antwort

Wahr

Frage anzeigen

Frage

Nenne Tools, die verwendet werden können, um eine Progressive Web App zu erstellen.

Antwort anzeigen

Antwort

  • ReactJS
  • Polymer
  • Vue.JS
  • PWA-Builder

Frage anzeigen

Teste dein Wissen mit Multiple-Choice-Karteikarten

Wahr oder falschProgressive Web Apps können nicht SEO gerecht umgesetzt werden.

Vorteil oder NachteilEs ist möglich eine PWA bzw. ihre Inhalte zu indexieren und damit ranken zu lassen.

Vorteil oder NachteilEine PWA benötigt keinen App Sstore.

Weiter

Karteikarten in Progressive Web Apps15

Lerne jetzt

Ergänze

Unter einer Progressive Web App versteht man eine ______ (1) Website, die über einen herkömmlichen ______ (2) aufgerufen werden kann, jedoch die Eigenschaften von ______ (3) besitzt. 

(1) hybride  

(2) Browser  

(3) Smartphone Apps 

Was ist eine native App?

Eine native App ist eine Anwendung, die speziell für mobile Endgeräte und das jeweilige Betriebssystem konzipiert wurde.

Wahr oder falsch

Progressive Web Apps können nicht SEO gerecht umgesetzt werden.

Falsch

Welches Konzept wurde 2019 von Google in Hinsicht auf die Indexierung neu eingeführt?

Mobile First-Indexierung

Vorteil oder Nachteil

Es ist möglich eine PWA bzw. ihre Inhalte zu indexieren und damit ranken zu lassen.

Vorteil

Vorteil oder Nachteil

Eine PWA benötigt keinen App Sstore.

Beides

Schließ dich über 22 Millionen Schülern und Studierenden an und lerne mit unserer StudySmarter App!

Die erste Lern-App, die wirklich alles bietet, was du brauchst, um deine Prüfungen an einem Ort zu meistern.

  • Karteikarten & Quizze
  • KI-Lernassistent
  • Lernplaner
  • Probeklausuren
  • Intelligente Notizen
Schließ dich über 22 Millionen Schülern und Studierenden an und lerne mit unserer StudySmarter App! Schließ dich über 22 Millionen Schülern und Studierenden an und lerne mit unserer StudySmarter App!

Finde passende Lernmaterialien für deine Fächer

Melde dich an für Notizen & Bearbeitung. 100% for free.

Fang an mit StudySmarter zu lernen, die einzige Lernapp, die du brauchst.

Jetzt kostenlos anmelden
Illustration