Machen Sie Progressive Web App (PWA) zu Ihrem besten Freund

„PWA ist ein Revolutionär für die Webentwicklung. Es hilft, Ihre Produktivität zu steigern, indem es eine großartige Benutzererfahrung bietet, die die Vorteile von Web- und mobilen Apps zu minimalen Kosten kombiniert. “
Ein Handschlag ist eine gute Übung

Ein Shake mit PWA hält Ihren Kunden in Atem. Und PWA ist immer bereit, Ihr bester Freund zu werden. Warum senden wir dann keine Freundschaftsanfrage an PWA?

Es ist Zeit, einen guten Schritt in Richtung PWA zu machen, und ich erkläre, wie Ihre Freundschaft für Sie von PWA profitiert!

Nicht mit PWA verwechseln

Aus einigen Gründen denken viele Leute, dass PWAs Single Page Applications (SPA) sind.
Das ist falsch, wirklich sehr falsch (mit Statuscode 400 ).

Ein SPA kann ein PWA sein, aber ein PWA muss kein SPA sein.

PWA liebt es, mit allen zusammenzuarbeiten

Eine Website, die auf einem Framework oder einer Bibliothek wie ReactJs, Angular, VueJS oder sogar HTML basiert, kann eine PWA sein.

Im einfachsten Sinne ist eine Progressive Web App eine mobile Website, die mit zusätzlichen Funktionen und Merkmalen ausgestattet ist, die ihr ein "App-ähnliches" Gefühl verleihen. Es arbeitet mit einer Instanz von Browser und verwendet Service Worker, um einen reibungslosen Betrieb auch ohne eine zuverlässige Internetverbindung zu gewährleisten.

Wenn Sie den Mythos haben, dass PWA eine Google-Technologie ist, reichen diese Informationen aus, um Ihren Mythos zu löschen. Progressive Web Apps basieren auf Webstandards. Es funktioniert mit jedem Browser und jeder Plattform.

Es ist also eine Website - aber es fühlt sich an wie eine native mobile App mit einem Begrüßungsbildschirm, einem benutzerdefinierten Ladebildschirm, flüssigeren Animationen, Push-Benachrichtigungen und keiner Navigationsleiste. Ihre durchschnittlichen Endbenutzer können es als mobile App bezeichnen.

Progressive Web Applications sind Websites, die drei technische Anforderungen erfüllen müssen:

  • Muss mit HTTPS (Secure) bedient werden
  • Verfügen Sie über eine gültige Webmanifest-Datei mit einer minimalen Anzahl spezifischer Symbole
  • Sollte einen gültigen Servicemitarbeiter und minimalen Offline-Support registrieren

Nichts in diesen Anforderungen besagt, dass die Website JavaScript verwenden muss. Kurz gesagt, Sie müssen den Servicemitarbeiter mit clientseitigem JavaScript registrieren.

PWA unterstützt folgende Funktionen:

  • An einen Startbildschirm anheften - Wir können unser Web-App-Symbol auf einem Startbildschirm hinzufügen.
  • Push-Benachrichtigungen - Wir können Push-Benachrichtigungen wie in einer nativen App über die Push-API und die Benachrichtigungs-API für das Web integrieren.
  • Begrüßungsbildschirm - Eine Manifest-Datei verwaltet den Begrüßungsbildschirm für Ihre PWA, damit Sie wie eine native App auf sie zugreifen können
  • Geo-Standort - Über die Geolocation-API können wir auf den aktuellen Standort des Benutzers zugreifen
  • Offline-Arbeitsmodus - Aufgrund des Service-Mitarbeiters, der den Caching-Mechanismus verwaltet, erhalten wir eine umfassende Benutzererfahrung, auch wenn kein Internet vorhanden ist.
  • Zugriff auf Medienfunktionen - Wir können auf Mikrofon-, Video- und Kamerageräte zugreifen. Implementieren Sie außerdem Video- und Audioanruffunktionen mithilfe der WebRTC-API.

Insgesamt müssen Sie keine separate mobile App für dasselbe Projekt entwickeln, wenn Ihre Anforderungen mit den Funktionen von PWA erfüllt werden. Dies bedeutet, dass PWA immer noch Probleme hat, einige native App-Funktionen bereitzustellen.

Ja, das ist ein unglaublicher Moment für Webentwickler. Weitere hilfreiche Features sind bereits unterwegs. PWA freut sich bereits darauf, native App-ähnliche Funktionen bereitzustellen. Werfen wir einen Blick auf die Funktionen, die uns wirklich hilfreich sein werden.

PWA wird in Zukunft folgende Funktionen unterstützen:

  • Bluetooth - Web Bluetooth API ist in der Entwicklung und wir werden in Kürze über die Webplattform auf Bluetooth zugreifen.
  • Sensoren - Sensoren sind ein sehr wichtiger Bestandteil der heutigen Entwicklungszeit. Einige Sensoren wie Umgebungslichtsensor, Näherungssensor, Beschleunigungssensor, Magnetometersensor und Gyroskopsensor sind bereits in der Entwicklung.
  • Native Sharing - Wir können den nativen Freigabemechanismus des Geräts als Teil der Web Share-API aufrufen.
  • Fingerabdrucksensor - Mithilfe der Webauthentifizierungs-API können wir Benutzer über den Fingerabdrucksensor authentifizieren. Ist es aber aus Sicherheitsgründen noch in der Entwicklung.

Warum nimmt heutzutage jeder PWA an?

Nachdem Sie einige Statistiken großer Unternehmen gelesen haben, die die PWA übernehmen, werden Sie die Leistungsfähigkeit der PWA kennen und klar verstehen, warum sich alle für die PWA entscheiden möchten.

Hier möchte ich Ihnen einige Daten aus PWA-Fallstudien bekannter Unternehmen zeigen:

  • Twitter hat die Twitter Lite Progressive Web App im April 2017 entwickelt und im Ergebnis hat Twitter die Anzahl der Seiten pro Sitzung um 65% erhöht, die Anzahl der gesendeten Tweets um 75% und die Absprungrate um 20% gesenkt.
  • Flipkart, Indiens größte E-Commerce-Website, hat 2015 beschlossen, die reine App-Strategie abzuschalten. Danach wurde Flipkart Lite von PWA bereitgestellt, und Sie werden erstaunt sein, wenn Sie die hervorragenden Ergebnisse lesen. Benutzer verbrachten mehr Zeit vor Ort mit der dreifachen Rate, die Wiedereingliederungsraten sind um 40% höher, die Conversion-Rate bei den über den Startbildschirm hinzugefügten Nutzern um 70% höher und die Datennutzung um das Dreifache niedriger als bei der nativen App.
  • Alibaba.com, die weltweit größte Online-B2B-Handelsplattform. Alibaba.com kam mit einer neuen Strategie als PWA, um sowohl Erstbesuchern als auch wiederkehrenden Besuchern eine großartige Benutzererfahrung zu bieten. Ihre neue Strategie brachte überraschende Ergebnisse. Alibaba.com erzielte eine um 76% höhere Conversion-Rate in allen Browsern, 4% mehr aktive Nutzer im Monat für iOS und 30% für Android sowie eine viermal höhere Interaktionsrate vom Bildschirm "Zum Startbildschirm hinzufügen".

Ja, das ist unglaublich und wir müssen die Schönheit der Progressive Web App akzeptieren. Jetzt verstehst du, warum ich dich zwinge, PWA zu deinem besten Freund zu machen.

Play Store ist bereit, PWAs zu veröffentlichen

Ja Ja Ja! Play Store und PWAs sind jetzt Freunde geworden. Jetzt können wir PWAs mithilfe von Trusted Web Activities (TWA) im Play Store veröffentlichen. Google Chrome 72 hat Trusted Web Activities hinzugefügt, um die Vollbild-Webansicht ohne Anzeige von URLs oder anderen Browser-bezogenen Elementen zu unterstützen. So können Sie mit Hilfe von Android Studio und einigen Kenntnissen der Android-Entwicklung eine APK für Ihre Web-App erstellen und zum Play Store hochladen.

Hier empfehle ich Ihnen, das folgende Video anzuschauen, um detaillierte Kenntnisse über TWA zu erhalten:

Die Existenz von PWAs wie Facebook Lite, Instagram Lite, Flipkart Lite und Twitter Lite verwendet hauptsächlich WebView und gibt uns ein App-ähnliches Gefühl. Beachten Sie jedoch, dass Apple TWA immer noch nicht unterstützt.

Letztendlich können wir sagen, dass PWA ein guter und kostengünstiger Ansatz für die Entwicklung unserer Web-Apps ist. Es ist sicherlich eine Zukunft der Webentwicklung. Wir hoffen, dass PWA uns in Zukunft wie immer mehr dient.

Klatsch Klatsch klatsch! Weil Klatschen eine gute Angewohnheit ist