StudySmarter - Die all-in-one Lernapp.
4.8 • +11k Ratings
Mehr als 5 Millionen Downloads
Free
Americas
Europe
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.
Entdecke über 50 Millionen kostenlose Lernmaterialien in unserer App.
Lerne mit deinen Freunden und bleibe auf dem richtigen Kurs mit deinen persönlichen Lernstatistiken
Jetzt kostenlos anmeldenDu 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.
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.
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.
Doch was sind nun eigentlich die Vorteile von PWAs?
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:
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.
Neben den Vorteilen gibt es auch ein paar Gründe, die gegen die Verwendung von PWAs sprechen:
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.
Es folgen nun noch ein paar Anwendungsbeispiele, bei denen bereits PWAs verwendet werden – vielleicht nutzt Du die eine oder andere App sogar selbst.
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.
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:
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.
Nun soll noch geklärt werden, welche Tools Du verwenden kannst, um eine PWA zu erstellen.
Tool | Kurzbeschreibung |
ReactJS | ReactJS ist eine Open-Source-JavaScript-Bibliothek, mit der eine einfache Erstellung einer PWA für verschiedene Browser und Betriebssysteme möglich ist. |
Polymer | Polymer ist ebenfalls eine Open-Source-JavaScript-Bibliothek, die verwendet werden kann, um Web-Apps und auch PWAs zu entwickeln. |
Vue.JS | Vue.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-Builder | PWA-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.
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.
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.
Karteikarten in Progressive Web Apps15
Lerne jetztErgä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
Du hast bereits ein Konto? Anmelden
Die erste Lern-App, die wirklich alles bietet, was du brauchst, um deine Prüfungen an einem Ort zu meistern.
Melde dich an für Notizen & Bearbeitung. 100% for free.
Speichere Erklärungen in deinem persönlichen Bereich und greife jederzeit und überall auf sie zu!
Mit E-Mail registrieren Mit Apple registrierenDurch deine Registrierung stimmst du den AGBs und der Datenschutzerklärung von StudySmarter zu.
Du hast schon einen Account? Anmelden