Ich betreibe die Website Ссылка , auf der Hugo läuft, und ich habe kürzlich einen Service-Mitarbeiter nach Googles sw-precache .
Dies ist die Konfigurationsdatei:
%Vor%Überlegungen:
Obwohl manchmal der automatisch generierte Code auf einige Fehler trifft, arbeitet der Service-Mitarbeiter ordnungsgemäß und liefert die Offline-Erfahrung sowohl im Web als auch auf Mobilgeräten.
Außerdem hat cache-control auf max-age=0 gesetzt und wenn ich einen neuen Code drücke, wird die Aktualisierung durchgeführt.
Problem:
Ich setze runtimeCaching handler auf networkFirst und Google's sw-toolbox API (das in sw-precache vorhanden ist, wenn runtimeCaching verwendet wird), sollte es die Seite vorzugsweise vom http-Aufruf erhalten, und wenn es keine Verbindung gibt, sollte es auf den Cache zurückgreifen.
Aber wenn ich meinen Code aktualisiere und ein neues Fenster zum Testen öffne (beachte, dass ich vor dem Update alle Tabs und Fenster schließe, auf denen die Website läuft), wird die zwischengespeicherte Seite angezeigt. Es wird natürlich den neuen Service-Mitarbeiter herunterladen und beim zweiten Neuladen die Seite aktualisieren, aber ich erwarte nicht, dass meine Besucher jedes Mal meine Homepage aktualisieren, um neue Inhalte zu erhalten.
Ich versuche, den Code runtimeCaching auf den folgenden zu ändern, in der Hoffnung, zumindest meine Homepage direkt aus dem Netzwerk zu laden, aber ich hatte kein Glück:
Jetzt bin ich mir nicht sicher, ob die gewünschte PWA-Erfahrung so ist - das bedeutet, dass Benutzer zweimal neu laden müssen oder mindestens zwei Seiten besuchen müssen, um den aktualisierten Code zu sehen - oder wenn ich einen Fehler mache. Ich würde wirklich eine Überlegung wertschätzen.
Wenn Sie Service-Mitarbeiter erstellen, können Sie die gewünschte Richtlinie am einfachsten mit sw-precache abrufen sw-toolbox .
Wenn Sie mit sw-precache einen neuen Service-Mitarbeiter erstellen, können Sie auch die sw-toolbox am Ende der generierten Datei durch Übergabe der korrekten Konfigurationsoptionen.
Laut sw-precache-Dokumentation :
Das Modul
sw-precachekann den Code und die Konfigurationsw-toolboxneben seiner eigenen Konfiguration enthalten. Die Verwendung derruntimeCaching-Konfigurationsoption insw-precache( siehe unten ) ist eine Abkürzung, die das ausführt, was Sie tun könnte manuell tun, indem Siesw-toolboxin Ihren Service Worker importieren und Ihre eigenen Routing-Regeln schreiben.
Dies ist ein Beispiel für die runtimeCaching -Option, die in der sw-precache Dokumentation angezeigt wird:
Sie können diese Option neben der gewünschten Konfiguration verwenden.
Sie können beispielsweise eine Konfigurationsdatei verwenden, die in der Dokumentation aufgeführt ist:
Es gibt Unterstützung für die Weitergabe komplexer Konfigurationen mit --config. Alle Optionen aus der Datei können über ein Befehlszeilenflag überschrieben werden. Es wird dringend empfohlen, eine externe JavaScript-Datei zu übergeben, die die Konfiguration über module.exports definiert. Angenommen, es gibt eine Datei Pfad / zu / sw-precache-config.js, die Folgendes enthält:
%Vor%Diese Datei könnte auch an die Befehlszeilenschnittstelle übergeben werden Setzen Sie die ausführliche Option über
%Vor%Dies bietet die größte Flexibilität, z. B. die Bereitstellung eines regulären Ausdrucks für die Option runtimeCaching.urlPattern.
Oder Sie können eine JSON-Datei verwenden:
Wir unterstützen auch die Übergabe einer JSON-Datei für --config, obwohl dies weniger Flexibilität bietet:
%Vor%
In diesem Beispiel wird die JS-Datei für die Konfigurationsoptionen verwendet:
%Vor%Nachdem Sie den Befehl ausgeführt und den Service-Mitarbeiter mit diesen Konfigurationen generiert haben, können Sie den Precache und die Richtlinien viel einfacher handhaben als mit %. co_de% .
Sie können Ihre Richtlinien direkt in der Datei konfigurieren oder sie manuell am Ende Ihres Service-Worker-Codes hinzufügen.
Hier ist das Beispiel des unteren Teils des generierten Codes:
%Vor% Ich habe das viel effektiver und flexibler gefunden, als nur sw-precache zu verwenden.
Hier finden Sie den sw-toolbox-Nutzungsleitfaden für weitere Informationen zur Konfiguration.
Tags und Links javascript caching service-worker progressive-web-apps sw-precache