vendredi 22 février 2019

Service Worker working locally but not registering after hosting my website

Service worker is working locally in my website when i deployed it on firebase for testing purpose it was working fine there too but when i hosted my website from cPanel on my domain, service worker is not registering. Please help me to solve this problem. Attaching code and screenshots here.

index.html file

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('./sw.js')
      .then(() => console.log('Service worker Registered'))
      .catch(error => console.log('some error occurred', error));
  }
</script>

sw.js file

self.addEventListener('install', function(event) { 
          event.waitUntil(preLoad());
      });

var preLoad = function() {
   console.log('Install Event processing');
   return caches.open('app-cache-1').then(function(cache) {
     console.log('Cached index and offline page during Install');
      return cache.addAll([
        './css/main.css',
       './css/materialize.min.css',
       './img/icons/icon-72x72.png',
       './img/icons/icon-96x96.png',
       './img/icons/icon-128x128.png',
       './img/icons/icon-144x144.png',
       './img/icons/icon-152x152.png',
       './img/icons/icon-192x192.png',
       './img/icons/icon-384x384.png',
       './img/icons/icon-512x512.png',
       './img/background-image.jpeg',
       './img/favicon.jpeg',
       './img/pp1 (2).jpeg',
       './img/pv1.jpeg',
       './img/pv10.jpg',
       './img/pv11.jpg',
       './img/pv12.jpg',
       './img/pv13.jpeg',
       './img/pv-1.jpeg',
       './img/pv-2.jpeg',
       './img/pv-3.jpeg',
       './img/pv-4.jpeg',
       './img/pv-5.jpeg',
       './js/app.js',
       './js/materialize.min.js',
       './'
     ]);
   });
};

self.addEventListener('fetch', function(event) {
 console.log('The service worker is providing the asset.');
   event.respondWith(
   checkResponse(event.request).catch(function() {
  return returnFromCache(event.request);
   })
  );
   event.waitUntil(addToCache(event.request));
  });

var checkResponse = function(request) {
  return new Promise(function(fulfill, reject) {
    fetch(request).then(function(response) {
      if (response.status !== 404) {
        fulfill(response);
      } else {
        reject();
      }
    }, reject);
  });
};

var addToCache = function(request) {
  return caches.open('app-cache-1').then(function(cache) {
  return fetch(request).then(function(response) {
  console.log('Add page to offline' + response.url);
  return cache.put(request, response);
   });
 });
};

  var returnFromCache = function(request) {
  return caches.open('app-cache-1').then(function(cache) {
  return cache.match(request).then(function(matching) {
  if (!matching || matching.status == 404) {
    return cache.match('offline.html');
  } else {
    return matching;
  }
   });
 });
};

Screenshots of Service worker and cache while running the website locally

Service Worker registered

Cache




Aucun commentaire:

Enregistrer un commentaire