web-dev-qa-db-fra.com

Application Web progressive Uncaught (en promesse) TypeError: échec de la récupération

J'ai commencé à apprendre PWA (Progressive Web App) et j'ai un problème, la console "jette" l'erreur Uncaught (promis) TypeError: Échec de la récupération.

Quelqu'un sait quelle pourrait être la cause?

let CACHE = 'cache';

self.addEventListener('install', function(evt) {
    console.log('The service worker is being installed.');
    evt.waitUntil(precache());
});

self.addEventListener('fetch', function(evt) {
    console.log('The service worker is serving the asset.');
    evt.respondWith(fromCache(evt.request));
});
function precache() {
    return caches.open(CACHE).then(function (cache) {
        return cache.addAll([
            '/media/wysiwyg/homepage/desktop.jpg',
            '/media/wysiwyg/homepage/bottom2_desktop.jpg'
        ]);
    });
}
function fromCache(request) {
    return caches.open(CACHE).then(function (cache) {
        return cache.match(request).then(function (matching) {
            return matching || Promise.reject('no-match');
        });
    });
}
javascriptservice-workerprogressive-web-apps
11
Ku3a

Je pense que cela est dû au fait que vous n'avez pas de stratégie de secours. event.respondWith est accompagné d'une promesse que vous devez tenir en cas d'erreur.

Donc, je vous suggère de changer votre code à partir de ceci:

self.addEventListener('fetch', function(evt) {        
    console.log('The service worker is serving the asset.');
    evt.respondWith(fromCache(evt.request));
});

Pour quelque chose comme ça:

addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;     // if valid response is found in cache return it
        } else {
          return fetch(event.request)     //fetch from internet
            .then(function(res) {
              return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());    //save the response for future
                  return res;   // return the fetched data
                })
            })
            .catch(function(err) {       // fallback mechanism
              return caches.open(CACHE_CONTAINING_ERROR_MESSAGES)
                .then(function(cache) {
                  return cache.match('/offline.html');
                });
            });
        }
      })
  );
});

REMARQUE: Il existe de nombreuses stratégies de mise en cache, ce que j'ai montré ici est hors ligne d'abord approche. Pour plus d'informations thisthis est une lecture incontournable.

16
BlackBeard

J'ai trouvé une solution à la même erreur, dans mon cas, l'erreur s'est produite lorsque le technicien de service n'a pas pu trouver un fichier *, corrigez-le en suivant le réseau dans l'outil de développement de chrome session, et a identifié le fichier inexistant que le technicien de service n'a pas trouvé et a supprimé le tableau de fichiers à enregistrer.

  '/processos/themes/base/js/processos/step/Validation.min.js',
  '/processos/themes/base/js/processos/Acoes.min.js',
  '/processos/themes/base/js/processos/Processos.min.js',
  '/processos/themes/base/js/processos/jBPM.min.js',
  '/processos/themes/base/js/highcharts/highcharts-options-white.js',
  '/processos/themes/base/js/publico/ProcessoJsController.js',
 // '/processos/gzip_457955466/bundles/plugins.jawrjs',
 // '/processos/gzip_N1378055855/bundles/publico.jawrjs',
 // '/processos/gzip_457955466/bundles/plugins.jawrjs',
  '/mobile/js/about.js',
  '/mobile/js/access.js',

* J'ai mis en gras la solution pour moi ... Je commence avec juste un fichier pour le cache puis j'en ajoute un autre ... jusqu'à ce que j'obtienne le mauvais chemin vers un, définissez également la portée {scope: '/'} ou {scope: ' ./ '} - édité par lawrghita

16
Hudson Moreira da Cunha

J'ai eu la même erreur et dans mon cas, Adblock bloquait l'extraction vers une URL qui a commencé par 'ad' (par exemple /adsomething.php)

7
DirtyOne

Dans mon cas, les fichiers à mettre en cache sont introuvables (vérifiez la console réseau), quelque chose à voir avec les chemins relatifs, car j'utilise localhost et le site est dans un sous-répertoire car je développe plusieurs projets sur un serveur XAMPP.

J'ai donc changé

let cache_name = 'Custom_name_cache';

let cached_assets = [
    '/',
    'index.php',
    'css/main.css',
    'js/main.js'
];

self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cache_name).then(function (cache) {
            return cache.addAll(cached_assets);
        })
    );
});

Ci-dessous: notez le "./" sur les cached_assets

let cache_name = 'Custom_name_cache';

let cached_assets = [
    './',
    './index.php',
    './css/main.css',
    './js/main.js'
];

self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cache_name).then(function (cache) {
            return cache.addAll(cached_assets);
        })
    );
});
1
Marshall Fungai