javascriptcachingservice-workersw-precachesw-toolbox

How to cache googleapis.com using sw-precache runtimeCaching


I make use of material icons and roboto font on my site and I've been trying to cache it using sw-precache runtimeCaching API but it doesn't work, I'm not sure if I'm doing it right. I need my service worker to fetch these files from cache. Here's my code. I integrated it into my gulp task:

gulp.task('create-sw', ['watchCss', 'watchJS'], callback => {
    preCache.write(path.join('.', 'sw.js'), {
        runtimeCaching: [{
            urlPattern: /^https:\/\/fonts\.googleapis\.com$/,
            handler: 'cacheFirst',
            options: {
                cache: {
                    maxEntries: 10,
                    name: 'google-apis'
            }
        },
    }],
        staticFileGlobs: [
            './script.js',
            './manifest.json',
            './app/**/*.{html,json}',
            './dist/**/*.{js,css,eot,ttf,woff,woff2}',
            './**/*.{png,jpeg,jpg,svg,gif}',
            './index.html',
        ],
        stripPrefix: '.',
        maximumFileSizeToCacheInBytes: 15000000,
    }, callback)
});

I'm trying to cache these links:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">

Solution

  • This is my GULP task that generates cache for Instagram images:

    gulp.task('generate-service-worker', function(callback) {
    var swPrecache = require('sw-precache');
    var rootDir = 'app';
    
    swPrecache.write(`${rootDir}/service-worker.js`, {
        staticFileGlobs: [rootDir + '/**/*.{php,js,html,css,png,jpg,gif,svg,eot,ttf,woff,json}', './'],
        stripPrefix: rootDir,
        directoryIndex: false,
        maximumFileSizeToCacheInBytes: 10097152,
        runtimeCaching: [{
            urlPattern: /^https:\/\/scontent\.cdninstagram\.com/,
            handler: 'networkFirst',
            options: {
                cache: {
                    maxEntries: 50,
                    name: 'instagram-images-cache'
                }
            }
        }]
    }, callback);
    

    });