Progressive Web App Tutorial: Erstellen Sie Ihre erste PWA

PWA wurde von Google selbst entwickelt und wird derzeit auf beliebte Plattformen wie Windows 10 übertragen. PWA kann viele der Dinge tun, die zuvor nur nativen Anwendungen vorbehalten waren, darunter Funktionen wie Push-Benachrichtigungen, ansprechende App-Oberfläche, Offline-Funktionen, App-Installationen … was auch immer .

Und das ist der Grund, warum das Auftauchen von PWA nicht mehr nur vorübergehend sein wird, da es sich jetzt um eine großangelegte Bewegung handelt, die das Web, wie wir es kennen, grundlegend verändern könnte. Für Neueinsteiger ist es noch nicht zu spät, diese aufstrebende Technologie kennenzulernen, da der Prozess des Baus einer PWA jetzt viel einfacher als zuvor gestaltet ist und auch für interessierte Laien wie Sie geeignet ist.

Für Ihre besten Lernzwecke werden wir heute eine voll funktionsfähige PWA mit React, Node.js und Firebase erstellen.

Voraussetzungen

• Node.js Version >= 8.10
• npm -Version >= 5.6

Hinweise : Die npm -Version sollte kein wirkliches Problem darstellen, da Ihre Installation von Node.js immer mit der neuesten Version des npm -Paketmanagers geliefert wird.

1. Erstellen Sie eine SPA mit create-react-app

Zuerst brauchen wir etwas Solides, an dem wir arbeiten können, und create-react-app ist das perfekte Werkzeug für diesen Zweck.

 npx create-react-app meine-PWA
cd my-pwa
npm starten

Die obigen Befehle helfen Ihnen dabei, eine lernende, auf React basierende Umgebung zu schaffen, in der Sie arbeiten können.

Stellen Sie es über HTTPS bereit

HTTPS ist der neue Standard für das Web und mit der Einführung von PWA wurde es immer mehr zum Mainstream. Normalerweise muss eine PWA über HTTPS bereitgestellt werden, da Service Worker selbst nicht ohne sie arbeiten können; Da wir jedoch in einer Localhost-Umgebung arbeiten, ist dies nicht erforderlich.

2. Lassen Sie es offline funktionieren

Standardmäßig sollten Servicemitarbeiter von create-react-app vorkonfiguriert sein, um das Offline-Caching und das Laden von Inhalten zu handhaben, wenn der Benutzer keine Verbindung hat oder bei späteren Besuchen.

Ein Service Worker ist, einfach ausgedrückt, ein JavaScript-Skript, das in einem von der Seite getrennten Thread ausgeführt wird und daher keinen Zugriff auf die DOM-Struktur hat. Dieser frische Ansatz führt zu fortschrittlicheren, leistungssteigernden Funktionen, da die Servicemitarbeiter nun nicht nur alle typischen Funktionen einer PWA (Offline-Fähigkeiten, Push-Benachrichtigungen usw.) handhaben, sondern auch einen großen Teil zur Entlastung der schweren Berechnungen beitragen Ihrer Website in einem separaten Thread.

Um Service Worker auf Ihrer PWA zu installieren, sollten Sie einen Blick auf /src/index.js .

Suchen Sie in index.js nach dieser Zeile

 serviceWorker.unregister()

Ändern Sie unregister() in register() und Ihre Servicemitarbeiter werden automatisch registriert, wenn Sie Ihr my-pwa im Produktionsmodus ausführen. Es wird nicht empfohlen, Service Worker im Entwicklungsmodus zu aktivieren, da dies zu Fällen führen kann, in denen die PWA nur zwischengespeicherte Assets lädt und nicht die neuesten lokalen Änderungen enthält.

So führen Sie Ihr my-pwa im Produktionsmodus aus:

 npm-Run-Build
npx-Serve-Build 

Öffnen Sie danach Chrome und gehen Sie zu localhost:5000 , überprüfen Sie es und Sie sehen jetzt, dass Service Worker ordnungsgemäß auf der Registerkarte Anwendung ausgeführt werden.

Und unter in der Kategorie Cache-Speicher möchten Sie überprüfen, ob der Offline-Inhalt Ihrer Website ordnungsgemäß zwischengespeichert wird.

Hinweise : Es gibt eine Problemumgehung, um Ihre Servicemitarbeiter im Nicht-Produktionsmodus zu registrieren. Dies wird erreicht, indem die Zeile process.env.NODE_ENV === 'production' aus src/serviceWorker.js .

Wenn Sie sich eingehender damit befassen und Ihre eigenen Servicemitarbeiter von Grund auf neu erstellen und sich nicht auf die vorkonfigurierten Konfigurationen von React verlassen möchten, haben wir Sie. In diesem Tutorial zeigen wir Ihnen, wie Sie aus einer einfachen Web-App eine Offline-First-Progressive-Web-App erstellen.

3. Richten Sie das Hinzufügen zum Startbildschirm ein

Wenn bisher alles richtig gemacht wurde, sollten Sie ein kleines Installationssymbol (+) sehen, wenn Sie den Produktions-Build Ihres my-pwa .

Da alles automatisch für Sie erledigt wird, fragen Sie sich wahrscheinlich, wie das alles möglich wurde. Keine Sorge, deshalb sind wir hier.

Um Ihre PWA A2HS (Add to Home Screen)-ready zu machen, benötigen wir eine manifest.json . Die manifest.json , die mit Ihrer create-react-app wird, ist eine sehr einfache JSON-Datei, die bestimmt, wie die Symbole Ihrer App für den Benutzer erscheinen, und die das Aussehen des Startbildschirms definiert. Um diese anzupassen, ändern Sie die vorhandene Datei unter /public/manifest.json .

 {
  "short_name": "Meine erste PWA",
  "name": "Eine einfache PWA erstellen",
  "Symbole": [
    {
      "src": "favicon.ico",
      "Größen": "64x64 32x32 24x24 16x16",
      "Typ": "Bild/x-Symbol"
    },
    {
      "src": "logo192.png",
      "Typ": "Bild/PNG",
      "Größen": "192x192"
    },
    {
      "src": "logo512.png",
      "Typ": "Bild/PNG",
      "Größen": "512x512"
    }
  ],
  "start_url": ".",
  "Anzeige": "eigenständig",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Die meisten Dinge hier sind ziemlich selbsterklärend, aber wenn Sie mehr in die manifest.json und die Ereignisse eintauchen möchten, die zu einer PWA-Installation führen, haben wir einen Artikel darüber geschrieben. Vergessen Sie nicht, es zu überprüfen.

Hinweise : Damit manifest.json funktioniert, müssen Sie es in index.html . Standardmäßig sollte create-react-app dies bereits für Sie erledigt haben.

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

Wenn Sie Ihre PWA bei Servicemitarbeitern und einer ordnungsgemäßen manifest.json registriert haben, wird eine beforeinstallpromt -Eingabeaufforderung ausgelöst, sobald der Benutzer Ihre App startet, und um Erlaubnis gebeten, Ihre PWA auf dem Startbildschirm des Benutzers zu installieren.

Sie sollten jedoch beachten, dass wir nur an der Oberfläche des A2HS-Prozesses (Zum Startbildschirm hinzufügen) kratzen und es noch viel mehr zu lernen gibt. Wir denken, dass Sie alles am besten lernen können, wenn Sie es von Grund auf neu aufbauen. Aus diesem Grund haben wir für Sie einen kurzen Leitfaden zu diesem spezifischen Merkmal von PWA vorbereitet. Der Leitfaden führt Sie durch mehrere wichtige Teile der Installationsereignisse einer PWA.

Wenn Sie sich faul und unmotiviert fühlen, sind wir auch hier, um Sie zu unterstützen. Unser Manifest-Generator wurde entwickelt, um diesen gesamten Prozess für Sie zu automatisieren.

4. Richten Sie Push-Benachrichtigungen ein

Browser haben bei der Unterstützung von Push-Benachrichtigungen einen langen Weg zurückgelegt. Vor kurzem hat Chrome sogar Benachrichtigungsauslöser eingeführt, um das Anzeigen von Benachrichtigungen im Flugzeugmodus zu ermöglichen. Das ist ein großer Fortschritt für Push-Benachrichtigungen.

Und inzwischen fragen Sie sich sicherlich, wo in diesem Tutorial der Teil ist, der Firebase verwendet. Nun, das ist es. In diesem Teil erfahren Sie mehr über den Prozess der Integration von Push-Benachrichtigungen in eine PWA mithilfe von Firebase, insbesondere über die darin enthaltene Cloud Messaging -Funktion, die das Senden von Nachrichten mithilfe von HTTPS-Anforderungen ermöglicht.

Da der ganze Prozess aber etwas langwierig ist, und auch damit Sie bei der ganzen Sache besser den Überblick behalten, haben wir für Sie ein eigenes Tutorial zur Integration von Push-Benachrichtigungen vorbereitet. Mit diesem Tutorial sollten Sie keine Probleme haben, wenn Sie versuchen, Push-Benachrichtigungen entweder an ein Benutzertoken oder an eine Gruppe von Benutzern zu senden.

Fazit

Und das war's für eine komplette PWA. Fühlen Sie sich frei, uns Fragen zu stellen, wenn Sie das Gefühl haben, in irgendeinem Teil des Tutorials festzustecken, und wir werden unser Bestes geben, um sie zu beantworten!

Weiterlesen:
So integrieren Sie PWA in Magento 2