• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Awantego

  • Unique Content
  • Lead Pilot
  • Websites
  • Blog
  • Kontakt
You are here: Home / Lexika / Was ist eine PWA?

21. Dezember 2019 by Janina Winkler

Was ist eine PWA?

Bei einer progressiven Web App (PWA) handelt es sich um eine Webseite, die mit einer Vielzahl verschiedener Charakteristika versehen ist. Bislang waren sie nur bei nativen Apps vorhanden. Eine PWA kann man daher als eine Symbiose aus einer responsiven Webseite und einer nativen App bezeichnen. Progressive Web Apps lassen sich wie gewöhnliche Websites mit den offenen Webstandards HTML, CSS und JavaScript entwickeln. Zusätzlich kommen die sogenannten “Service Workers“ zum Einsatz. Sie ermöglichen ein optimiertes Caching und Offline-Funktionalitäten. Die Kommunikation zwischen Client und Server wird über das sichere HTTPS-Protokoll realisiert. Lesen Sie hier alles über HTTPS.

Inhalt

  • Progressive Web Apps auf dem Vormarsch
  • Wie funktioniert eine PWA?
  • Eigenschaften der PWA
  • Vorteile und Nachteile für Nutzer und Betreiber
    • Beispiel einer PWA

Progressive Web Apps auf dem Vormarsch

Immer mehr Menschen nutzen das Smartphone, um auf Inhalte im World Wide Web zuzugreifen. In Deutschland

PWA
Das Smartphone ist nicht mehr wegzudenken.

lag der Smartphone-Nutzeranteil im Jahr 2014 bei etwa 70 Prozent. Webseitenbetreiber sahen sich bislang mit dem Problem konfrontiert, dass man sowohl eine responsive oder mobile Webseite zusätzlich zu einer nativen App entwickeln musste. Hinzu kommt die Tatsache, dass man die native App zweifach für beide mobilen Betriebssysteme Android und iOS entwickelt. Die verursacht zusätzliche Entwicklungskosten. Mit einer progressiven Web App ist die doppelte Entwicklung überflüssig. Sie ruft man wie eine gewöhnliche Webpräsenz über eine URL ab. Gleichzeitig stellt man sowohl Online- als auch Offline-Funktionalitäten zur Verfügung.

Der Begriff “Progressive Web App” besteht zu einem Teil aus “Web Apps” (Webanwendungen), die man mithilfe der offenen Webstandards HTML, CSS und JavaScript realisiert. Der andere Teil basiert auf dem Begriff “Progressive Enhancement“. Erstmals ist er im Jahr 2003 von dem US-amerikanischen Web-Pionier Steven Champeon vorgestellt worden. Bei Progressive Enhancement handelt es sich um einen Grundsatz. Er besagt, dass man die grundlegenden Funktionen einer Webanwendung in jedem Webbrowser ausführen kann. Neuartige Funktionalitäten und Features sollen man nur dann einsetzen, wenn sie vom Webbrowser auch unterstützt werden. Diese Vorgehensweise ist nötig, da PWAs u. a. auf Service-Worker-Techniken setzen, die nur in modernen Browsern zur Verfügung gestellt werden.

Wie funktioniert eine PWA?

Eine PWA wird im Webbrowser gestartet, indem der Nutzer in der Adressleiste des Browsers die URL des zuständigen Webservers eingibt und damit die erste Anfrage versendet. Der autoritäre Server nimmt die

PWA
Was funktioniert wie bei der PWA?

Anfrage an und leitet sie an die PWA weiter, die in diesem Kontext als Webanwendung fungiert. Die Progressive Web App erzeugt den Code des HTML-Dokuments, den man dann vom Webserver wieder über den HTTPS-Response-Header zurück zum Browser des Anwenders schickt. Dem Nutzer wird eine Webseite angezeigt, die aufgrund des responsiven Designs an sein Endgerät optimal angepasst ist. Obwohl sich die PWA über eine URL abgerufen lässt, kann ein Anwender die App auch über ein Icon auf dem Display des Smartphones starten oder Push-Benachrichtigungen erhalten und die Website auch offline benutzen. Technisch wird dies durch moderne Webstandards wie HTML5, CSS, JavaScript, Service Workers und optionale JS-Frameworks wie zum Beispiel React Native oder AngularJS umgesetzt.

Der essenzielle Bestandteil einer PWA sind die Service Workers. Dabei handelt es sich um eine JavaScript-Schnittstelle, die für Progressive Web Apps eine Vielzahl unterschiedlicher Funktionalitäten zur Verfügung stellt, wie beispielsweise den Offline-Modus. Einmal abgerufen, kann man Inhalte der PWA beim nächsten Besuch auch ohne eine aktive Internetverbindung anzeigen. Auch von den nativen Apps bekannte Push-Notifikationen lassen sich mit Service Workern realisieren. Moderne JS-Frameworks wie React Native oder Angular stellen bereits vorgefertigte Service Worker bereit, sodass man diese nicht selbst programmieren muss.

Mehr zum Thema:
Was ist WP-Rocket?

Eigenschaften der PWA

Zusätzlich zu ihren Charakteristika als Webpräsenzen stellen Progressive Web Apps zahlreiche Sonderfunktionen zur Verfügung, die zuvor ausschließlich nativen Apps vorbehalten gewesen sind.

  1. Add-To-Homescreen

Die Add-To-Homescreen-Funktion kann bei vielen aktuellen Internetbrowsern über das Hamburger-Menü-Icon abgerufen werden. Nachdem die PWA geöffnet wurde kann sie dem Homescreen auf dem Smartphone hinzugefügt werden. Dort erscheint ein für die jeweilige PWA spezifisches Icon, über das sich die App schnell und einfach starten lässt, auch wenn keine aktive Internetverbindung vorhanden ist.

       2. Push-Benachrichtigungen

PWA
Durch Push-Benachrichtigungen macht man auf Rabatte aufmerksam.

Die Push-Benachrichtigungen sind ebenfalls von den nativen Smartphone-Apps bekannt. Betreiber der PWA können Nutzer über Push-Notifikationen auf aktuelle Rabatte, Aktionen oder Events aufmerksam machen.

        3. Offline-Funktionalitäten

Durch die Nutzung der Caching-Funktion, die Service Worker zur Verfügung stellen, können Nutzer auf einmal abgerufene Inhalte auch offline zugreifen. Auch diese Funktionalität erinnert an native Apps, die keine aktive Internetverbindung voraussetzen, um funktionsfähig zu sein.

Vorteile und Nachteile für Nutzer und Betreiber

Die mentale Hürde, eine App auf einem Tablet-PC oder Smartphone vor der eigentlichen Nutzung installieren zu müssen, ist wesentlich höher als bei einer Webpräsenz. Hier punkten PWAs, weil man sie nicht auf dem mobilen Gerät installieren muss und sie zudem auch weniger Speicherplatz und Ressourcen benötigen als native Apps. Betreiber profitieren von der Tatsache, dass ihre App weder einen Freigabeprozess der App-Store-Betreiber durchlaufen muss, noch unter der direkten Kontrolle durch Google oder Apple untersteht.

Kunden favorisieren im Alltag responsive Websites, die auf verschiedenen Geräten gut aussehen und sich gleichermaßen gut bedienen lassen. Trotz der kontinuierlich wachsenden Nachfrage nach mobilen Websites sind mobil genutzte Websites hierzulande immer noch im hohen Maße von der flächendeckend schlechten Breitband-Verbindung abhängig. Genau hier können PWAs auf voller Linie überzeugen. Progressive Web Apps speichern Inhalte auf dem lokalen Gerät ab. Dadurch muss man diese nicht bei jedem Abruf immer wieder über das Internet laden. Der flottere Zugriff auf Daten sorgt zudem für eine verbesserte User Experience, die in der Regel eine bessere Konversionsrate mit sich bringt.

PWA Website
Wann wird die Website favorisiert?

Obwohl PWAs mit vielen Vorteilen punkten, bringt der Einsatz dieser Technologie auch einige Nachteile mit sich. Um PWAs nutzen zu können, muss der Webbrowser des Nutzers eine vollständige Unterstützung für diese Technologie bieten. Aktuelle Webbrowser wie Chrome, Firefox, Safari und Microsoft Edge bieten volle Unterstützung für die PWA-Technologie. Probleme gibt es jedoch mit dem Microsoft Internet Explorer, der keinerlei Unterstützung für PWAs zur Verfügung stellt, obwohl sie noch Millionen Nutzer verwenden.

Beispiel einer PWA

Der weltbekannte Webdienst Twitter hat kürzlich Twitter Lite vorgestellt. Bei diesem Produkt handelt es sich um eine Progressive Web App. Sie hat dabei geholfen, das Nutzererlebnis zu verbessern. Dies gilt, wenn Nutzer von einem Smartphone oder Tablet-PC auf Twitter zugreifen. Twitter Lite bietet einen Offline-Modus und lädt in unter fünf Sekunden über eine gewöhnliche 3G-Verbindung.

Ähnliche Artikel

  • Konsumentenverhalten 2020: Neuste Erkenntnisse aus… 24. Februar 2020
  • 7 Gründe, warum Ihr Social Media Plan nicht funktioniert 3. April 2019
  • Neukunden gewinnen - Strategien für den B2B Bereich 19. September 2019
  • Was ist eine Google Penalty? 17. Juni 2019

Filed Under: Allgemein, Software Tagged With: App, Daten, Google, PWA, Speicher, Technologie, Web, Website

Primary Sidebar

Neueste Artikel im Blog

Produktsuche online

Produktsuche im E-Commerce: So suchen Kunden nach Produkten

29. Oktober 2020

Was sind Produktkategorien im Marketing, wie werden diese erstellt und zu welchem Zweck?

8. Oktober 2020

Produktpräsentation im Online Shop

Produktpräsentation für E-Commerce: So verkaufen Sie online richtig

2. Oktober 2020

AXCD 2020: Die Content Konferenz

AXCD 2020: Wir sind dabei. Und Sie?

25. September 2020

Wirkungsvolle Tipps, um die Konversionsrate in Ihrem Online Shop zu steigern

11. September 2020

7 Tipps für professionelle Produktbeschreibungen

14. August 2020

Produktvorteile

So bringen Sie Produktvorteile in Ihren Produktbeschreibungen auf den Punkt

5. August 2020

So erstellen Sie Texte für Ihre Produktpalette

31. Juli 2020

5 Regeln einer erfolgreichen Produktpräsentation im Online Shop

24. Juli 2020

Kontakt zur Agentur

Agentur Awantego
Tel.: +49(0)711/48890-50
E-Mail: info@awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Traumjob bei Awantego:

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Downloads / Tutorials

  • Downloads
  • Tutorials

Weitere Anleitungen und Tutorials finden Sie im Blog von Awantego.com

Am meisten gelesen

  • Unique Content – Die Technik dahinter
  • Marketing Lexikon
  • Marketing Automation
  • Mehr Kunden mit Newsletter-Marketing
  • Was kostet Ihre neue Website?
  • Was ist WordPress?

Weitere Beiträge im Blog

Online Shops und Corona Krise: Welche Inhalte kommen gut an?

6. Mai 2020

Produktbeschreibungen für Online Apotheken erstellen

Produktbeschreibungen für Online Apotheken

30. April 2020

Amazon_SEO_Produktbeschreibungen Amazon

Produktbeschreibungen für Amazon: So erstellen Sie ansprechende Produkttexte

18. April 2020

5 Express Tipps für Online Shops in der Corona Krise

7. April 2020

Vorteile der automatischen Texterstellung für Unternehmen

1. April 2020

automatische Texte für E-Commerce

So schreiben Sie gute Kategorietexte für Ihren Online Shop

26. März 2020

automatische Texte erstellen

Automatische Texterstellung: Schreiben Sie Ihre Texte immer noch selbst?

20. März 2020

WooCommerce Tutorial: Produktseiten mit Elementor erstellen

2. März 2020

Konsumentenverhalten wirs immer mehr digitalisiert

Konsumentenverhalten 2020: Neuste Erkenntnisse aus der Konsumentenforschung

24. Februar 2020

KI

Wie können Online Händler von KI profitieren?

30. Januar 2020

Retouren

Tipps zur Senkung der Retourenquote

20. Januar 2020

automatische Textgenerierung

Automatische Textgenerierung für natürlich wirkende Texte aus Daten

3. Januar 2020

Die Rolle von Unique Content in der Content Marketing Strategie

12. Dezember 2019

Aktuelle Tutorials

  • Yoast nutzen – So nutzen Sie Yoast für Ihren Text

  • Ahrefs Tutorial

  • Tutorial: Tablepress – einfach eine Tabelle erstellen

  • PDFs und Lead-Magnete mit ActiveCampaign versenden

  • WordPress umziehen

Footer

Kontakt

Digital-Agentur Awantego
Tel.: +49 (0)711/48890-50

E-Mail: info@awantego.com
Web: www.awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Jobs bei Awantego

Offene Stellen bei Awantego

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Jetzt bewerben

E-Mail: jobs@awantego.com
Tel.: 0711-4889050

Gastautoren

Informationen für Gastautoren

Online Marketing Lexikon

Im Marketing-Lexikon von Awantego erläutern wir alle wichtigen Begriffe zum Thema Online-Marketing kompakt und verständlich.

Die wichtigsten Themen:

Automated Unique Content

Websites

Lead Pilot

Was kostet eine Website?

Online Marketing Downloads

Online Marketing Tutorials

Wichtige und anspruchsvolle Aufgaben beschreiben wir in der Rubrik
WordPress Tutorials .

Downloads & Anleitungen

Im Download-Bereich von Awantego.com finden Sie Anleitungen, Tutorials und eBooks rund um das Thema Marketing und WordPress

Neueste Beiträge im Blog

Mit diesen Tipps verhindern Sie den Kaufabbruch

Warum ist USP so wichtig für Ihr Marketing?

So erstellen Sie Produktbeschreibungen für erklärungsbedürftige Produkte

Machen Sie Ihren Online Shop bekannt: 5 wirkungsvolle Tipps für mehr Kunden

Produktnutzen beschreiben: Tipps für gute Produktbeschreibungen

Darum geht’s im Blog

Automatic Unique ContentAutomatische TexteContentContent-MarketingE-CommerceFacebookKunden gewinnenMarketingOnline-MarketingOnline ShopProduktbeschreibungenSEOSocial MediaSuchmaschinenoptimierungTextUnique ContentUnternehmenWebsiteWerbungWordpress
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2021 · Awantego.com ·

Diese Website benutzt Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.OK