Discussion on: Clear Cache on build for React Apps.

[Eddie Monge Jr]

I don't understand the point of this article. This is done automatically already. The build system outputs the built files using a hash. The index.html uses those to load it. When you push new code up, the index.html is replaced with updated references. Set the index.html to never be cached and add the new build files alongside the old ones and people going to the site initially get the new version and people already on the page will continue to work and then when they refresh they get the new version as well.

[Ammar Tinwala]

Hi Eddie

I'm very sorry for such a late reply. The point of this article was, whenever I was generating the build, I was getting the same hash files through create-react-app. It seems to have changed now. I'm getting different has files generation during the build.
Can you share me some example on how to "Set the index.html to never be cached" only on new builds ? It will help us all

[Arturo Gallegos]

When your project requires to implement strict security policies in some cases it is necessary to disable hashes, for this reason we need another option to clear all caches.

however I agree that this method could be shorter, in my opinion only need attach in the serviceWorker.js a console.log with current date

[Ammar Tinwala]

Hi Arturo

I'm extremely sorry for such a late reply. Can you help me out how I can make this code shorter ?

[Arturo Gallegos]

Of course, as I commented only need attach a console log in your service worker, for example:

Create a file updateBuildTime.js

const fs = require('fs');

const sw_file = './src/forceUpdateCache.js';

const buildDate = `console.log(${new Date().getTime()})`

fs.writeFile(sw_file, buildDate, "utf8", (error) => {
  if(error){
    return console.warn(error);
  }
  return console.warn('All right')
});

then update your package file with

"scripts": {
   ....
    "build": "node ./updateBuildTime.js && node scripts/build.js && cat src/forceUpdateCache.js >> build/service-worker.js",
    ....
  },

With these lines you can add a console.log, I have used the current date to ensure a new value is different to the last version, but you can use another value

The reason of this is very simple, own service worker update all cache our app but need at least one change to download the new version of this file, the console.log with a date is perfect, it will be diferent in each build.

[Ammar Tinwala]

Thanks Arturo, I will check this out.