На github не запускается service worker?

Прошу помощи.Не могу понять в чем дело.Интересуюсь темой Progressive Web Application,а точнее сервис воркерами. На тестовом сайте проверяю его работу.Запускаю сайт на локальном сервере-все работает.А когда открываю этот же сайт на github,сервис воркер не запускается.Пишет ошибку "Service Worker: Error: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script".Объясните в чем может быть причина?Ниже прилагаю код своего воркера и его установщика
const cacheName = 'v1';

const cacheAssets = [
  'index.html',
  'catalog.html',
  'form.html',
  '/css/style.min.css',
  '/js/script.min.js',
  '/fonts/Oswald-Medium.woff',
  '/fonts/Oswald-Medium.woff2',
  '/fonts/Oswald-Regular.woff',
  '/fonts/Oswald-Regular.woff2'
];

// Call Install Event
self.addEventListener('install', e => {
  console.log('Service Worker: Installed');

  e.waitUntil(
    caches
      .open(cacheName)
      .then(cache => {
        console.log('Service Worker: Caching Files');
        cache.addAll(cacheAssets);
      })
      .then(() => self.skipWaiting())
  );
});

// Call Activate Event
self.addEventListener('activate', e => {
  console.log('Service Worker: Activated');
  // Remove unwanted caches
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== cacheName) {
            console.log('Service Worker: Clearing Old Cache');
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

// Call Fetch Event
self.addEventListener('fetch', e => {
  console.log('Service Worker: Fetching');
  e.respondWith(
    fetch(e.request)
      .then(res => {
        // Make copy/clone of response
        const resClone = res.clone();
        // Open cahce
        caches.open(cacheName).then(cache => {
          // Add response to cache
          cache.put(e.request, resClone);
        });
        return res;
      })
      .catch(err => caches.match(e.request).then(res => res))
  );
});

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('../serviceWorker.js')
      .then(reg => console.log('Service Worker: Registered (Pages)'))
      .catch(err => console.log(`Service Worker: Error: ${err}`));
  });
}
  • Вопрос задан
  • 990 просмотров
Пригласить эксперта
Ответы на вопрос 3
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Он говорит, что путь .register('../serviceWorker.js') не верный. Попробуйте от корня или переместите файл на одном уровне с главным js файлом.
Ну и не забудьте, что для PWA нужен HTTPS
Ответ написан
@PILOT93 Автор вопроса
Данные варианты не решили проблему.Все пробывал,на github всеравно не запускается.Может кто еще что-нибудь посоветует.
Ответ написан
Комментировать
chakaponi
@chakaponi
Основная проблема заключена в том, что заголовок age мешает кешировать (видимо нарочно) какие бы то ни было данные
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы