Блог

Я создаю React PWA, который отлично работает на localhost для кэширования всех перечисленных файлов, но когда я развертываю проект на Netlify или любой другой платформе, он не кэширует файлы и не работает в автономном режиме. В хранилище кэша отображается пустой список, который в случае локального хоста показывает все файлы, которые я кэширую. Файл service Worker регистрируется в обоих случаях.

Ссылка на мой репозиторий github находится здесь: https://github.com/noumanmalik960/quiz-app-pwa

Вот код файла service worker:

 const CACHE_NAME = "cache-v1"
const urlsToCache = [
  '/',
  '/index.html',
  '/static/js/bundle.js',
  '/static/js/0.chunk.js',
  '/static/js/main.chunk.js',
  '/manifest.json',
  '/static/media/bg.759ecf3a.jpg',
  '/images/logo.png'
]


self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  if (!navigator.onLine) {

    event.respondWith(
      caches.match(event.request)
        .then(function (response) {
          if (response)
            return response;
          return fetch(event.request);
        })
    )
  }


})
  

Причина, по которой ваш список кэша пуст, поскольку несколько файлов, которые вы упомянули в своем списке кэша, не существуют. Проверьте скриншот ниже. Если какой-либо из файлов, которые вы упомянули в своем кэшированном списке (в вашем service worker), отсутствует или браузер не может его найти, он создаст запись в кэше, но не сможет кэшировать какие-либо файлы.

Исправьте вышеупомянутый URL-адрес файлов, и тогда ваш service worker будет работать должным образом.