Erstellen Sie Apps, die offline arbeiten

Sep 16, 2025

wie man

Für lange Zeit haben die Offline-Funktionalität, Hintergrundsynchronisation und Push-Benachrichtigungen von ihren Web-Kolonnen differenzierte native Apps. Das Service Worker API. ist eine spielwechselnde Technologie, die das Spielfeld anzeigt. In diesem Tutorial verwenden wir es, um eine Seite zu erstellen, die Inhalte, auch wenn es keine Internetverbindung gibt.

Laden Sie den Code von Dateisilo herunter

01. Ein HTTPS-Server

Der einfachste Weg, über Service-Arbeiter nachzudenken, ist als Code, der von einer Site auf einem Client-Computer installiert ist, im Hintergrund ausgeführt wird und anschließend Anforderungen an die an diese Website gesendete Anforderungen ermöglicht, die an diese Site abgefangen und manipuliert werden sollen. Da dies eine solche leistungsstarke Fähigkeit ist, mit Service-Arbeitern in einer Live-Umgebung zu arbeiten, müssen Sie über HTTPS laufen. Dies stellt sicher, dass sie nicht ausgenutzt werden können, indem Sie sicherstellen, dass der Service-Arbeiter, der der Browser von einer Seite empfängt, echt ist.

Für Entwicklungszwecke können wir jedoch ohne https laufen http: // localhost / ist als Ausnahme von dieser Regel erlaubt. Der einfachste Weg, um zu beginnen, ist mit dem NPM HTTP-Server Paket.

 NPM installieren HTTP-Server -g
http-server -p 8000 -c-1

02. Richten Sie eine grundlegende Seite ein

Es gibt jetzt nichts auf dem Server, also machen wir eine grundlegende Seite, um zu dienen. Wir erstellen eine neue Datei index.html, und wenn wir den Server ausführen, ist der Server jetzt zugänglich http: // localhost: 8000 .

In dieser Phase stellen Sie fest, dass Sie, wenn Sie den HTTP-Server kündigen und die Seite im Browser aktualisieren, eine Fehlerseite erhalten, da die Website nicht erreicht werden kann. Dies ist komplett erwartet, da wir noch keinen Offline-Inhalt zwischengespeichert haben.

 & lt ;! doctype html & gt;
& lt; HTML & GT;
  & lt; head & gt;
  & lt; Meta Charset = "UTF-8" / & GT;
  & lt; Titel & GT; Service Worker & lt; / title & gt;
  & lt; Skript src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; Header & GT;
  & lt; H1 & GT; Welcome & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "content" & gt;
  & lt; p & gt; Inhalt hier & lt; / p & gt;
  & lt; img src = "kitty.jpg" width = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Registrieren Sie einen Service-Arbeiter

Wir haben jetzt eine ziemlich unauffällige Seite, und es ist an der Zeit, darüber nachzudenken, einen Serviceangestellter umzusetzen. Bevor wir Coding bekommen, lohnt es sich einen Moment, um den Lebenszyklus von Service-Arbeitern zu verstehen.

Der Prozess beginnt mit der Registrierung eines Dienstangestellten in Ihrem JavaScript, der dem Browser mit der Installation des Arbeitnehmers angibt - der erste Schritt des Lebenszyklus. Während des gesamten Lebenszyklus befindet sich ein Serviceangestellter in einem der folgenden Zustände:

Installation: Sobald ein Service-Arbeiter registriert wurde, wird ihre Installation normalerweise zum Herunterladen und Cache statischer Inhalte verwendet
Eingerichtet: Der Arbeiter ist theoretisch bereit für den Einsatz, sondern aktiviert nicht sofort
Aktivieren: Ein installierter Service-Arbeiter wird sich aktivieren, wenn auch kein Service-Arbeiter vorhanden ist oder bestimmte Bedingungen den vorhandenen Bedingungen leiten; Die Aktivierung wird normalerweise verwendet, um alte Dateien aus dem zwischengespeicherten Offline-Inhalt zu löschen
Aktiviert: Der Serviceangestellter hat jetzt die Kontrolle über das Dokument und können Anforderungen behandeln
Redundant: Wenn der Dienstarbeiter nicht installiert oder aktiviert oder aktiviert wird, oder wenn er von einem neueren Service-Arbeiter ersetzt wird

04. Prüfen Sie, ob Sie registriert sind

Lassen Sie uns einen Service-Arbeiter anmelden. Dies zeigt den Browser effektiv in die JavaScript-Datei, die das Verhalten des Dienstangestellters definiert. Die Registrierung erfolgt mit dem Servicwerdeobjekt, das der Einstiegspunkt an die API ist. Wir werden auch überprüfen, ob die API tatsächlich im Browser vorhanden ist, bevor Sie versuchen.

Das registrieren() Die Funktion kann sicher als jedes Mal, wenn die Seitenlasten sicher ist, und der Browser bestimmt, ob der Dienstangestellter bereits registriert wurde.

if ('ServiceWäger' im Navigator) {
  fenster.addeventListener ('laden', function () {
  Navigator.servicworker.Register ('serviceworker.js', {scope: './' auf ).Das( Fort (
  console.log ("Service Worker registriert erfolgreich registriert");
  }, Funktion (Fehler) {
  console.log ("Fehler beim Registrieren von Service Worker:" + ERROR);
  });
  });
}

05. Servicer-Arbeiter implementieren

Als nächstes müssen wir den Service-Arbeiter selbst umsetzen. Service-Arbeiter können auf eine Reihe von Ereignissen hören, die sich auf den eigenen Lebenszyklus und Aktivität auf der Seite zusammenhängen. Die wichtigsten sind installieren, aktivieren und holen.

Beginnen wir mit dem Erstellen eines Hörers für die Installieren Ereignis, das auslöst, sobald die Anlage des Arbeitnehmers abgeschlossen ist. Auf diese Weise können wir den Service-Arbeiter anweisen, um einige Offline-Inhalte im aktuellen Ordner in einen Cache hinzuzufügen. Wir müssen auch unseren Cache nennen - Da alte Caches bestehen bleiben können, können Sie diesen Cache-Namen aktualisieren / versionieren, um neuere Versionen von Inhalten später aufzunehmen.

 var aktuellercache = 'Demo-Cache';
self.addeventListener ('installieren', Event = & gt; {
  Event.Waituntil (
  cache.open (currentcache) .das (Funktion (Cache) {
  console.log ("Hinzufügen von Inhalten zum Cache.");
  cache.addall zurücksenden ([[
  './index_offline.html',
  './kitty_offline.jpg',
  './Benutzerdefinierte CSS'
  ]);
  })
  );
});

06. Fetch Event.

Unsere Seite speichert jetzt Inhalte beim Laden, aber wir benötigen ein Mechanismus, um Anfragen abzufassen und diese in diesen Cache umzuleiten. Dazu müssen wir zuhören holen Ereignisse, die ausgelöst werden, wenn eine Anforderung wie das Erhalten unserer index.html. Die Datei erfolgt über das Netzwerk. Wir passen dann mit der Anforderung mit dem Cache an und dienen die zwischengespeicherte Ressource, falls gefunden. Andernfalls fallen wir zurück zu einer FETCH-API-Anforderung an den Server.

An diesem Punkt lohnt es sich, dass wir eine starke Abhängigkeit von JavaScript-Versprechen für die Arbeit haben. Diese können etwas knifflig sein, so lohnt es sich, mit dem Namen vertraut, wenn Sie sie noch nicht benutzt haben.

 self.addeventListener ('fetch', Event = & gt; {
  Event.respondit (
  cache.match (Event.Request). Dann (Antwort = & GT; {{
  Rückgabe zurückgeben || holen (Event.Request);
  })
   );
    });

07. Erweitern Sie das Fetch-Event

Wenn Sie es jetzt ausprobieren (Beenden Sie den HTTP-Server und aktualisieren Sie die Seite), sollten Sie feststellen, dass Ihre Seite online als auch offline funktioniert. Es ist jedoch wahrscheinlich, dass Sie jedoch ein intelligentes Offline-Verhalten wünschen, mit unterschiedlichem Inhalt oder Funktionalität, wenn der Server nicht verfügbar ist.

Um dies zu erreichen, können wir unsere erweitern holen Ereignisreaktion weiter, um speziell für Navigationsanfragen zu überprüfen und mit einer anderen Offline-Seite zu antworten, wenn einer erkannt wird. Dies index_offline.html. Die Datei kann eine Variation Ihrer Online-Seite sein oder etwas völlig anderes und kann auch andere Ressourcen verwenden, die Sie z. Benutzerdefinierte CSS .

 self.addeventListener ('fetch', Event = & gt; {
  if (Event.Request.mode === 'Navigation' ') {
  Event.respondit (
  holen (Event.Request) .catch (ERROR = & GT; {
  console.log ("Seite nicht verfügbar. Rückgabe des Offline-Inhalts.");
  Return cache.match ('./ index_offline.html');
  })
  );
  } else {
  Event.respondit (
  cache.match (Event.Request). Dann (Antwort = & GT; {{
  Rückgabe zurückgeben || holen (Event.Request);
  })
  );
  }
});

08. Cache löschen.

Es gibt noch etwas, was wir brauchen. Wenn Sie jetzt versuchen, Ihren Offline-Inhalt zu ändern, werden Sie feststellen, dass es nicht aktualisiert wird, wenn Sie Ihre Seite ausprobieren - Sie erhalten immer noch die alte Version! Dies liegt daran, dass die älteren Dateien noch zwischengespeichert werden.

Sie müssen etwas umsetzen, um veraltete Dateien aus dem Cache zu reinigen, um zu verhindern, dass sie serviert werden. Dies geschieht durch Antworten auf ein aktivieren Sie Ereignis und Löschen aller Caches, die nicht mit dem in Stromcache angegebenen Namen übereinstimmen. Sie können dann eine Versionsnummer an Stromcache fügen, wenn Sie Ihren Offline-Inhalt ändern, um sicherzustellen, dass er aktualisiert wird.

 This.adDeventListener ('aktivieren', Ereignis = & gt; {
  VAR ActiveCachen = [Stromcache];
  console.log ("Service Worker aktiviert aktiviert. Der Check-Cache ist auf dem neuesten Stand.");
  Event.Waituntil (
  cache.keys (). Dann (keylist = & gt; {
  Rückgabeversprechen.All (keylist.map (key = & gt; {
  if (ActiveCache.Indexof (Taste) === -1) {
  console.log ("alter Cache löschen" + Schlüssel);
  Rendite Cache.Delete (Schlüssel);
  }
  }));
  })
  );
});

Dieser Artikel wurde im Webdesigner-Magazin-Problem Nr. 268 veröffentlicht. Abonniere jetzt.

Weiterlesen:

Ein Codiererführer für APIs
Beginnen Sie mit dem Webgl mit drei.js
12 große Webdesigntrends für 2018

Erstellen Sie Apps, die offline arbeiten

01. Ein HTTPS-Server

02. Richten Sie eine grundlegende Seite ein

03. Registrieren Sie einen Service-Arbeiter

04. Prüfen Sie, ob Sie registriert sind

05. Servicer-Arbeiter implementieren

06. Fetch Event.

07. Erweitern Sie das Fetch-Event

08. Cache löschen.

wie man - Die beliebtesten Artikel

Einrichten einer lokalen Entwicklungsumgebung

Wie kombiniere ich 3D und Comic-Kunst in Zbrush

Verstehen Sie die Einfuhrleitung der Unity Asset

10 Tipps zum Moderning von Apple's Photos App

So erstellen Sie einen Papercraft-Roboter

Dokumentieren Sie Ihre Designsysteme mit Fraktal

5 Möglichkeiten, Cashflow effektiv zu verwalten

So fügen Sie Daten zu Ihren Skizzen-Designs hinzu

Kategorien