React Scripts Build Service Worker Not Caching Custom Files

It has come to my attention that the service worker generated by the react-scrips build does not cache certain files. Those files include (in my project) a custom css file in the p

Solution 1:

React use SWPrecache to cache all files that webpack builds. So if you want your css to be cached, you need to include it in your react app (and not in the index.html). add inside app.jsx :

import 'bootstrap-override.css';

But you can't import from a cdn, so you'll need to get bootstrap from npm and import it.

Another solution is to eject the config scripts by doing npm run eject This allows you to configure which files are cached by the service worker by configuring the SWPrecachePlugin. in webpack.config :

new SWPrecacheWebpackPlugin({
    filename: "../service-worker.js",
    ...
    staticFileGlobs: [
        "/bootstrap-override.css" //Additional static files
    ],
    dynamicUrlToDependencies: {
            //Add external assets here
        'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' : ''
    }
})