How to cache everything but content using sw-precache

Question

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?

score 0 · Accepted Answer · answered Mar 30 '17 at 23:17

0

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}'

answered Mar 30 '17 at 23:17

Carlos Martinez

4,350
5
32
62

score 0 · Answer 2 · answered Apr 06 '17 at 18:13

0

Change the url pattern to

urlPattern: "'/'"

This is a exact match pattern. Your index will match to this and nothing else.

answered Apr 06 '17 at 18:13

Ashrith

655
8
20

score 0 · Answer 3 · answered Feb 11 '18 at 06:01

The solution for this is, treat your index.html as dynamic content.

Change you sw webpack config to

new SWPrecacheWebpackPlugin({
  cacheId: 'yourcacheid',
  filename: 'service-worker.js',
  staticFileGlobs: [
    'dist/**/*.{js,css}'
  ],
  minify: true,
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /\/$/,
    handler: 'networkFirst'
  }]
})

Remove your index.html from staticFileGlobs and add you root index to runtime caching.

Then look at your cache storage. You will see something like $$$toolbox-cache$$$https://your-domain.com as a new cache item. Inspect that and you can see your index cached there.

How to cache everything but content using sw-precache

3 Answers3