Webpack - caching improvements

[jchapelle]

Description

- Use case 1 : Buggy app

1. Deploy an app that is somehow buggy. Even best dev make mistakes
2. A client access the app via your favourite browser (which is probably supporting cache api and service worker). Your app is cached by service worker (sw).
3. Redeploy your app with correction
4. Same client access the app via the same browser by pressing f5. He's getting the sw cached version.
5. Note that if client closes its tabs, browser ... then access the app, he will get the new version. This is related to the new deployment which generates a new sw.js file. This file will be executed by service worker but because of sw lifecycle, it will be used only when all clients stop using the previous one

- Use case 2 : Subsequent deployments

1. Deploy an app
2. A client access the app via his favourite browser (which is probably supporting cache api and service worker). Your app is cached by service worker (sw).
3. Redeploy your app with correction, improvements. Hey, aren't we suppose to push continously (CI/CD)
4. Same client access the app via the same browser by pressing f5. He's getting the sw cached version.
5. Note that if client closes its tabs, browser ... then access the app, he will get the new version. This is related to the new deployment which generates a new sw.js file. This file will be executed by service worker but because of sw lifecycle, it will be used only when all clients stop using the previous one

Steps to reproduce

Nothing in particular

Expected behavior
I think we should discuss the offlinePlugin configuration of webpack.
This plugins generates a sw.js file which contains the caching strategy that will be executed by browsers service workers.
I think we should discuss the caching we want and either adapt the offlinePlugin configuration or generate a custom sw strategy.

From my point a view, last version deployed should always be served first as it contains improvements, bugs corrections, ... Maybe you guys have other point of view ?

• One simple way of doing this would probably be to exclude index.html from the sw configuration (I think this can be done by adding index.html next to the .htaccess in the configuration of the plugin - I'll check that and let you know).
• Another way could be to configure the plugin to autoUpdate more frequently that 24 hours (which is the default caching time) .
• Another way could be to configure the sw with skipWaiting feature. This does not seems to be supported by offlinePlugin

By the way, this link explains very well the differences in refresh scenarios (F5, CTRL+F, ...)

Versions

• React-Boilerplate: latest
• Node/NPM: latest
• Browser: chrome latest

[jchapelle]

Close in favor of this

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.