Was sind Progressive Web Apps und wie installiere ich sie?

Was sind Progressive Web Apps und wie installiere ich sie?

Apps dominieren Ihr Telefon. Apps beeinflussten Ihren Desktop oder Browser lange Zeit nicht in gleicher Weise. Das hat sich in den letzten Jahren geändert. Progressive Web Apps (PWAs) gewinnen an Bedeutung und verändern unsere Interaktionen mit allen Arten von Websites.





Aber was genau ist eine Progressive Web App? Was macht eine PWA, was eine Website nicht tut? Hier ist, was Sie über progressive Web-Apps wissen müssen.



Was ist eine progressive Web-App?

Progressive Web Apps sind Webanwendungen, die Benutzern eine normale Website anbieten, aber als native mobile App erscheinen. PWAs versuchen, die Benutzerfreundlichkeit einer nativen mobilen App in den modernen Browser-Feature-Set zu integrieren, und nutzen dabei die Fortschritte in beiden Entwicklungsbereichen voll aus.





Was definiert dann eine PWA?

  • Universal : Eine PWA muss für jeden Benutzer nahtlos (naja, fast) funktionieren, unabhängig von seinem Browser.
  • Responsiv : PWAs sollten mit jedem Gerät wie Laptop, Tablet, Smartphone usw. funktionieren.
  • Entwurf : Das Design sollte native mobile Apps nachahmen, d. h. optimierte, leicht auffindbare Menüs mit einfacher Interaktivität für erweiterte Funktionen.
  • Sicher : PWAs sollten HTTPS verwenden, um Benutzerdaten zu schützen.
  • Auffindbar: Benutzer können PWAs finden und sie sind leicht als Anwendung (und nicht als 'Site') zu identifizieren.
  • Engagement: eine PWA muss Zugriff auf native Engagement-Funktionen wie Push-Benachrichtigungen haben.
  • Aktualisierung: PWAs bleiben auf dem neuesten Stand und bedienen die neuesten Versionen eines Dienstes oder einer Site.
  • Installation: ermöglichen es Benutzern, die PWA einfach auf ihrem Startbildschirm zu 'installieren', ohne einen App Store zu benötigen.
  • Teilen: PWAs benötigen nur eine einzige URL zum Freigeben, ohne Installation.

Wie Sie sehen, zielen PWAs darauf ab, Benutzern ein umfassendes Website-Erlebnis mit den optimierten Funktionen und dem Schnittstellendesign einer nativen App zu bieten.



Wie funktioniert eine progressive Web-App?

Der Schlüssel zu Progressive Web Apps sind Browser-Service-Mitarbeiter.

Ein Service-Mitarbeiter ist ein Skript, das im Hintergrund Ihres Browsers ausgeführt wird, 'getrennt von einer Webseite, das die Tür zu Funktionen öffnet, die keine Webseite oder Benutzerinteraktion erfordern'. Sie könnten Servicemitarbeiter wie z. B. einsetzen Push-Benachrichtigungen und Hintergrundsynchronisierung im Moment, aber die unmittelbare PWA-Zukunft gibt diesen Skripten mehr Macht.



Als solche bilden Servicemitarbeiter die Grundlage des PWA-Standards und verwenden den Web-Cache für fast sofortige Ergebnisse.

Vor Servicemitarbeitern war das Browser-Cache-Skript Anwendungs-Cache (oder App-Cache). App Cache ist in einer Vielzahl von Offline-First-Diensten enthalten, war jedoch etwas fehleranfällig. Darüber hinaus hat App Cache einige bekannte Einschränkungen, da Eine Liste für sich erklärt.



Das Hauptproblem für Entwickler ist jedoch der Mangel an direkter Interaktion mit der genauen Funktionsweise von AppCache, die Entwickler daran hindert, Probleme genau zu beheben, sobald sie auftreten. Websites und Dienste mit voller Offline-Funktionalität wiederum waren eine riskante Wahl.

Servicearbeiter hingegen halten nur so lange durch, wie ihr Handeln erforderlich ist. Wenn Sie in einer PWA auf etwas klicken oder eine Funktion verwenden, wird ein Servicemitarbeiter aktiv. Der Service-Worker (denken Sie daran, es ist ein Skript) verarbeitet das Ereignis und entscheidet, ob der Offline-Cache die Anforderung abschließen kann. Die Idee ist, dass es mehrere Offline-Caches für die PWA gibt, aus denen sie wählen kann, was eine viel größere Bandbreite an Offline-Funktionen bietet.

Darüber hinaus dient der Cache nicht nur der Offline-Geschwindigkeitssteigerung. Sie gehen beispielsweise zu einer PWA, aber Ihre Verbindung ist extrem lückenhaft. Der Service Worker bedient einen voll funktionsfähigen vorherigen Cache, ohne Ihre Erfahrung zu unterbrechen.

Progressive Web-App-Browser-Unterstützung

Es gibt zwei Voraussetzungen für die Verwendung einer Progressive Web App: einen kompatiblen Browser und einen PWA-fähigen Dienst.

Betrachten wir zunächst die Browser. Sie haben zwei Möglichkeiten, um die PWA-Browserunterstützung zu überprüfen. Der erste ist Jake Archibalds Ist Servicemitarbeiter bereit ? die den PWA-Ready-Status der wichtigsten Browser sowie das Samsung-Internet praktisch anzeigt.

Für einen detaillierteren Überblick über die Unterstützung von PWA-Browsern sollten Sie sich ansehen Kann ich benutzen , eine Website, die darauf spezialisiert ist, die Implementierung verschiedener Web- und Browsertechnologien nach Browserversion aufzulisten. Wenn Sie beispielsweise 'Service-Mitarbeiter' in die Suchleiste eingeben, finden Sie eine Tabelle mit der Versionsnummer, mit der jeder Browser PWA-Service-Mitarbeiter implementiert hat.

Die Tabelle Kann ich Servicemitarbeiter verwenden bestätigt, dass alle gängigen Browser PWAs unterstützen. Es veranschaulicht auch die PWA-Unterstützung für mehrere alternative Desktop-Browser und mobile Browser.

Noch ein bisschen aufschlüsseln:

  • Desktop-Browser (Vollständige Unterstützung): Chrome, Firefox, Opera, Edge, Safari
  • Desktop-Browser (teilweise Unterstützung/veraltete Version): QQ-Browser, Baidu-Browser
  • Mobiler Browser (Vollständige Unterstützung): Chrome, Firefox, Safari, UC-Browser, Samsung Internet, Mint-Browser, Wechat
  • Mobiler Browser (teilweise Unterstützung/veraltete Version): QQ-Browser, Android-Browser, Opera Mobile

Die wichtigsten Browser unterstützen also alle PWAs. Microsoft Edge und Safari sind die neuesten Ergänzungen zur vollständigen Supportliste. Umgekehrt verwenden sowohl QQ Browser als auch Baidu Browser nun veraltete Versionen und sind als solche in die zweite Stufe gefallen.

So finden und installieren Sie eine progressive Web-App

Nachdem Sie nun wissen, welchen Browser Sie verwenden müssen, können Sie darüber nachdenken, nach einer PWA zu suchen und diese zu installieren. In diesem Beispiel verwende ich ein Samsung Galaxy S8 mit Google Chrome.

Progressive Web-Apps sind überall. Viele Unternehmen haben ihre Websites und Dienste angepasst, um eine Progressive Web App-Version anzubieten. In vielen Fällen werden Sie zum ersten Mal auf eine PWA stoßen, wenn Sie die Homepage oder die mobile Website des Dienstes aufrufen, die den Zum Startbildschirm hinzufügen Dialogbox.

Sehen Sie sich das Video unten an, um zu sehen, was passiert, wenn Sie die Mobile Twitter-Site .

Natürlich ist es nicht sinnvoll, unzählige Websites zu besuchen und zu hoffen, den Startbildschirm-Trigger zu sehen. Tatsächlich ist es geradezu zeitaufwendig. Zum Glück müssen Sie dies nicht tun, da es einige Websites gibt, die sich der Katalogisierung von PWAs widmen.

Erster Versuch im Netz . Es listet eine ziemlich anständige Auswahl an PWAs auf, wobei häufig neue Optionen auftauchen. Versuchen Sie als nächstes pwa.rocks. Es hat eine kleinere Auswahl, aber einige praktische PWAs, die Sie Ihrem Gerät hinzufügen möchten.

Darüber hinaus wurde Chrome 72 für Android im Januar 2019 mit Trusted Web Activity (TWA) ausgeliefert. TWA ermöglicht das Öffnen von Chrome-Tabs im Standalone-Modus. Dadurch können PWAs wiederum im Google Play App Store angezeigt werden. Die ersten PWAs, die bei Google Play erschienen, waren Twitter Lite , Instagram Lite und Google Maps Go , wobei im Laufe der Zeit weitere angezeigt werden sollen.

Bildergalerie (2 Bilder) Expandieren Expandieren Nah dran

Werden progressive Web-Apps native Apps ersetzen?

Progressive Web Apps sind ein hervorragender Hybridschritt zwischen Ihrem Browser und einer nativen mobilen App. Werden PWAs native Apps vollständig ersetzen? Das ist ein hartes Nein von mir. PWAs eignen sich hervorragend als leichtgewichtiges Angebot, aber da sie sich derzeit hauptsächlich auf die Replikation vorhandener Websites und Dienste konzentrieren, werden sie native Apps nicht ersetzen.

Zumindest vorerst nicht.

wann ist eine cpu zu heiß

PWAs funktionieren jedoch. Auch die bei PWA Stats verfügbaren Daten belegen dies. Hier sind einige interessante Zahlen, die veranschaulichen, wie PWAs unsere Interaktionen mit häufig verwendeten Websites verändern:

  • Trivago verzeichnete eine 150-prozentige Steigerung des Engagements für Benutzer, die ihre PWA zu einem Startbildschirm hinzufügten.
  • Die PWA-Homepage von Forbes wird in nur 0,8 Sekunden vollständig geladen, während die Impressionen pro Besuch um 10 Prozent gestiegen sind. Bei der PWA von Forbes verdoppelte sich auch die Länge der Benutzersitzungen.
  • Twitter Lite verzeichnete einen Anstieg der Seiten pro Sitzung um 65 Prozent, mit einem massiven Anstieg der Tweets um 75 Prozent. Es ist auch interaktiv „in weniger als 5 Sekunden über 3G“.
  • Alibaba verzeichnete einen Anstieg der mobilen Conversions um 76 Prozent.

PWAs sind noch nicht Mainstream. Aber mit den vielen Vorteilen, die sie bieten, wie z. B. Platzersparnis auf Ihrem Gerät, werden Sie in Zukunft noch mehr davon hören.

Teilen Teilen Tweet Email Ein Leitfaden für Anfänger zum Animieren von Sprache

Animierende Rede kann eine Herausforderung sein. Wenn Sie bereit sind, Ihrem Projekt Dialog hinzuzufügen, werden wir den Prozess für Sie aufschlüsseln.

Weiter lesen Verwandte Themen Über den Autor Gavin Phillips(945 veröffentlichte Artikel)

Gavin ist Junior Editor für Windows and Technology Explained, schreibt regelmäßig am Really Useful Podcast und ist regelmäßiger Produktrezensent. Er hat einen BA (Hons) Contemporary Writing with Digital Art Practices, der aus den Hügeln von Devon geplündert wurde, sowie über ein Jahrzehnt an professioneller Schreiberfahrung. Er genießt reichlich Tee, Brettspiele und Fußball.

Mehr von Gavin Phillips

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren