Recovering failed requests with sw-precache

[steelx]

Whenever I give a new build the service-worker not able to find the new files, user has to manually clear the browser cache to be able to work. Kindly help.

As you can see in below screenshot, after giving new code build, SW doesnt find the new MAIN css file name.

And after this if I reload with cleared cache option, everything loads fine.

I'm using npm run precache (sw-precache --verbose --config=sw-precache-config.js) to generate service-worker.js after my grunt build. Also Im using sw-precache-config.js

module.exports = {
    staticFileGlobs: [
        'dist/**.html',
        'dist/scripts/**.js',
        'dist/**.css',
        'dist/images/*',
        'dist/resources/**.json'
    ],
    root: 'dist',
    stripPrefix: 'dist/',
    navigateFallback: '/index.html',
    default: 'networkFirst',
    verbose: true
};

[jeffposnick]

Whenever I give a new build the service-worker not able to find the new files, user has to manually clear the browser cache to be able to work.

I'm afraid that's not enough information to go on. Can you provide screenshots of the Network panel in DevTools and JavaScript console logs illustrating what's going on?

Does the service worker know about the URLs of the new files, but then your network requests for them fail? If that's the case, it sounds like the issue to investigate is why your web server doesn't respond to requests for the new files.

[steelx]

@jeffposnick I have updated the post with screenshot, kinldy revert

[jeffposnick]

It sounds like you're lazy-loading some assets with hashes in them—is that correct?

Can you try configuring skipWaiting: false and see if that changes the behavior you're seeing?

There's more detail at https://github.com/GoogleChrome/sw-precache#skipwaiting-boolean

[steelx]

@jeffposnick thanks for commenting. But Im not lazy loading css its hard coded in index.html minified with hashed,renamed after every build.

But I will try what you mentioned. I will update again.

[steelx]

still not working. It loads everything but CSS. If I refresh 2-3 times. OR just clear cache it works.

[jeffposnick]

Sorry for not getting back to you sooner.

I'd recommend checking the output service worker file to confirm that all of the .css files that you expect for a given revision of your index.html are present in the precache list. For instance, after running a build, can you confirm that if your index.html includes a reference to main.abcd1234.css, that the generated service-worker.js file includes main.abcd1234.css (and not some other version) in its list of files to precache?

It sounds like there's some mismatch between the files that sw-precache knows about and the files that exist after the build is complete. Perhaps this is due to the order in which your build steps take place—can you move sw-precache to the last task in the sequence, if it's not already?