Webpack Offline plugin - runtime events - show new updates notification once

webpack_offline_plugin_runtime.ts

import { showSuccessBanner } from '@rs/ui-toolkit';
import moment from 'moment';
import * as OfflinePluginRuntime from 'offline-plugin/runtime';

const SW_UPDATE_READY = 'SW_UPDATE_READY';
const WEBPACK_OFFLINE_CACHE_PREFIX = 'webpack-offline:';
const LAST_UPDATED_DATE = 'LAST_UPDATED_DATE';

// dates from cache names sorted
const getDatesFromCacheNames = (keys: string[]) =>
  keys
    .filter(key => key.startsWith(WEBPACK_OFFLINE_CACHE_PREFIX))
    .map(key => moment(new Date(key.replace(WEBPACK_OFFLINE_CACHE_PREFIX, ''))))
    .sort((dateOne, dateTwo) => dateOne.valueOf() - dateTwo.valueOf());

OfflinePluginRuntime.install();

OfflinePluginRuntime.install({
  onUpdateReady: () => {
    caches.keys().then(keys => {
      const lastUpdateDateString = localStorage.getItem(LAST_UPDATED_DATE);
      const lastUpdateDate = moment(lastUpdateDateString || new Date());
      const datesFromCacheNames = getDatesFromCacheNames(keys);
      const currentUpdateDate = datesFromCacheNames[datesFromCacheNames.length - 1];

      // if current update date is not last updated date
      // or there is no last updated date in local storage
      if ((!!currentUpdateDate && !currentUpdateDate.isSame(lastUpdateDate)) || !lastUpdateDateString) {
        // new updates are ready
        showSuccessBanner(SW_UPDATE_READY, {
          content: 'The new version of the application is ready',
          actionLabel: 'Apply',
          onActionClick: () => OfflinePluginRuntime.applyUpdate(),
        });
        localStorage.setItem(LAST_UPDATED_DATE, currentUpdateDate.format());
      }
    });
  },
  onUpdated: () => {
    // @ts-ignore
    window.location.reload();
  },
});