So entwickeln Sie eine Progressive Web App (PWA)

Überblick

Seit Apple den iPhone App Store eingeführt hat, sind Apps zu einem unverzichtbaren Teil unseres Lebens geworden, und das gilt auch für physische Unternehmen. Mittlerweile bringen alle Branchen ihre eigenen Apps auf den Markt, aber hat schon einmal jemand über ein solches Szenario nachgedacht: Wenn Ihre potenziellen Kunden Ihre App noch nicht installiert haben oder sie sie, selbst wenn sie sie installiert haben, aufgrund des knappen Speicherplatzes auf ihren Mobiltelefonen wieder deinstallieren? Gibt es eine technische Lösung, um Apps leichter und einfacher zu installieren zu machen? Die Antwort ist „Ja“.

Zu diesem Zweck werden Progressive Web Applications erstellt. Sie verfügen sowohl über die Funktionen von Webanwendungen als auch über die Funktionen, die bisher nur in nativen Anwendungen verfügbar waren. Progressive Web Applications werden über ein Symbol auf dem Startbildschirm oder basierend auf Push-Benachrichtigungen gestartet. Die Ladezeit ist nahezu vernachlässigbar und neben der Online-Nutzung können sie auch für die Offline-Nutzung verpackt werden.

Das Beste daran ist, dass Progressive Web Apps auf Mobiltelefonen einfach zu erstellen sind, da sie lediglich Erweiterungen Ihrer Website sind. Wenn jemand Ihre Website zum ersten Mal besucht, wird die PWA-Funktionalität nach Ihrer Autorisierung automatisch auf Ihrem Telefon für Sie erstellt.

Als Nächstes schauen wir uns an, wie wir eine eigene PWA-Anwendung erstellen.

Erfordern

Um mit diesem Tutorial beginnen zu können, muss die folgende Software installiert sein:

Node 8.9 und höher (https://nodejs.org/en/download/). Yarn (https://yarnpkg.com) Git.

Als erstes Projekt für dieses Tutorial können Sie das folgende Github-Repository klonen:

Git-Klon https://github.com/petereijgermans11/progressive-web-app

Gehen Sie dann in das folgende Verzeichnis

cd pwa-article/pwa-app-manifest-init

Installieren Sie Abhängigkeiten und starten Sie das Projekt mit dem folgenden Befehl

npm ich && npm start

Öffnen Sie die Anwendung unter der folgenden Adresse: http://localhost:8080

URL der Anwendung

Es gibt mehrere Möglichkeiten, auf meinen lokalen Host zuzugreifen: Um remote darauf zuzugreifen, geben Sie die Adresse auf Port 8080 Ihres Computers ein. Zu diesem Zweck können Sie ngrok verwenden. Siehe: https://ngrok.com/

Installieren Sie ngrok mit dem folgenden Befehl:

npm install -g ngrok

Führen Sie den folgenden Befehl in Ihrem Terminal aus. Dieser Befehl generiert für Sie eine URL auf die Sie von extern zugreifen können .

ngrok http 8080

Navigieren Sie dann in Chrome auf Ihrem Mobilgerät zu der generierten URL.

Welche technischen Komponenten benötigt eine PWA?

PWA verfügt über drei wichtige technische Komponenten, die harmonisch zusammenarbeiten:

Manifestdatei, Service Worker und Ausführung unter https.

Manifestdatei

Die Manifestdatei ist eine JSON-Konfigurationsdatei, die grundlegende Informationen zur PWA enthält, wie etwa das App-Symbol, den Namen der Webanwendung und die Hintergrundfarbe. Wenn der Browser erkennt, dass für eine Website eine PWA-Manifestdatei vorhanden ist, zeigt Chrome automatisch eine Schaltfläche „Zum Home-Bildschirm hinzufügen“ an. Wenn der Benutzer auf „Zustimmen“ tippt, wird das Symbol zum Startbildschirm hinzugefügt und die PWA installiert.

Erstellen einer Manifest.json

Die Manifest.json-Datei für eine PWA sieht folgendermaßen aus:

JSON-Format

{
  "Name": "Progressive Selfies",
  "Kurzname": "PWA-Selfies",
  "Symbole": [
    {
      "Quelle": "/src/images/icons/app-icon-192x192.png",
      "Typ": "Bild/PNG",
      "Größen": "192x192"
    },
    {
      "Quelle": "/src/images/icons/app-icon-512x512.png",
      "Typ": "Bild/PNG",
      "Größen": "512x512"
    }
  ],
  "Start-URL": "/index.html",
  "Umfang": ".",
  "Anzeige": "eigenständig",
  "Hintergrundfarbe": "#fff",
  "Themenfarbe": "#3f51b5"
}

Informieren Sie den Browser über das Manifest Ihrer Anwendung

Erstellen Sie eine Manifest.json-Datei im Verzeichnis auf derselben Ebene wie die Datei index.html. Nachdem die Manifestdatei erstellt wurde, fügen Sie den Referenzlink zur Manifestdatei zu index.html hinzu.

<link rel=”manifest” href=”/manifest.json”>

Manifestattribute

Manifest hat viele Konfigurationseigenschaften. Als Nächstes geben wir eine kurze Einführung in die Eigenschaften.

• Name, Kurzname: Gibt den Namen der Webanwendung an. Kurzname ist die Abkürzung der Anwendung. Wenn nicht genügend Platz vorhanden ist, um das Namensattribut der Anwendung anzuzeigen, verwendet das System den Kurznamen.
• Anzeige: Das Anzeigeattribut gibt den Anzeigemodus der Webanwendung an. Es gibt vier Werte zur Konfiguration: Vollbild, Standalone, Minimal-UI und Browser, aber die am häufigsten verwendeten Attribute sind Vollbild und Standalone. Vollbild: Vollbildanzeige, Standalone: ​​Die in diesem Modus geöffnete Anwendung verfügt nicht über die Adressleiste des Browsers, sodass sie eher wie eine native Anwendung mit minimaler Benutzeroberfläche aussieht. Browser: Der Zugriff darauf unterscheidet sich nicht wesentlich vom Zugriff über einen Browser.
• Ausrichtung: Steuert die Anzeigerichtung der Webanwendung und verhindert, dass das Telefon den Bildschirm dreht.
• Symbole, Hintergrundfarbe: Symbol wird verwendet, um das Anwendungssymbol anzugeben, und Hintergrundfarbe ist die Hintergrundfarbe vor dem Laden der Anwendung. Indem Sie diese beiden Eigenschaften festlegen, können Sie sie im Begrüßungsbildschirm der Anwendung kombinieren.
• theme_color: Definiert die Standarddesignfarbe der Anwendung.
• Beschreibung: Legen Sie eine Beschreibung der Anwendung fest.

Oben finden Sie eine Beschreibung der Eigenschaften der PWA-Manifestdatei. Wir können die Manifestdatei hinzufügen, indem wir die Manifestdatei einrichten und sie im Verzeichnis auf derselben Ebene wie die Datei index.html platzieren.

Öffnen Sie Chrome Developer Tools – Anwendung – Manifest und prüfen Sie, ob die hinzugefügte Manifestdatei geladen wurde. Wenn dort keine Informationen wie unten gezeigt vorhanden sind, können wir diese durch einen Neustart des Servers npm start neu laden.

Was ist ein Servicemitarbeiter?

Service Worker (SW) ist ein JavaScript-Teil, der als Proxy zwischen dem Browser und dem Webserver fungiert. Service Worker können allgemeine Funktionen nativer Anwendungen wie Offline-Caching, Nachrichten-Push, stilles Update usw. in browserbasierten Webanwendungen implementieren, um Webanwendungen ein besseres und umfassenderes Benutzererlebnis zu bieten.

Darüber hinaus ermöglicht diese API die Verwendung von Caching zur Unterstützung von Offline-Erlebnissen und gibt Entwicklern die volle Kontrolle über das Benutzererlebnis.

Lebenszyklus von Servicemitarbeitern

Für Service Worker lauten die Schritte zur Grundeinrichtung wie folgt:

• Zuerst muss die Software registriert werden. Wenn die Software registriert ist, startet der Browser die Installation automatisch basierend auf dem Installationsereignis.
• Nachdem die Software installiert wurde, erhält sie ein Aktivierungsereignis. Dieses Aktivierungsereignis kann zum Bereinigen von Ressourcen verwendet werden, die in früheren Versionen der Software verwendet wurden.

Im tatsächlichen Betrieb sollten Sie zunächst eine leere Datei mit dem Namen sw.js auf derselben Ebene wie index.html erstellen. Fügen Sie dann wie folgt ein Basis-Tag in die Datei index.html ein:

<base href="/" rel="externes nofollow" >

Fügen Sie abschließend den folgenden Code zu src/js/app.js hinzu, um SW zu registrieren. Dieser Code wird während des Ladevorgangs der Seite aktiviert.

Sie können überprüfen, ob SW aktiviert ist, indem Sie Chrome DevTools – Anwendung – Service Worker öffnen.

window.addEventListener('laden', () => {
    const base = document.querySelector('base');
    let baseUrl = base && base.href || '';
    wenn (!baseUrl.endsWith('/')) {
        Basis-Url = `${baseUrl}/`;
    } 
   
    if ('serviceWorker' im Navigator) {
        navigator.serviceWorker.register(`${baseUrl}sw.js`)
            .then( Registrierung => {
            // Die Registrierung war erfolgreich
            console.log('ServiceWorker-Registrierung erfolgreich mit Umfang: ', registration.scope);
        })
        .catch(err => {
            //Registrierung fehlgeschlagen :(
            console.log('ServiceWorker-Registrierung fehlgeschlagen: ', err);
        });
    }
});

Der Hauptzweck des obigen Codes besteht darin, zu prüfen, ob die SW-API in der Navigatoreigenschaft des Fensterobjekts verfügbar ist. Das Fensterobjekt stellt das Browserfenster dar. Wenn die SW im Navigator verfügbar ist, registrieren Sie die SW sofort, wenn die Seite geladen wird.

Obwohl die Registrierung einer SW einfach ist, treten in einigen Fällen immer noch Probleme bei der Registrierung von Service Workern auf. Sehen wir uns die Gründe dafür an, warum eine SW nicht registriert werden kann, und wie man sie löst:

• Ihre Anwendung kann nicht unter HTTPS ausgeführt werden. Während der Entwicklung können Sie SW über localhost verwenden. Wenn Sie es jedoch auf einer Website bereitstellen, müssen Sie HTTPS aktivieren.
• Der Pfad zu SW ist falsch.

Eine Überprüfung auf Update beim Neuladen erfolgt nicht.

Service Worker-Ereignisse

Zu den weiteren Ereignissen neben den Installations- und Aktivierungsereignissen zählen Nachrichten-, Abruf-, Synchronisierungs- und Push-Ereignisse.

Fügen Sie Ihrer Software den folgenden Code hinzu, um auf Lebenszyklusereignisse zu warten (installieren und aktivieren):

self.addEventListener('installieren', event => {
    console.log('[Service Worker] Service Worker wird installiert …', Ereignis);
    Ereignis.wartenBis(self.skipWaiting());
});
self.addEventListener('aktivieren', Ereignis => {
    console.log('[Service Worker] Service Worker wird aktiviert ...', Ereignis);
    gibt self.clients.claim() zurück;
});

Der Installationsrückruf ruft die Funktion skipWaiting() auf, um das Aktivierungsereignis auszulösen und den Service Worker anzuweisen, sofort mit der Arbeit zu beginnen, ohne darauf zu warten, dass der Benutzer wegnavigiert oder die Seite neu lädt.

Die Funktion skipWaiting() zwingt einen wartenden Service Worker, ein aktiver Service Worker zu werden. Die Funktion self.skipWaiting() kann auch mit der Funktion self.clients.claim() verwendet werden, um sicherzustellen, dass Aktualisierungen des zugrunde liegenden Service Workers sofort wirksam werden.

In diesem Fall stellt die Selbsteigenschaft das Fensterobjekt dar (also Ihr Browserfenster).

Zur Home-Schaltfläche hinzufügen

Mit der Schaltfläche „Zum Home-Bildschirm hinzufügen“ können Benutzer die PWA auf ihren Geräten installieren. Um die PWA tatsächlich mit dieser Schaltfläche zu installieren, müssen Sie in Ihrer SW einen Fetch-Event-Handler definieren. Lassen Sie uns dies in sw.js beheben.

self.addEventListener('abrufen', Ereignis => {
    console.log('[Service Worker] Holt etwas ...', Ereignis);
    // Dies behebt einen seltsamen Fehler in Chrome beim Öffnen der Entwicklertools
    wenn (event.request.cache === 'nur wenn zwischengespeichert' und event.request.mode !== 'gleicher Ursprung') {
        zurückkehren;
    }
    Ereignis.AntwortenMit(abrufen(Ereignis.Anforderung));
});

Service Worker-Cache

Die Stärke des Service Workers liegt in seiner Fähigkeit, HTTP-Anfragen abzufangen. In diesem Schritt verwenden wir diese Option, um HTTP-Anfragen und -Antworten abzufangen und den Benutzern blitzschnelle Antworten direkt aus dem Cache zu liefern.

Vorabcaching während der Service Worker-Installation

Wenn ein Benutzer Ihre Website zum ersten Mal besucht, beginnt die Software mit der automatischen Installation. Während dieser Installationsphase können Sie alle von der PWA verwendeten Seiten, Skripts und Stildateien herunterladen und zwischenspeichern. Hier ist der sw.js-Dateicode, der dies tut:

const CACHE_STATIC_NAME = "statisch";
const URLS_TO_PRECACHE = [
    '/',
    'index.html',
    „src/js/app.js“,
    „src/js/feed.js“,
    „src/lib/material.min.js“,
    „src/css/app.css“,
    „src/css/feed.css“,
    „src/images/hauptbild.jpg“,
    'https://fonts.googleapis.com/css?family=Roboto:400,700',
    'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('installieren', event => {
    console.log('[Service Worker] Service Worker wird installiert …', Ereignis);
    Ereignis.wartenBis(
        caches.öffnen(CACHE_STATIC_NAME)
            .then(cache => {
                console.log('[Service Worker] App-Shell vorab zwischenspeichern');
                cache.addAll(URLs_TO_PRECACHE);
            })
            .then(() => {
                console.log('[ServiceWorker] Wartezeit bei Installation überspringen');
                gibt self.skipWaiting() zurück;
            })
    );
});

Dieser Code verwendet das Installationsereignis und fügt während der Installationsphase ein Array von URLS_TO_PRECACHE hinzu. Nachdem Sie die Funktion caches.open aufgerufen haben, können Sie die Funktion cache.addAll() verwenden, um die Dateien im Array zwischenzuspeichern. Verwenden Sie JavaScript-Promises mit der Methode event.waitUntil(), um zu erfahren, wie lange die Installation dauert und ob sie erfolgreich war.

Das Installationsereignis ruft self.skipWaiting() auf, um SW direkt zu aktivieren. Wenn alle Dateien erfolgreich zwischengespeichert wurden, wird die Software installiert. Wenn jedoch der Download einer der Dateien fehlschlägt, schlägt der Installationsschritt fehl. In den Chrome Developer Tools können Sie überprüfen, ob der Cache (im Cache-Speicher) mit statischen Dateien im Array URLS_TO_PRECACHE gefüllt ist.

Wenn Sie jedoch auf die Registerkarte „Netzwerk“ schauen, werden die Dateien immer noch über das Netzwerk abgerufen. Der Grund dafür ist, dass wir die referenzierte Ressource nicht aus dem Cache gelesen haben, obwohl der Cache bereit ist. Um diesen Teil der Arbeit abzuschließen, müssen wir also zuerst auf das Fetch-Ereignis der Anwendung hören, es dann abfangen und die Ressource aus dem Cache abrufen. Schauen wir uns den folgenden Code an:

self.addEventListener('abrufen', Ereignis => {
    console.log('[Service Worker] Holt etwas ...', Ereignis);
    Ereignis.AntwortMit(
        caches.match(Ereignis.Anforderung)
            .dann(Antwort => {
                wenn (Antwort) {
                    console.log(Antwort);
                    Antwort zurückgeben;
                }
                gibt fetch(Ereignis.Anforderung) zurück;
            })
    );
});

Wir verwenden die Funktion caches.match(), um zu überprüfen, ob die eingehende URL mit einer Ressource übereinstimmt, die sich möglicherweise im aktuellen Cache befindet. Wenn eine Übereinstimmung vorliegt, geben wir die zwischengespeicherte Ressource zurück. Wenn die Ressource jedoch nicht im Cache vorhanden ist, fahren wir mit dem Abrufen der angeforderten Ressource wie gewohnt fort.

Nachdem der Service Worker installiert und aktiviert wurde, aktualisieren Sie die Seite und überprüfen Sie die Registerkarte „Netzwerk“ erneut. Jetzt fängt der Service Worker HTTP-Anfragen ab und lädt die entsprechenden Ressourcen direkt aus dem Cache, anstatt eine Netzwerkanforderung an den Server zu senden.

Wenn wir jetzt auf der Registerkarte „Netzwerk“ den Offlinemodus einstellen, funktioniert unsere App weiterhin einwandfrei.

Hintergrundübertragung

Die Background Fetch API ist eine Hintergrundfunktion von SW, die es Benutzern ermöglicht, große Dateien, Videos, Musik und andere Ressourcen im Hintergrund herunterzuladen. Während des Erfassungs-/Übertragungsvorgangs kann Ihr Benutzer die Registerkarte oder sogar den gesamten Browser schließen, ohne die Übertragungsaufgabe zu löschen. Wenn der Benutzer den Browser erneut öffnet, wird der Übertragungsvorgang fortgesetzt. Über diese API kann dem Benutzer außerdem der Fortschritt der Übertragung angezeigt werden und der Benutzer kann den Vorgang abbrechen oder pausieren.

Standardmäßig sind Hintergrundübertragungen nicht verfügbar. Sie müssen die Option „Experimental Web Platform Features“ von Chrome über die URL (chrome://flags/#enable-experimental-web-platform-features) aktivieren.

Nachfolgend finden Sie ein Beispiel für die Implementierung einer solchen Hintergrundübertragung.

Fügen Sie in Ihrer Datei index.html eine Schaltfläche mit der ID „bgFetchButton“ hinzu.

<button id="bgFetchButton">Assets lokal speichern</button>

Fügen Sie dann in app.js im Load-Event-Handler den Code für die Durchführung der Hintergrundübertragung hinzu

window.addEventListener('laden', () => {
...
       bgFetchButton = document.querySelector('#bgFetchButton');
       bgFetchButton.addEventListener('Klick', asynchrones Ereignis => {
         versuchen {
            const Registrierung = warte auf navigator.serviceWorker.ready;
            Registrierung.backgroundFetch.fetch('my-fetch', [neue Anfrage(`${baseUrl}src/images/main-image-lg.jpg`)]);
         } fangen (Fehler) {
            Konsole.Fehler(Fehler);
         }
     });
...
});

Der obige Code startet eine Hintergrundübertragung unter den folgenden Bedingungen:

• Der Benutzer klickt auf eine Schaltfläche mit der ID bgFetchButton
• SW wurde registriert

Hintergrundübertragungen müssen in einer asynchronen Funktion durchgeführt werden, da der Übertragungsprozess die Benutzeroberfläche nicht blockieren darf.

Nach Abschluss der Übertragung wird es in den Cache gestellt

self.addEventListener('backgroundfetchsuccess', event => {
  console.log('[Service Worker]: Abruf im Hintergrund erfolgreich', event.registration); event.waitUntil(
   (asynchrone Funktion() {
     versuchen {
     // Iterieren der Datensätze zum Auffüllen des Cache
       const cache = warte auf caches.open(event.registration.id); const records = warte auf event.registration.matchAll(); const promises = records.map(async record => {
         const response = warte auf Datensatz.responseReady;
         warte auf Cache.put(Datensatz.Anfrage, Antwort);
       });
       warte auf Promise.all(Versprechen);
     } fangen (Fehler) {
       console.log('[Service Worker]: Caching-Fehler');
     }
   })()
  );
});

Dieser Code besteht aus den folgenden Schritten:

• Wenn die Übertragung durch den Hintergrundabruf abgeschlossen ist, erhält Ihre Software ein Erfolgsereignis für den Hintergrundabruf.
• Erstellt und öffnet einen neuen Cache mit demselben Namen wie registration.id.
• Holen Sie sich alle Datensätze und durchlaufen Sie sie über registration.matchAll().

Schließlich werden alle Promises über Promise.all() ausgeführt.

Zusammenfassen

In diesem Artikel haben wir zwei der grundlegenden Komponenten von PWA besprochen: die grundlegenden Funktionen von Manifest und Service Worker. HTTPS haben wir bereits zuvor besprochen.

Oben finden Sie Einzelheiten zur Entwicklung einer progressiven Webanwendung (PWA). Weitere Informationen zur Entwicklung einer progressiven Webanwendung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!