CODEWITHSUNDEEP
javascriptservice-worker
Hassan Mangepasdepain
Hassan Mangepasdepain

Reputation: 37

Service worker don't work anymore

I have integrated service worker in my website. Everything used to works perfectly, but now, I have an error when my service worker try to install :

Uncaught (in promise) TypeError: Request failed at anonymous service-worker.js:1

And my service worker is in the 'redundant' state.

I don't know why... I did not change my code, this is my index.html :

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(reg) {

  if(reg.installing) {
    console.log('Service worker installing');
  } else if(reg.waiting) {
    console.log('Service worker installed');
  } else if(reg.active) {
    console.log('Service worker active');
  }

  }).catch(function(error) {
    // registration failed
console.log('Registration failed with ' + error);
  });
}

And here is my service-worker.js : 

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/theme/website_mobile/js',
        '/theme/website_mobile/css',
        '/theme/website_mobile/js.js',
        '/theme/website_mobile/css.css',
        '/js/614cd8e.js',
        '/css/f1407bb.css',
        '/js/93779bc.js',
        '/js/d228ec7.js',
        '/theme/website_mobile/img/slider-home/slider1.jpg',
        '/theme/website_mobile/img/slider-home/slider2.jpg',
        '/theme/website_mobile/img/slider-home/slider3.jpg',
        '/theme/website_mobile/img/slider-home/slider4.jpg',
        '/theme/website_mobile/img/logo-website.png',
        '/theme/website_mobile/img/picto-menu-close.png',
        '/theme/website_mobile/img/picto-close.png',
        '/var/website/storage/images/media/website-medias/website-materials/5163440-1-eng-GB/website-materials_article_list_main_website_enm.jpg',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Light.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Regular.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-ExtraBold.woff2',
        '/theme/website_mobile/fonts/website-avenir/Fonts/065a6b14-b2cc-446e-9428-271c570df0d9.woff2',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function (e) {
        return caches.match('/');
      });
    }
  }));
});

A more stranger thing is when I tried to edit my service-worker.js, I added this : 

self.addEventListener('install', function(event) {
  **reg.update();**

which is a mistake, but I figured out that this works good ! I have an reg is undefined error in the console, but my service worker works good.

I tried to change the reg.update() part and put a simple console.log but, when I did that, the service-worker return in the redundant state and don't install...

I don't understand why when if I add an undefined object in the service worker code, it throw an error but it works great, and when I came back to my old code (which used to work before), it didn't install.

Maybe, I am doing it wrong somewhere... ?

Thanks

Upvotes: 2

Views: 2014

Answers (1)

Phil Thomas
Phil Thomas

Reputation: 1237

I just ran into this after pulling my hair out for several days.

In my case one of the URLs of the list was returning a 404, which made the entire Cache.addAll return promise reject with the extremely unspecific error TypeError: Request failed ("failed on what, why?!").

If your business logic allows for graceful caching, despite any one of the urls failing, you might want to change your approach to Cache.add of every item of the list:

var urls = ['/', ...]
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      urls.forEach(function (url) {
        cache.add(url).catch(/* optional error handling/logging */);
      });
    })
  );
});

Upvotes: 7

Related Questions