S
S
Sergey Gladkikh2018-11-22 22:08:37
API
Sergey Gladkikh, 2018-11-22 22:08:37

Service worker not starting on github?

I ask for help. I can’t understand what’s wrong. I’m interested in the Progressive Web Application topic, or rather service workers. I check its work on a test site. I launch the site on a local server, everything works. And when I open the same site on github, the service worker does not start. It writes the error "Service Worker: Error: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script". Explain what could be the reason? Below is the code of my worker and its installer

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

Answer the question

In order to leave comments, you need to log in

3 answer(s)
N
Nikolai Shabalin, 2018-11-22
@nikolayshabalin

He says the path .register('../serviceWorker.js')is wrong. Try from the root or move the file on the same level as the main js file.
And don't forget that PWA needs HTTPS

S
Sergey Gladkikh, 2018-11-23
@PILOT93

These options did not solve the problem. I tried everything, it still does not start on github. Maybe someone else will advise something.

C
chakaponi, 2019-02-21
@chakaponi

The main problem is that the age header prevents us from caching (apparently on purpose) any data

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question