Git Product home page Git Product logo

Comments (2)

woutervanvliet avatar woutervanvliet commented on June 1, 2024

I'm a bit unsure as to what you exactly mean. By default, a list of assets emitted by webpack is included in your service worker. They all include the hash in their filename, if that's what you setup in your webpack config.

If you need more information about the build to be available in your ServiceWorker you can supply transformOptions, which receives all the webpack build info. In one of my own projects, I have it setup like so:

const swPlugin = new ServiceWorkerWebpackPlugin({
    entry: path.join(context, 'src/sw.js'),
    publicPath: '/public/',
    filename: 'sw.js',
    transformOptions: (swOption) => {
        // The list of cachable assets contains contains, for each file,
        // a hash of their content. A complete hash of that would be
        // perfect as cache name.
        // We need to add a cache of the service worker file though,
        // as that one doesn't have a content cache
        const hash = crypto.createHash('sha1');
        hash.update([
            JSON.stringify(swOption.assets),
            fs.readFileSync(path.join(context, 'src/sw.js'), 'utf8'),
            isProduction ? '1' : Math.random(),
        ].join('-'));
        return {
            isProduction,
            watch,
            assets: swOption.assets,
            buildId: `${pkg.version}-${hash.digest('hex')}`,
        };
    },
});

And use buildId as cache name (caches.open(serviceWorkerOption.buildId)).

Hope this helps.

from serviceworker-webpack-plugin.

AlexDubok avatar AlexDubok commented on June 1, 2024

I think it would be nice to have webpack build hash among the jsonStats object. It could be added to the cache name to make cache unique for every build. All that should be done is the change of this line to true.
Or maybe it will more extendable if we could pass whole stats object as a plugin option?

from serviceworker-webpack-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.