service-workersw-precachesw-toolbox

How to cache everything but content using sw-precache


I'm using sw-precache in a jekyll website to add offline capabilities with the following configuration:

gulp.task('generate-service-worker', function(cb) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = '_site';
  var packageJson = require('./package.json');

  swPrecache.write('./service-worker.js', {
    staticFileGlobs: [rootDir + '/**/*.{html,css,png,jpg,gif,svg}', rootDir + '/js/*'],
    stripPrefix: rootDir + '/',
    runtimeCaching: [{
      urlPattern: /\/$/,
      handler: 'networkOnly'
    }],
    handleFetch: argv.cacheAssets || false,
    maximumFileSizeToCacheInBytes: 10485760, // 10 mb
    cacheId: packageJson.name + '-v' + packageJson.version
  }, cb);
});

The problem is that, when I change content in the website (for example, text in a blog post, or some text from the index page) the changes won't be shown until the new serviceworker version has been installed and the browser has been refreshed, which of course, is the expected behaviour of cacheFirst.

What I want is to make the request to the index of the site always network first, which is what I'm trying here:

runtimeCaching: [{
  urlPattern: /\/$/,
  handler: 'networkFirst'
}]

But this isn't working, the index is always getting fetch from the serviceworker and not from network, how can I accomplish this?


Solution

  • My problem is that I was including the actual page contents for precache: '/**/*.{html,css,png,jpg,gif,svg}'.

    Excluding the html files works as expected:

    '/**/*.{css,png,jpg,gif,svg}'