0

I'm working on my first PWA (Progressive Web App). Everything works well except for the offline stuff. I followed many tutorials to learn how to cache my Web app, but I'm really surprise of the size of my cache. In Chrome dev tools, I can see that, after a few refresh of my page:

enter image description here

And it keeps growthing ! I suppose there is a problem in the treatment of my "activate" event. Here my service-worker.js file:

var dataCacheName = 'heiverage-v1';

var cacheName = 'heiverage-1';
var filesToCache = [
  '/',
  'index.php',
  'spe.php',
  'js/app.js',
  'js/jquery.js',
  'sem.php',
  'main.php',
  'js/script.js',
  'js/bootstrap.js',
  'css/style.css',
  'css/bootstrap.css',
  'img/calculator.png',
  'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
  'https://fonts.googleapis.com/css?family=Oxygen',
  'https://fonts.googleapis.com/css?family=Mukta+Mahee:700',
  'css/mainless50.css'
];



self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});



self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  /*
   * Fixes a corner case in which the app wasn't returning the latest data.
   * You can reproduce the corner case by commenting out the line below and
   * then doing the following steps: 1) load app for first time so that the
   * initial New York City data is shown 2) press the refresh button on the
   * app 3) go offline 4) reload the app. You expect to see the newer NYC
   * data, but you actually see the initial data. This happens because the
   * service worker is not yet activated. The code below essentially lets
   * you activate the service worker faster.
   */
  return self.clients.claim();
});


self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

Thank you very much for your help !

HippoTlm
  • 1
  • 2
  • `caches.open('mysite-dynamic')` <- so you are opening another cache instead of using your cache? Or am i missing something? – Jonas Wilms Jan 18 '18 at 17:13
  • 1
    See the "Opaque Responses & the navigator.storage API" section of https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses – Jeff Posnick Jan 19 '18 at 19:38

0 Answers0