web-dev-qa-db-fra.com

Configuration de l'opérateur de service pour exclure uniquement certaines URL

J'ai construit une application à l'aide de create react qui, par défaut, inclut un travailleur de service. Je veux que l'application soit exécutée chaque fois que quelqu'un entre l'URL donnée, sauf lorsqu'il accède à/blog /, qui sert un ensemble de contenu statique. J'utilise un routeur de réaction dans l'application pour intercepter différentes URL.

J'ai installé nginx pour servir/blog/et cela fonctionne bien si quelqu'un visite/blog/sans visiter l'application en premier. Cependant, étant donné que le prestataire de services a une portée de ./, chaque fois que quelqu'un visite une URL autre que/blog /, l'application le charge. À partir de ce moment, l'agent de service contourne une connexion au serveur et/blog/charge l'application Rea à la place du contenu statique.

Existe-t-il un moyen de charger le service worker sur toutes les URL sauf/blog /? 

service-workercreate-react-app
11
user3577166

Par conséquent, étant donné que vous n'avez posté aucun code pertinent pour le technicien, vous pouvez envisager d'ajouter une simple condition if à l'intérieur du bloc de code pour fetch.

Ce bloc de code devrait déjà être présent dans votre service worker. Il suffit d’ajouter les conditions

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 ****

remarque vous pouvez utiliser la méthode regex ou la méthode prototype indexOf. selon votre caprice.

ce qui précède indiquerait à votre technicien de service de ne rien faire lorsque l'URL correspond à /blog/

16
Schrodinger's cat

Essayez d’utiliser la bibliothèque sw-precache pour écraser le fichier service-worker.js en cours d’exécution de la stratégie de cache. La partie la plus importante est la configuration du fichier de configuration (je vais coller celui que j'ai utilisé avec create-react-app ci-dessous). 

  1. Installez yarn sw-precache
  2. Créez et spécifiez le fichier de configuration qui indique les URL à ne pas mettre en cache 
  3. modifiez la commande de script de construction pour vous assurer que sw-precache exécute et remplace le fichier service-worker.js par défaut dans le répertoire de sortie de la construction

J'ai nommé mon fichier de configuration sw-precache-config.js is et je l'ai spécifié dans la commande de script de construction dans package.json. Le contenu du fichier est ci-dessous. La partie à surveiller est la clé/option runtimeCaching ."build": "NODE_ENV=development react-scripts build && sw-precache --config=sw-precache-config.js"

FICHIER DE CONFIGURATION: 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

Une autre façon de blacklist des URL, c’est-à-dire de les exclure du cache, lorsque vous utilisez Workbox peut être réalisée avec registerNavigationRoute :

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

L'exemple ci-dessus montre ceci pour un SPA où toutes les routes sont mises en cache et mappées dans index.html à l'exception de toute URL commençant par /api ou /admin.

0
F Lekschas