A component to manage application updates with an enhancement to the react-clear-cache package.
- Fetched on window focus
- Stop fetching on window blur
See demo
npm install react-clear-cache-v2yarn add react-clear-cache-v2This will generate meta.json file. This will have the version key with the latest build.
{ "prebuild": "react-clear-cache-v2 --destination=<path of your dist folder>" }import * as React from 'react'; import { ClearCacheProvider, useClearCacheCtx } from 'react-clear-cache-v2'; const App: React.FC = () => { const { isLatestVersion, emptyCacheStorage } = useClearCacheCtx(); return ( <div> {!isLatestVersion && ( <p> <a href="#" onClick={(e) => { e.preventDefault(); emptyCacheStorage(); }} > Update version </a> </p> )} </div> ); }; ReactDOM.render( <ClearCacheProvider duration={5000}> <App /> </ClearCacheProvider>, document.getElementById('root') );import * as React from 'react'; import { useClearCache } from 'react-clear-cache-v2'; const App: React.FC<{}> = () => { const { isLatestVersion, emptyCacheStorage } = useClearCache(); return ( <div> {!isLatestVersion && ( <p> <a href="#" onClick={(e) => { e.preventDefault(); emptyCacheStorage(); }} > Update version </a> </p> )} </div> ); }; export default App;You can set the duration (ms) when to fetch for new updates.
Set to true to auto-reload the page whenever an update is available.
A boolean that indicates whether the request is in flight
A boolean that indicates if the user has the latest version.
This function empty the CacheStorage and reloads the page.
MIT © noahjohn9259
-
In package.json, set
maintosrc/index.js. -
Run
npm startin root directory. It will build and watch if there are changes made. -
cd exampleand runnpm start. It will run the demo application.
If you are done making changes, reset main to dist/index.js in package.json.