Service Worker - 如何知道缓存是否被清除？

Question

I'm trying to implement a basic service worker to assure that users of my simple web app have the latest code. So when I update html, js, or css files I can increment the cachename in the service worker file and prompt users to refresh, clear their cache, and get the latest code.

Until now I've relied on hacky ways to update javascript files (including a parameter in the referring URL: /javascript-file.js?v=1).

The with the service worker code below seem unpredictable: sometimes small changes to JS or CSS are reflected after I increment the cachename (code below). Sometimes the changes are reflected without incrementing the cachename, which suggests the code is ALWAYS pulling from the network (wasting resources).

How can you troubleshoot which version of files the code is using and whether the service worker is using cached or network versions? Am I not understanding the basic model for using service workers to achieve this goal?

Any help appreciated.

serv-worker.js (in root):

console.log('Start serv-worker.js');

const cacheName = '3.2121';

var urlsToCache = [
  'home.html',
  'home-js.js', 
  'web-bg.js', 
  'css/main.css',
  'css/edit-menus.css'
];

self.addEventListener('install', event => {
  console.log('Install event...', urlsToCache);
  event.waitUntil(
    caches.open(cacheName)
      .then(function(cache) {
        console.log('Opened cache', cacheName);
        return cache.addAll(urlsToCache);
      })
    );
});

//  Network first.
self.addEventListener('fetch', (event) => {
  // Check the cache first
  // If it's not found, send the request to the network
  // event.respondWith(
  //   caches.match(event.request).then(function (response) {
  //     return response || fetch(event.request).then(function (response) {
  //       return response;
  //     });
  //   })
  // );
  event.respondWith(async function() {
    try {
      console.log('aPull from network...', event.request);
      return await fetch(event.request);
    } catch (err) {
      console.log('aPull from cache...', event.request);
      return caches.match(event.request);
    }
  }());
});

self.addEventListener('message', function (event) {
  console.log('ServiceWorker cache version: ', cacheName, event);
  console.log('Received msg1: ', event.data);
  if (event.data.action === 'skipWaiting') {
    console.log('ccClearing cache: ', cacheName);
    // caches.delete('1.9rt1');     //  hardcode old one
    // caches.delete(cacheName);     //  actually removes cached versions
    caches.keys().then(function(names) {
      for (let name of names)
          caches.delete(name);
    });
    self.skipWaiting();
  }
});

Code in web-bg.js, which home.html references:

function servWorker(){
  let newWorker;

  function showUpdateBar() {
    console.log('Show the update mssgg...ddddd');
    $('#flexModalHeader').html('AP just got better!');
    $('#flexModalMsg').html("<p>AP just got better. Learn about <a href='https://11trees.com/support/release-notes-annotate-pro-web-editor/'>what changed</a>.<br><br>Hit Continue to refresh.</p>");
    $('#flexModalBtn').html("<span id='updateAPbtn'>Continue</span>");
    $('#flexModal').modal('show');
  }

  // The click event on the pop up notification
  $(document).on('click', '#updateAPbtn', function (e) {
    console.log('Clicked btn to refresh...');
    newWorker.postMessage({ action: 'skipWaiting' });
  });

  if ('serviceWorker' in navigator) {
    console.log('ServiceWORKER 1234');
    navigator.serviceWorker.register(baseDomain + 'serv-worker.js').then(reg => {
      console.log('In serviceWorker check...', reg);
      reg.addEventListener('updatefound', () => {
        console.log('A wild service worker has appeared in reg.installing!');
        newWorker = reg.installing;
        newWorker.addEventListener('statechange', () => {
          // Has network.state changed?
          console.log('SSState is now: ', newWorker.state);
          switch (newWorker.state) {
            case 'installed':
              if (navigator.serviceWorker.controller) {
                // new update available
                console.log('Detected service worker update...show update...');
                showUpdateBar();
              }
              // No update available
              break;
          }
        });
      });
    });

    let refreshing;
    navigator.serviceWorker.addEventListener('controllerchange', function (e) {
      console.log('a1111xxxListen for controllerchange...', e);''
      if (refreshing) return;
      console.log('Refresh the page...');
      window.location.reload();
      refreshing = true;
    });

  }   //   End serviceworker registration logic
  return;
}   //  END serv-worker

Answer 1

You've commented out the section for /// Check the cache first and then below that the try/catch statement again pulls from the network and falls back to the cache.

Uncomment this section of code and see if you're loading from the cache first.

  // event.respondWith(
  //   caches.match(event.request).then(function (response) {
  //     return response || fetch(event.request).then(function (response) {
  //       return response;
  //     });
  //   })
  // );

Don't forget that even if you request from the network from the service worker the browser will still use it's own internal cache to serve data. How long the data stays in the browser's cache depends on the expiration headers being sent by the server.

When using expires, it's still a fairly common solution to do something like:

• index.html - expires after an hour. Has script/css tags that call out file names with?v=xyz
• /resources - folder that holds js and css. This folder has a very long expiration time. But that long expiration is short circuited by changing the?v=xyz in index.html

I've used the above successfully in Progressive Web Apps (PWAs). But it is a little painful when debugging. The best option here is to manually clear out the cache and service worker from Dev Tools \ Application, if you're in Chrome.