Wie erstellt man eine React Progressive Webanwendung?

Technologieriesen wie Google und Microsoft ebnen seit 4-5 Jahren den Weg für progressive Webanwendungen (oder PWAs). Mittlerweile ist PWA zu einer unverzichtbaren Technologie für große Unternehmen und kleine Startups geworden. Twitter, Starbucks, Google und AliExpress verwenden React Progressive Web App Builder, um ihr Online-Image zu verbessern.

PWA ist eine Webanwendung, die die Vorteile von nativen und Web-Apps nutzt. Es stellt Hardwarefunktionen bereit und ist im Hauptteil plattformübergreifender Anwendungen enthalten. Im Vergleich zu nativen Anwendungen ist es schneller, einfacher und kostengünstiger zu erstellen und zu warten.

PWA unterstützt Funktionen, die für normale Websites nicht zugänglich sind. Es umfasst Offline-Arbeit, Push-Benachrichtigungen, Zugriff auf den geografischen Standort, Kamera, Mikrofon usw. PWA kann sogar außerhalb des Browsers arbeiten, indem eine lokale Anwendungs-Shell verwendet wird, die beim Start versendet werden kann.

• Studien von Statista zufolge bevorzugen mehr als 40 % der Unternehmen und unabhängigen Programmierer weltweit die Arbeit mit React, was es zum beliebtesten Web-Framework im Jahr 2021 macht.
• React wird auch als Star-Technologie auf GitHub bezeichnet, mit insgesamt 85 Repositories , die es zum am besten zugänglichen Open-Source-Framework machen.
• Laut einigen Berichten und Studien des Top- 30-PWAs-Berichts gab es eine um 36 % höhere durchschnittliche Conversion-Rate für Reaktiv-Progressive-Web-App-Ersteller als für native mobile Apps.
• Laut Smashing Ideas haben Unternehmen mit PWA eine 50%ige Steigerung der Kundenbindung .
• Derselbe Bericht von Smashing Ideas gibt auch einen Rückgang von 33 % bei Entwicklung und Wartung an . Der Bericht enthält auch Informationen zu Entwicklungs- und Wartungseinsparungen, die mehr als 33 % betragen können, wenn PWA alle mobilen Webanforderungen erfüllen kann, wodurch die Notwendigkeit neuer oder bestehender Apps entfällt.

PWA und reagieren

Da Sie die Bedeutung von PWA kennen. Es gibt mehrere Möglichkeiten, eine React-App-PWA oder progressive Web-Anwendungen zu erstellen. Sie können Vanilla JS, HTML und CSS problemlos verwenden und Ihr Framework und Ihre Bibliotheken auswählen. Einige beliebte Optionen sind Ionic, Vue, Angular, Polymer und natürlich React.

Webtechnologien für PWAs:

• Web-Manifeste
• Service-Agenten
• Anwendungsschale
• HTTPS

Wie erstellt man eine React-App?

Um mit dem Erstellen einer Web-App zu beginnen, stellen Sie zunächst sicher, dass Sie die neueste Version von Node und einen vertrauten Code-Editor installiert haben. Meistens wird Visual Studio Code von vielen als beliebte Wahl verwendet.

Aber wenn Sie eine Reaktionswebanwendung haben, die Sie mit fortschrittlichen Funktionen verbinden müssen, ist das erstaunlich. Wenn nicht, stellen Sie sicher, dass Sie es installieren, um den vollen Nutzen aus der Entwicklung nativer React-Apps zu ziehen . Das Tool CreateReactApp von Facebook kann dabei helfen. Sie können sogar vorgefertigte Antwortanwendungen von GitHub importieren.

Aufbau einer PWA mit Create-React-App

Richten Sie eine einfache React-App ein

Der erste Schritt besteht darin, eine PWA zu erstellen. Dazu müssen Sie create-react-app verwenden, wie im obigen Absatz beschrieben. Wenn Sie es nicht auf Ihrem System installiert haben, können Sie diesen Befehl mit dem folgenden Code ausführen:

npm i create-react-app -g

Um eine TypeScript React-App mit create-react-app zu erstellen, geben Sie den unten angegebenen npx-Befehl ein:

npx create-react-app pwa-react-typescript – Vorlagentyposkript

Mit diesen Schritten erstellen Sie eine für Sie mit TypeScript erstellte React-Web-App, die lokal getestet werden kann mit:

cd pwa-react-typescript

Garn beginnen

Eine andere Methode zum Erstellen einer React-App ist mit:

Reagieren-App erstellen Reagieren-pwa

Das unten angegebene Bild zeigt Ihnen die Dateien, die im Ordner „React-App“ erstellt werden.

Registrieren Sie einen Servicemitarbeiter

Create-react-app (CRA) bietet die Tools zur Bereitstellung von Lösungen für die Frage, wie Sie mit React eine PWA-App für Ihr Unternehmen erstellen können.

Aber wenn Sie darüber nachdenken, wie Sie eine progressive Web-App erstellen können, die im Offline-Modus ausgeführt werden kann? Dann müssen Sie die automatisch generierte Service-Worker-Datei konfigurieren.

Das Verzeichnis des neu erstellten Projekts enthält die Datei index.js. Wenn Sie es öffnen, finden Sie den unten angegebenen Code:

In der Datei sehen Sie möglicherweise den Dienst Worker, der nicht registriert ist. Um es zu registrieren, müssen Sie den Aufruf von unregister() in register() one ändern.

Somit ist die Frage, wie man eine React-App erstellt oder eine PWA-App mit einem Servicemitarbeiter mit React erstellt, gelöst?

Konfigurieren Sie das Web-App-Manifest

Sie sollten wissen, dass manifest.js im öffentlichen Ordner die Metadaten enthält, auch bekannt als Informationen, die steuern, wie die App dem Benutzer angezeigt wird, und ihr Aussehen beim Start erklären.

Die manifest.json ist in der Datei public/index.html verlinkt:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Hinweis: Die Verwendung von %PUBLIC_URL% in den obigen Tags. Es wird während der Entwicklung mit der URL des öffentlichen Ordners ausgetauscht. Beachten Sie auch, dass nur die Dateien, die sich im öffentlichen Ordner befinden, aus HTML entnommen werden können.

Chrome benötigt eine manifest.json, um Ihre PWA zum Startbildschirm hinzuzufügen.

Die serviceWorker.js registriert unsere Service-Worker-Datei. Um Ihre Frage zu beantworten, wo die Arbeiterdatei registriert wird? Die Datei wird mit CRA generiert, wenn die App erstellt wird, dh wenn sie für die Produktion erstellt wird:

npm-Run-Build

Um die Komponente der Datei zu erklären, los geht's:

• Der Befehl erstellt das Projekt und speichert es im Erstellungsordner.
• Alle js- und CSS-Dateien werden im statischen Ordner gespeichert.
• Die index.html ist die Hauptseite, die alle im Ordner static/js gespeicherten React-Dateien und auch das im Ordner static/css gespeicherte CSS lädt.
• In der Datei service-worker.js ist der gesamte Service-Worker-Code gespeichert.
• Alle Dateien, die der Service Worker in einem Array zwischenspeichert, werden von der Datei precache-man aifest.*.js gespeichert.
• Damit alles wie geplant läuft, müssen Sie den Build-Ordner in den Browser laden, aber zuerst benötigen Sie einen Browser. Installieren Sie den http-Server
• Der nächste Schritt besteht darin, start im scripts-Abschnitt von package.json hinzuzufügen.

PWA testen

Nach dem Erstellen einer React PWA. Der nächste Schritt betrifft das Testen der App.

Um die App im Produktionsmodus auszuführen, geben Sie die folgenden Befehle ein, die in der folgenden Abbildung angegeben sind:

Jetzt haben Sie Ihre Anwendung erstellt und es ist an der Zeit, sie zu testen. Google hat eine Checkliste zu PWA erstellt, und Sie können Ihre Web-App mit Lighthouse bewerten. Es ist ein Tool, das sich auf der Registerkarte „Name“ von Chrome DevTools befindet.

Warum React zum Erstellen von Progressive Web Apps wählen?

React ist eine Open-Source-Bibliothek für JavaScript, die ursprünglich 2013 von Jordan Walke von Facebook erstellt wurde und für die schnelle, einfache und anpassungsfähige Entwicklung von Benutzeroberflächen entwickelt wurde. Die Facebook-Gruppe hält mit der Bibliothek Schritt und wird derzeit in ihren Elementen wie Facebook und Instagram ausgeführt.

React ist beliebt, da die Menge an JavaScript-Downloads jede Woche über 8 Millionen Downloads erreicht. Einer der vielen Gründe, warum Menschen sich für die Entwicklung nativer React-Anwendungen entscheiden .

Endnote

Die Entwicklung von PWA React für Startups liegt im Trend, da es PWAs für Milliarden von Geräten entwerfen, entwickeln, übermitteln und veröffentlichen kann, indem sie Technologien nutzen, mit denen sie vertraut sind. Bestehende React-Anwendungen können ebenfalls auf eine PWA umgestellt werden.

PWAs mit Hilfe der pwa-App-Entwicklungsfirma sind einfach zu erstellen und zu verteilen und steigern den Wert der Kunden, indem sie lokale Einblicke, besseres Engagement durch Komponenten geben, z. B. Hinzufügen zum Startbildschirm, Popup-Nachrichten und mehr ohne Einrichtung Interaktion.

Für den Fall, dass Sie Hilfe beim Erstellen von progressiven Web-Apps für Ihr Unternehmen benötigen, ist unser Team aus erfahrenen Entwicklern von progressiven Web-Apps bereit, Ihre Frage zu verstehen und Sie bei der Entwicklung von progressiven Web-Apps zu beraten. Ebenso finden Sie eine unserer führenden PWA-Kontextuntersuchungen.