Служебный работник получает сбой кэшированных активов - PullRequest
Новая
       47

Служебный работник получает сбой кэшированных активов

0 голосов
/ 10 января 2020

Привет всем, я новичок в сфере обслуживания, и я сталкиваюсь с этой ошибкой

The FetchEvent for "<My Local URL>" resulted in a network error response: the promise was rejected.

я не знаю, что это значит

это это то, что происходит, когда я нажимаю offline и refresh Автономная проблема с вкладки "Сеть"

, и вот мой код 

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.add('/src/js/app.js')
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  return self.clients.claim();
});

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

Любой ключ, которым я буду Оценил.

1 Ответ

0 голосов
/ 13 января 2020

В событии install вашего сервисного работника вы добавляете в Cache Storage API только один элемент /src/js/app.js. И когда вы пытаетесь проверить, как ваше приложение работает в автономном режиме, первое, что нужно получить - это ответ HTML для главной страницы, и, поскольку он не был добавлен в кеш, вы получаете такие результаты.

Таким образом, вам необходимо добавить в Cache Storage все необходимые ресурсы для автономного режима, например, что-то вроде этого: 

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([
         '/src/js/app.js',
         '/src/css/app.css',
         '/src/index.html'
     ]);
    })
  )
});

...

Пожалуйста, проверьте путь к активам в соответствии с вашим приложением. Надеюсь, это поможет вам!

...