devmaxxx / react-clear-browser-cache

react-clear-browser-cache

Library for clearing browser cache after react app updates

Install

npm install --save react-clear-browser-cache

or

yarn add react-clear-browser-cache

Add script in package.json

Generate meta.json file with latest build version.

{
  "prebuild": "npm run generate-build-meta",
  "generate-build-meta": "node ./node_modules/react-clear-browser-cache/bin/cli.js"
}

Usage

Using Boundary:

ClearBrowserCacheBoundary has context provider for child elements (useClearBrowserCache), add him after your ErrorBoundary, because ClearBrowserCacheBoundary only handles certain errors like ChunkLoadError.

import React from 'react';
import ReactDOM from 'react-dom';

import { ClearBrowserCacheBoundary } from 'react-clear-browser-cache';

import App from './App';
import ErrorBoundary from './ErrorBoundary';

ReactDOM.render(
  <ErrorBoundary>
    <ClearBrowserCacheBoundary auto fallback='Loading' duration={60000}>
      <App />
    </ClearBrowserCacheBoundary>
  </ErrorBoundary>,
  document.getElementById('root')
);

Props

Name	Type	Default	More info
duration	number		You can set the duration when to fetch for new updates.
auto	boolean	false	Set to true to auto-reload the page whenever an update is available.
fallback	any	null	You can set fallback data when fetching new version - preloader etc.
storageKey	string	APP_VERSION	Storage key for saving app version.
storage	object	localStorage	You can use another storage to save and get the version of app like store.
filename	string	meta.json	Filename for fetching new app version.
errorCheckers	array	[]	You can set custom error checkers for catching errors concerned with invalid browser caches.
debug	function		You can debug state and errors.

Using hook:

import React from 'react';

import { useClearBrowserCache } from 'react-clear-browser-cache';

function App() {
  const contextValue = useClearBrowserCache();

  return null;
}

Using render props:

import React from 'react';

import { ClearBrowserCache } from 'react-clear-browser-cache';

function App() {
  return <ClearBrowserCache>{(contextValue) => null}</ClearBrowserCache>;
}

Context value

Name	Type	More info
loading	boolean	Indicates request for a new version.
isLatestVersion	boolean	Indicates if the latest version of the app.
latestVersion	string	Latest version of the app.
disabled	boolean	Indicates if the boundary component is disabled, stopped all requests, doesn't handle errors, just render children because of internal errors.
clearCacheAndReload	function	Clear CacheStorage and reload the page.

License

MIT © arenuzzz