How to Change the default Cache First strategy to network first strategy in sw-precache?

Question

Here is my gulp task :

 gulp.task('service-worker', ['clean:sw'], function (cb) {
swPrecache.write(path.join(global.config.offlineRoot, 'sw.js'), {
    staticFileGlobs: [
        global.config.offlineRoot + '/offline/**/*.{js,html,css,png,jpg,jpeg,gif,svg,ttf,woff,woff2}',
        global.config.offlineRoot + '/manifest.json'
    ],
    dynamicUrlToDependencies: {
        '/app-shell': ['lib/views/layouts/app-shell.hbs'],
        '/': [
            'lib/views/layouts/main-layout.hbs',
            'lib/views/index.hbs'
        ]
    },
    runtimeCaching: [

        {
            // See https://github.com/GoogleChrome/sw-toolbox#methods
            urlPattern: /^\/(?!login|admin)/,
            handler: 'networkOnly'
        }


    ],

    stripPrefix: global.config.offlineRoot,
    stripPrefixMulti: {
        "node_modules/": 'scripts/'
    },
    navigateFallback: '/app-shell',
    navigateFallbackWhitelist: [/^\/(?!login|admin)/],
    cacheId: "nodebeats",
    //   importScripts: ['scripts/sw-toolbox/sw-toolbox.js'],
    verbose: true,
    maximumFileSizeToCacheInBytes: 3097152, //3mb
    handleFetch: true//(global.config.env === 'prod')
})
    .then(cb)
    .catch(function () {
        cb();
    });

});

From the above config, Login and admin route are fetched using network only and the index route is served from cache first, But I want it to be the network First since I am binding my page from the server side. So the dynamic data are not getting replicated in the app unless ctrl + f5

score 2 · Answer 1 · answered Sep 06 '16 at 17:08

For that use case, where your web content needs to be rendered on the server dynamically, I don't think sw-precache is a good fit. sw-precache can come in handy for certain types of server-rendered resources, but only when the server-rendered content depends on one or more local partials/templates that are then composed on the server. (You'd set up that mapping via dynamicUrlToDependencies.)

For cases where the server-rendered content depends on something other than local templates/partials, like if it depends on the currently logged in user, sw-precache won't be of much help. You can use sw-toolbox directly to handle this type of dynamic content if you'd like—something like the networkFirst strategy strikes a balance between providing a fresh response whenever there is a network connection, with the resiliency of falling back to the previous cached response when the network is unavailable.

How to Change the default Cache First strategy to network first strategy in sw-precache?

1 Answers1