Kann ein Service-Mitarbeiter, der mit Googles sw-Precache arbeitet, wirklich NetworkFirst sein?

Question

Ich betreibe die Website https://www.igluonline.com mit Hugo und ich habe kürzlich einen Service-Mitarbeiter nach Google sw-precache installiert.

Dies ist die Config-Datei:

module.exports = { 
    staticFileGlobs: [ 
    'dist/css/**.css', 
    'dist/**/*.html', 
    'dist/images/**.*', 
    'dist/js/**.js' 
    ], 
    skipWaiting: true, 
    stripPrefix: 'dist', 
    runtimeCaching: [{ 
    urlPattern: /\/*/, 
    handler: 'networkFirst' 
    }] 
}; 

Überlegungen:

Obwohl manchmal die automatisch generierte Code in einigen erros läuft, arbeitet die Servicemitarbeiter sowohl auf Web die Offline-Erfahrung richtig und liefern und Handy, Mobiltelefon.

Auch es hat cache-control auf max-age=0 eingestellt und wenn ich einen neuen Code drücke macht es das Update.

Problem:

stellte ich die runtimeCaching handler zu networkFirst und nach Googles sw-toolboxAPI (die in sw-precache vorhanden ist, wenn runtimeCaching verwendet wird) soll die Seite vorzugsweise aus dem http Anruf bekommen und wenn es keine Verbindung Es sollte 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 Laden die Seite aktualisieren, aber ich erwarte nicht, dass meine Besucher jedes Mal meine Homepage aktualisieren, um neue Inhalte zu erhalten.

Ich versuche Änderung den runtimeCaching Code zu der Hoffnung, folgend zumindest meine Homepage zu gelangen direkt aus dem Netz zu laden, aber ich hatte kein Glück:

runtimeCaching: [{ 
    urlPattern: /\//, 
    handler: 'networkOnly' 
    },{ 
    urlPattern: /\/*/, 
    handler: 'networkFirst' 
    }] 

jetzt nicht sicher, ob ich bin, ob die gewünschte PWA Erfahrung ist so - das bedeutet, dass Benutzer zweimal neu laden 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.

Answer 1

Beim Generieren von Service-Mitarbeitern ist der einfachste Weg, die gewünschte Richtlinie zu erhalten, sw-precache mit sw-toolbox.

Beim Generieren eines neuen Service-Worker mit sw-precache können Sie auch den Code sw-toolbox am Ende der generierten Datei erhalten, indem Sie die richtigen Konfigurationsoptionen übergeben.

Nach den sw-precache Documentation:

Das sw-precache Modul verfügt über die Fähigkeit, den sw-toolbox Code und Konfiguration neben seiner eigenen Konfiguration aufzunehmen. Mit der Konfigurationsoption runtimeCaching in sw-precache (see below) ist eine Verknüpfung möglich, die Sie manuell ausführen können, indem Sie in Ihrem Service Worker importieren und Ihre eigenen Routing-Regeln schreiben.

Dies ist ein Beispiel für die runtimeCaching Option auf dem sw-precachedocumentation zeigte:

runtimeCaching: [{ 
    urlPattern: /^https:\/\/example\.com\/api/, 
    handler: 'networkFirst' 
}, { 
    urlPattern: /\/articles\//, 
    handler: 'fastest', 
    options: { 
    cache: { 
     maxEntries: 10, 
     name: 'articles-cache' 
    } 
    } 
}] 

Sie diese Option, neben der Konfiguration der Wahl verwenden können.

Zum Beispiel können Sie eine Konfigurationsdatei verwenden, wie in den documentation erklären:

ist es Unterstützung für die Verwendung --config komplexe Konfigurationen übergeben. 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. Zum Beispiel sei angenommen, es gibt einen path/to/sw-precache-config.js-Datei, die enthält:

module.exports = { 
    staticFileGlobs: [ 
    'app/css/**.css', 
    'app/**.html', 
    'app/images/**.*', 
    'app/js/**.js' 
    ], 
    stripPrefix: 'app/', 
    runtimeCaching: [{ 
    urlPattern: /this\\.is\\.a\\.regex/, 
    handler: 'networkFirst' 
    }] 
}; 

Diese Datei mit der Kommandozeilen-Schnittstelle weitergegeben werden kann, aber auch die ausführliche Option Einstellung, über

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 in einer JSON-Datei für --config vorbei, obwohl dies weniger Flexibilität:

{ 
    "staticFileGlobs": [ 
    "app/css/**.css", 
    "app/**.html", 
    "app/images/**.*", 
    "app/js/**.js" 
    ], 
    "stripPrefix": "app/", 
    "runtimeCaching": [{ 
    "urlPattern": "/express/style/path/(.*)", 
    "handler": "networkFirst" 
    }] 
} 

Dieses Beispiel verwendet die JS-Datei für die Konfigurationsoptionen:

$ sw-precache --config=path/to/sw-precache-config.js --verbose 

Nach dem Ausführen des Befehls und Generieren des Service-Arbeiters mit diesen Konfigurationen können Sie die Precache und Richtlinien viel einfacher als mit nur sw-precache umgehen.

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:

//sw-precache generated code... 

// *** Start of auto-included sw-toolbox code. *** 
/* 
Copyright 2016 Google Inc. All Rights Reserved. 

Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License. 
You may obtain a copy of the License at 

    http://www.apache.org/licenses/LICENSE-2.0 

Unless required by applicable law or agreed to in writing, software 
distributed under the License is distributed on an "AS IS" BASIS, 
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
See the License for the specific language governing permissions and 
limitations under the License. 
*/ 
//(!function(e){if("object"==typeof exports&&"undefined"!=typeof module))... 

// *** End of auto-included sw-toolbox code. *** 

// Runtime cache configuration, using the sw-toolbox library. 

toolbox.router.get(/this\\.is\\.a\\.regex/, toolbox.networkFirst, {}); 

toolbox.options.debug = true; 

//Here you can configure your precache: 

toolbox.precache([ 
    '/', 
    '/assets/background.png', 
    '/assets/logo.png', 
    '/assets/application.css', 
]); 

//And here you can configure your policies for any route and asset: 

toolbox.router.get('/', toolbox.fastest); 
toolbox.router.get('/assets/background.png', toolbox.fastest); 
toolbox.router.get('/assets/logo.png', toolbox.fastest); 

//Here is the Network First example 

toolbox.router.get('/myapp/index.html', toolbox.networkFirst); 

Ich habe das viel effektiver und flexibler zu finden als mit nur sw-precache.

Hier finden Sie die sw-toolbox Usage Guide für weitere Informationen über die Konfiguration.