PWA application: issues with caching

Question

I am developing a PWA app. Although I am a beginner in JavaScript and HTML, I was able to almost complete the coding. But I have an issue with caching.

The app is quite simple: in a single page there are some images that are used to display PDF files. When no network is present, it should work locally from the cache. The app will be used on an Android tablet. I ma testing on Windows 10 using Chrome. That was working fine. During the tests, if a PDF file was changed on the server, and then the network was back I needed to empty the cache for the app to show the new PDF file. I modified the design to use the cache then network method, but that does not work. I just can't figure out what's wrong. Here is the actual code.

/sw.js

const staticAssets = [
    '/',
    '/index.html',
    '/sw.js',
    'css/bootstrap.min.css',
    'js/app.js',
    'js/bootstrap.min.js',
    'js/jquery.min.js',
    'js/jquery.slim.min.js',
    'js/popper.min.js',
    '/icons/generic_128.png',
    'icons/generic_512.png',  
    'images/Ashkeepers.png',
    'images/Canvases.png',
    'images/Forfaits thématiques.png',
    'images/Funeral urn.png',
    'images/logo fictif.png',
    'images/Memorial products.png',
    'images/Produits commémoratifs.png',
    'images/Reliquaires.png',
    'images/Thematic packages.png',
    'images/Toiles.png',
    'images/Urnes.png',
    'pdf/02_urnes_funeraires_02_ENG_HR.pdf',
    'pdf/02_urnes_funeraires_04_HR.pdf',
    'pdf/03_toiles_03_ENG_HR.pdf',
    'pdf/03_toiles_04_HR.pdf',
    'pdf/04_forfaits_thematiques_05_ENG_HR.pdf',
    'pdf/04_forfaits_thematiques_12_HR.pdf',
    'pdf/05_reliquaires_03_ENG_HR.pdf',
    'pdf/05_reliquaires_04_HR.pdf',
    'pdf/06_produits_funeraires_02_ENG_HR.pdf',
    'pdf/06_produits_funeraires_03_HR.pdf'
];

self.addEventListener('install', function (event) {
    console.log('App Installed');
    event.waitUntil(
      caches.open('static')
        .then(function (cache) {
          cache.addAll(staticAssets);
        })
    );
  });
  
  self.addEventListener('activate', function () {
    console.log('App Activated');
  });
  

/*
  Version originale

  self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.match(event.request)
        .then(function(res) {
          if (res) {
            console.log("From cache");
            return res;
          } else {
            console.log("From Internet");
            return fetch(event.request);
          }
        })
    );
  });

  */

/* Cache the network */

  self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.open('static').then(function(cache) {
          return fetch(event.request).then(function(response) {
            cache.put(event.request, response.clone());
            console.log('Data en cache: ' + response.clone()); /* AJOUTÉ */
            return response;
            });
          })
      );
  });

/js/App.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function() {
      console.log('SW registered');
    });
}

/js/feed.js

var networkDataReceived = false;

// fetch fresh data
var networkUpdate = fetch('/data.json').then(function(response) {
    return response.json();
}).then(function(data) {
  networkDataReceived = true;
  updatePage(data);
}).catch(function() {
    /* Il faut attraper l'exception si data.json est introuvable */
});

// fetch cached data
caches.match('/data.json')
    .then(function(response) {
        if (!response) throw Error("No data");
        return response.json();
}).then(function(data) {
  // don't overwrite newer network data
  if (!networkDataReceived) {
    updatePage(data);
  }
}).catch(function() {
  // we didn't get cached data, the network is our last hope:
  return networkUpdate;
});

Can someone bring some light to my poor brain ?

Thanks a lot

EDITED EDITED EDITED

I forgot to tell how I display PDF files:

Can that explains the issues I have ? I know that a service worker scope is specific, and I wonder if it could be that the SW don't work on the 'page' that's used to display the PDF.

PWA application: issues with caching

0 Answers