Truncate caches when update is available (#241)

* feat: add notification action support

* feat: check for updates

Author: x1unix

web/src/components/modals/Notification/Notification.css

@@ -32,3 +32,6 @@
   margin-bottom: .4rem;
 }
 
+.Notification__Actions {
+  margin-top: 1rem;
+}

web/src/components/modals/Notification/Notification.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import {IconButton, ISemanticColors, ProgressIndicator, useTheme} from "@fluentui/react";
+import {
+  Stack,
+  IconButton,
+  ISemanticColors,
+  ProgressIndicator,
+  DefaultButton,
+  PrimaryButton,
+  useTheme,
+} from "@fluentui/react";
 import { FontIcon } from "@fluentui/react/lib/Icon";
 
 import "./Notification.css"
@@ -17,6 +25,13 @@ interface ProgressState {
   current?: number
 }
 
+interface NotificationAction {
+  label: string
+  key: string
+  primary?: boolean
+  onClick?: () => void
+}
+
 export interface NotificationProps {
   id: number|string
   type?: NotificationType
@@ -25,6 +40,7 @@ export interface NotificationProps {
   canDismiss?: boolean
   progress?: ProgressState
   onClose?: () => void
+  actions?: NotificationAction[]
 }
 
 const iconColorPaletteMap: {[k in NotificationType]: keyof ISemanticColors} = {
@@ -51,6 +67,19 @@ const getPercentComplete = (progress: NotificationProps['progress']): (number|un
   return percentage / 100;
 }
 
+const NotificationActionButton: React.FC<Omit<NotificationAction, 'key'>> = (
+  {label, primary, onClick}
+) => {
+  const ButtonComponent = primary ? PrimaryButton : DefaultButton;
+  return (
+    <ButtonComponent
+      primary={primary}
+      onClick={onClick}
+      text={label}
+    />
+  );
+}
+
 const Notification: React.FunctionComponent<NotificationProps> = ({
   id,
   title,
@@ -59,6 +88,7 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
   canDismiss = true,
   type = NotificationType.Info,
   onClose,
+  actions
 }) => {
   const {semanticColors, fonts, ...theme} = useTheme();
   return (
@@ -121,6 +151,22 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
           )}
         </div>
       )}
+      { actions?.length && (
+        <Stack
+          horizontal
+          className="Notification__Actions"
+          horizontalAlign="end"
+          tokens={
+            { childrenGap: 10 }
+          }
+        >
+          {
+            actions.map(({key, ...props}, i) => (
+              <NotificationActionButton key={key} {...props} />
+            ))
+          }
+        </Stack>
+      )}
 
     </div>
   );

web/src/components/pages/Playground.tsx

@@ -2,7 +2,11 @@ import React, {useEffect} from 'react';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { dispatchPanelLayoutChange, newSnippetLoadDispatcher} from '~/store';
+import {
+  dispatchPanelLayoutChange,
+  dispatchUpdateCheck,
+  newSnippetLoadDispatcher,
+} from '~/store';
 import { Header } from '~/components/core/Header';
 import CodeEditor from '~/components/editor/CodeEditor';
 import FlexContainer from '~/components/editor/FlexContainer';
@@ -18,6 +22,10 @@ const CodeContainer = connect()(({dispatch}: any) => {
   useEffect(() => {
     dispatch(newSnippetLoadDispatcher(snippetID));
   }, [snippetID, dispatch]);
+
+  useEffect(() => {
+    dispatch(dispatchUpdateCheck)
+  }, [dispatch]);
   return (
     <CodeEditor />
   );
@@ -33,7 +41,9 @@ const Playground = connect(({panel}: any) => ({panelProps: panel}))(({panelProps
         </FlexContainer>
         <ResizablePreview
           {...panelProps}
-          onViewChange={changes => dispatch(dispatchPanelLayoutChange(changes))}
+          onViewChange={changes => {
+            dispatch(dispatchPanelLayoutChange(changes))
+          }}
         />
         <NotificationHost />
       </Layout>

web/src/serviceWorkerRegistration.ts

@@ -61,6 +61,33 @@ export function register(config?: Config) {
   }
 }
 
+/**
+ * Manually registers service worker
+ *
+ * @param config
+ */
+export function manualRegister(config?: Config) {
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  if (!('serviceWorker' in navigator)) {
+    return;
+  }
+
+  const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+  if (publicUrl.origin !== window.location.origin) {
+    return;
+  }
+
+  const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  if (isLocalhost) {
+    checkValidServiceWorker(swUrl, config);
+    return;
+  }
+
+  registerValidSW(swUrl, config);
+}
+
 function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)

web/src/services/updates.ts

@@ -0,0 +1,59 @@
+import client from '~/services/api';
+import environment from "~/environment";
+
+export interface UpdateInfo {
+  newVersion: string
+}
+
+/**
+ * Checks for application updates and returns new available version.
+ *
+ * Returns null if no updates available.
+ */
+export const checkUpdates = async (): Promise<UpdateInfo|null> => {
+  if (!window.navigator.onLine) {
+    console.log('updater: application is offline, skip.');
+    return null;
+  }
+
+  const { version: newVersion } = await client.getVersion();
+  const { appVersion } = environment;
+  if (newVersion === appVersion) {
+    console.log('updater: app is up to date:', newVersion);
+    return null;
+  }
+
+  console.log(`updater: new update is available - ${newVersion}`);
+  return {
+    newVersion: newVersion
+  }
+
+  // if (!('serviceWorker' in navigator)) {
+  //   console.warn('updater: no SW registrations found, skip');
+  //   return;
+  // }
+  //
+  // const registrations = await navigator.serviceWorker.getRegistrations();
+  // if (!registrations?.length) {
+  //   console.warn('updater: no SW registrations found, skip');
+  //   return;
+  // }
+
+
+  // await truncateCachesAndRegister(registrations);
+}
+
+// const truncateCachesAndRegister = async (registrations: readonly ServiceWorkerRegistration[]) => {
+//   console.log(`updater: unregistering ${registrations.length} service workers...`);
+//   await Promise.all(registrations.map(r => r.unregister()));
+//
+//   console.log('updater: truncating caches', caches.keys());
+//
+//   for (const sw of registrations) {
+//     const ok = await sw.unregister();
+//     if (!ok) {
+//       console.
+//     }
+//   }
+//   console.log('updater: truncating all caches');
+// }

web/src/store/actions/ui.ts

@@ -1,5 +1,4 @@
 import { ActionType} from "./actions";
-
 import { UIState } from "../state";
 
 export interface LoadingStateChanges {

web/src/store/dispatchers/index.ts

@@ -1,4 +1,5 @@
 export * from './snippets';
 export * from './settings';
+export * from './updates';
 export * from './build';
 export * from './utils';

web/src/store/dispatchers/updates.ts

@@ -0,0 +1,67 @@
+import {manualRegister} from '~/serviceWorkerRegistration';
+import {newAddNotificationAction, NotificationType} from "~/store/notifications";
+import {checkUpdates} from "~/services/updates";
+
+import {Dispatcher} from "./utils";
+import {DispatchFn} from "../helpers";
+
+const truncateCachesAndRegister = async (registration: ServiceWorkerRegistration) => {
+  console.log(`updater: unregistering service worker...`);
+  await registration.unregister();
+
+  console.log('updater: truncating all caches');
+  const keys = await caches.keys();
+  await Promise.all(keys.map(key => caches.delete(key)));
+
+  console.log('updater: re-registering service worker...');
+  manualRegister();
+}
+
+const performSelfUpdate = async (dispatch: DispatchFn, newVersion: string)=> {
+  if (!('serviceWorker' in navigator)) {
+    console.warn('updater: no SW registrations found, skip');
+    return;
+  }
+
+  const registration = await navigator.serviceWorker.getRegistration();
+  if (!registration) {
+    console.warn('updater: no SW registrations found, skip');
+    return;
+  }
+
+  await truncateCachesAndRegister(registration);
+  dispatch(newAddNotificationAction({
+    id: 'UPDATE',
+    type: NotificationType.Warning,
+    title: `Update available - ${newVersion}`,
+    description: 'Playground was updated. Please refresh page to apply changes.',
+    canDismiss: false,
+    actions: [
+      {
+        key: 'refresh',
+        label: 'Refresh',
+        primary: true,
+        onClick: () => {
+          window.location.replace("");
+        }
+      }
+    ]
+  }));
+}
+
+export const dispatchUpdateCheck: Dispatcher = async (dispatch: DispatchFn) => {
+  try {
+    const rsp = await checkUpdates();
+    if (!rsp) {
+      return;
+    }
+
+    try {
+      await performSelfUpdate(dispatch, rsp.newVersion);
+    } catch (err) {
+      console.error('updater: error during update:', err);
+    }
+  } catch (err) {
+    console.error('updater: failed to check for updates', err);
+  }
+}

web/src/store/notifications/state.ts

@@ -15,7 +15,13 @@ export interface Notification {
     indeterminate?: boolean
     total?: number
     current?: number
-  }
+  },
+  actions?: {
+    label: string,
+    key: string,
+    primary?: boolean,
+    onClick?: () => void,
+  }[]
 }
 
 export type NotificationsState = {[k: string]: Notification};