easy-cache-react

easy-cache-react

easy-cache-react provide an easy way to ensure that clients are always on the latest version of your app. Modern, tested and fully written in typescript.

Written here at easyblue.io, a french insurtech company. Check out our website to see how we're using this package in production.

Installation

yarn add easy-cache-react or npm install easy-cache-react

Basic Usage

useEasyCache hook

import * as React from 'react';
import { useEasyCache } from 'easy-cache-react';

import packageJson from '../package.json';

const App: React.FC = () => {
  const { loading, isUpToDate } = useEasyCache(packageJson.version, 1000);

  if (loading) {
    return <>Your App is loading...</>;  
  }

  if (!isUpToDate) {
    return <>A newer version of your app is available, you will be redirected soon...</>;
  }

  return (
    <div>
      Your awesome App
    </div>
  );
};

export default App;

Your App need to expose a meta.json file (customisable) containing the current production version.

You can find a working example in this repo for more details.

Full API

export type EasyCacheHookType = {
  loading: boolean;
  isUpToDate: boolean;
  error: Error | null;
};

export function useEasyCache(
  packageJsonVersion: string,
  timeout: number = 0,
  onCacheReload: () => void = () => window.location.reload(true),
  metaPath: string = '/meta.json',
  resolver?: ReleaseResolverType
): EasyCacheHookType;

Credit

https://github.com/flexdinesh/cache-busting-example/tree/master