webentwicklung-frage-antwort-db.com.de

Festlegen, dass der Service-Worker nur bestimmte URLs ausschließt

Ich erstellte eine App mit Create React, die standardmäßig einen Servicemitarbeiter umfasst. Ich möchte, dass die App immer dann ausgeführt wird, wenn jemand die angegebene URL eingibt, es sei denn, sie gehen zu/blog /, wo statische Inhalte bereitgestellt werden. Ich benutze den reaktiver Router in der App, um verschiedene URLs zu finden.

Ich habe ein Nginx-Setup zum Servieren/Blog/und es funktioniert gut, wenn jemand/Blog/besucht wird, ohne die Reaktiv-App zu besuchen. Da der Service-Worker jedoch einen Bereich von ./ hat, lädt die App den Service-Worker, wenn jemand eine andere URL als/blog/besucht. Ab diesem Zeitpunkt umgeht der Service-Worker eine Verbindung zum Server und/blog/lädt die Reakt-App anstelle des statischen Inhalts.

Gibt es eine Möglichkeit, den Service-Worker für alle URLs außer/blog/zu laden? 

11
user3577166

In Anbetracht dessen, dass Sie keinen Code geschrieben haben, der für den Service-Mitarbeiter relevant ist, können Sie eine einfache if-Bedingung in den Codeblock für fetch einfügen

Dieser Codeblock sollte bereits in Ihrem Service-Worker vorhanden sein. Fügen Sie einfach die Bedingungen hinzu

self.addEventListener( 'fetch', function ( event ) {

    if ( event.request.url.match( '^.*(\/blog\/).*$' ) ) {
        return false;
    }
     // OR

    if ( event.request.url.indexOf( '/blog/' ) !== -1 ) {
        return false;
    }
    //    **** rest of your service worker code ****

note Sie können entweder den Regex oder die Prototypmethode indexOf. je nach Ihrer Laune verwenden.

das obige würde Ihren Servicearbeiter anweisen, einfach nichts zu tun, wenn die URL mit /blog/ übereinstimmt.

16

in der neuesten CRA-Version funktioniert Folgendes für uns:

// serviceWorker.js

window.addEventListener('load', () => {
  if (isAdminRoute()) {
    console.info('unregistering service worker for admin route')
    unregister()
    console.info('reloading')
    window.location.reload()
    return false
  }

wir schließen alle Routen unter /admin vom Server Worker, da wir für unseren Admin-Bereich eine andere App verwenden. Sie können es natürlich nach Belieben ändern. Unsere Funktion finden Sie unten in der Datei:

function isAdminRoute() {
  return window.location.pathname.startsWith('/admin')
}
2
goldylucks

Verwenden Sie die Bibliothek sw-precache , um die aktuelle service-worker.js- Datei zu überschreiben, in der die Cache-Strategie ausgeführt wird. Der wichtigste Teil ist das Einrichten der Konfigurationsdatei (ich füge die Datei ein, die ich mit create-react-app verwendet habe). 

  1. yarn sw-precache installieren
  2. Erstellen und geben Sie die Konfigurationsdatei an, die angibt, welche URLs nicht zwischengespeichert werden sollen 
  3. Ändern Sie den Befehl build script, um sicherzustellen, dass sw-precache ausgeführt wird, und überschreibt die Standarddatei service-worker.js im Build-Ausgabeverzeichnis

Ich habe meine Konfigurationsdatei sw-precache-config.js benannt und sie im Build-Script-Befehl in package.json angegeben. Der Inhalt der Datei ist unten. Der zu beachtende Teil ist die Taste runtimeCaching/Option ."build": "NODE_ENV=development react-scripts build && sw-precache --config=sw-precache-config.js"

CONFIG DATEI: sw-precache-config.js

module.exports = {
    staticFileGlobs: [
        'build/*.html',
        'build/manifest.json',
        'build/static/**/!(*map*)',
    ],
    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
    swFilePath: './build/service-worker.js',
    stripPrefix: 'build/',
    runtimeCaching: [
        {
            urlPattern: /dont_cache_me1/,
            handler: 'networkOnly'
        }, {
            urlPattern: /dont_cache_me2/,
            handler: 'networkOnly'
        }
    ]
}
0
Tope

Eine andere Möglichkeit, blacklist - URLs zu verwenden, d. H. Sie aus der Zwischenspeicherung auszuschließen, wenn Sie Workbox verwenden, können Sie mit registerNavigationRoute erreichen:

workbox.routing.registerNavigationRoute("/index.html", {
  blacklist: [/^\/api/,/^\/admin/],
});

Das obige Beispiel zeigt dies für ein SPA , bei dem alle Routen zwischengespeichert und in index.html abgebildet werden, mit Ausnahme von URLs, die mit /api oder /admin beginnen.

0
F Lekschas