Прогрессивное веб-приложение Неподготовлено (в обещании) ТипError: Не удалось получить

Я начал изучать PWA (Progressive Web App), и у меня возникла проблема, ошибка консоли "throws" Неподготовлено (в обещании) TypeError: Не удалось получить.

Кто-нибудь знает, что может быть причиной?

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');
        });
    });
}

Ответы

Ответ 1

Я думаю, это связано с тем, что у вас нет резервной стратегии. event.respondWith поставляется с обещанием, которое вы должны поймать, если есть некоторая ошибка.

Поэтому я предлагаю вам изменить код:

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

Что-то вроде этого:

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');
                });
            });
        }
      })
  );
});

ПРИМЕЧАНИЕ. Существует много стратегий для кэширования, что я показал здесь, это первый подход в офлайн-режиме. Для получения дополнительной информации это и это должен прочитать.

Ответ 2

Я нашел решение для той же ошибки, в моем случае ошибка показала, когда работнику службы не удалось найти файл *, исправили его, следуя по сети в инструменте dev сеанса chrome, и выявили несуществующий файл. что работник службы не нашел и не удалил массив файлов для регистрации.

  '/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',

* Я нашел решение для себя... Я начинаю с простого файла для кэша, а затем добавляю другой... пока не получу неверный путь к нему, также определите область действия {scope: '/'} или { область действия: './'} - редактирование Lawrghita

Ответ 3

У меня была такая же ошибка, и в моем случае Adblock блокировал выборку для URL-адреса, который начинался с "объявления" (например,/adsomething.php)

Ответ 4

В моем случае файлы для кэширования не были найдены (проверьте сетевую консоль), что связано с относительными путями, поскольку я использую localhost, а сайт находится в подкаталоге, поскольку я разрабатываю несколько проектов на сервере XAMPP.

Поэтому я изменил

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);
        })
    );
});

Ниже: обратите внимание на "./" на 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);
        })
    );
});