4 votes

Service Worker ne se charge pas en mode hors ligne

Je suis en train de construire une application web progressive et le travailleur de service ressemble à ceci :

    CURRENT\_CACHE = 'V3';
    FILES\_TO\_CACHE = \[
        '/index.html',
        '/js/bcheck.js',
        '/js/mss.js',
        '/js/vendor.js'
    \];

    console.info('in file');
    self.addEventListener('install', function (event) {
        console.info('installed');
        event.waitUntil(caches.open(CURRENT\_CACHE).then(function(cache){
            return cache.addAll(FILES\_TO\_CACHE);
        }));
    });
    self.addEventListener('activate', function (event) {
        console.info('activated');
        event.waitUntil(caches.keys().then(function (cachesNames) {
            return Promise.all(cachesNames.map(function (cacheName) {
                if (cacheName !== CURRENT\_CACHE) {
                    return caches.delete(cacheName);
                }
            }))
        }));
    });

    self.addEventListener('fetch', function(event) {
        event.respondWith(
            caches.match(event.request)
                .then(function(response) {
                        // Cache hit - return response
                        if (response) {
                            return response;
                        }

                        return fetch(event.request);
                    }
                )
        );
    });

Je vois qu'après l'installation, tous mes fichiers sont mis en cache, mais lorsque je mets le serveur hors ligne et que je le recharge, rien ne fonctionne, comme si le service était hors ligne et que rien ne se chargeait.

Merci pour votre aide

  • Je travaille avec un serveur local HTTP sur localhost.

3voto

Hari krishna Points 133

Vous essayez peut-être de localhost:port/ mais tu as mis en cache /index.html . Essayez d'accéder à localhost:port/index.html ou ajouter ceci / à votre FILES_TO_CACHE dans le code du serviceWorker et réessayer.

1voto

RAVI singh Points 36

Pour que le travailleur de service fonctionne hors ligne correctement, il devrait strictement être en Https. essayez de travailler avec Https. Vous pouvez le vérifier dans lighthouse (LightHouse est un outil permettant de vérifier le Service Worker de la PWA).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X