Progressive web app non Interceptée (promettre) TypeError: impossible de récupérer

J'ai commencé à apprendre PWA (Progressive Web App) et j'ai un problème, la console "jette" erreur non Interceptée (promettre) TypeError: impossible de récupérer.

Quelqu'un sait ce que 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');
        });
    });
}

InformationsquelleAutor Ku3a | 2017-11-07

Je pense que cela est dû au fait que vous n'avez pas une stratégie de repli. event.respondWith est livré avec une promesse que vous avez à les attraper si il y a une erreur.

Donc, je suggère que vous modifiez votre code à partir de ce:

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

À quelque chose comme ceci:

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 pour la mise en cache, ce que j'ai montré ici est hors ligne premier approche. Pour plus d'info cette & cette est à lire absolument.

InformationsquelleAutor BlackBeard

16

J'ai trouvé une solution pour la même erreur, dans mon cas, l'erreur a montré que lorsque le travailleur des services ne pouvait pas trouver un fichier*, le fixer par la suite le réseau dans l'outil de dev de chrome session, et a identifié le fichier inexistant que le travailleur n'a pas trouvé et enlevé tableau de fichier à 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 caractères gras la solution pour moi... j'ai commencer avec juste un fichier de cache, puis ajouter un autre... jusqu'à ce que je obtenir le chemin d'accès incorrect à une, également de définir la portée {champ: '/'} ou {champ: './'} - edit de lawrghita

InformationsquelleAutor Hudson Moreira da Cunha
7

J'ai eu le même message d'erreur et dans mon cas, Adblock bloque l'extraction d'une url qui a commencé par l'annonce (par exemple, /adsomething.php)
- cela m'a donné une bonne tranche de rire 🙂
- Hahaha juste eu le même problème. Utilisé gitea et avait une pension de titres commençant par "Ad". Presque toutes les pages clos à cette exception, le fait de désactiver Adblock dans mon gitea site a résolu le problème!
InformationsquelleAutor DirtyOne

Dans mon cas, les fichiers mis en cache n'ont pas été trouvés (vérifier le réseau de la console), quelque chose à faire avec des chemins relatifs, depuis que je suis avec 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 le 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);
        })
    );
});

InformationsquelleAutor Marshall Fungai

Vous devez vous connecter pour publier un commentaire.