A component to manage application updates.
- Fetched on window focus
- Stop fetching on window blur
See demo
$ npm install --save react-clear-cacheThis will generate meta.json file. This will have the version key with the latest build.
{ "prebuild": "npm run generate-build-meta", "generate-build-meta": "./node_modules/react-clear-cache/bin/cli.js" }import * as React from 'react'; import { ClearCacheProvider, useClearCacheCtx } from 'react-clear-cache'; 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 ClearCache from 'react-clear-cache'; const App: React.FC<{}> = () => { return ( <div> <ClearCache> {({ isLatestVersion, emptyCacheStorage }) => ( <div> {!isLatestVersion && ( <p> <a href="#" onClick={(e) => { e.preventDefault(); emptyCacheStorage(); }} > Update version </a> </p> )} </div> )} </ClearCache> </div> ); }; export default App;import * as React from 'react'; import { useClearCache } from 'react-clear-cache'; 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 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 © geminstall23
-
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.