GoogleChromeLabs / sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.
https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
Apache License 2.0
5.22k stars 388 forks source link

Recovering failed requests with sw-precache #324

Open steelx opened 7 years ago

steelx commented 7 years ago

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.

screen shot 2017-08-18 at 6 48 11 pm 1

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 commented 7 years ago

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 commented 7 years ago

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

jeffposnick commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

sw-precache-css-failed

jeffposnick commented 7 years ago

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?