ServiceWorker: click toast to install update (dirty)

app/soapbox/actions/snackbar.ts

@@ -2,24 +2,32 @@ import { ALERT_SHOW } from './alerts';
 
 import type { MessageDescriptor } from 'react-intl';
 
-export type SnackbarActionSeverity = 'info' | 'success' | 'error'
+export type SnackbarActionSeverity = 'info' | 'success' | 'error';
 
-type SnackbarMessage = string | MessageDescriptor
+type SnackbarMessage = string | MessageDescriptor;
 
 export type SnackbarAction = {
-  type: typeof ALERT_SHOW
-  message: SnackbarMessage
-  actionLabel?: SnackbarMessage
-  actionLink?: string
-  severity: SnackbarActionSeverity
-}
+  type: typeof ALERT_SHOW,
+  message: SnackbarMessage,
+  actionLabel?: SnackbarMessage,
+  actionLink?: string,
+  action?: () => void,
+  severity: SnackbarActionSeverity,
+};
 
-export const show = (severity: SnackbarActionSeverity, message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string): SnackbarAction => ({
+export const show = (
+  severity: SnackbarActionSeverity,
+  message: SnackbarMessage,
+  actionLabel?: SnackbarMessage,
+  actionLink?: string,
+  action?: () => void,
+): SnackbarAction => ({
   type: ALERT_SHOW,
   message,
   actionLabel,
   actionLink,
   severity,
+  action,
 });
 
 export const info = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>

app/soapbox/features/ui/containers/notifications_container.js

@@ -4,6 +4,8 @@ import { NotificationStack } from 'react-notification';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { Button } from 'soapbox/components/ui';
+
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
@@ -33,7 +35,12 @@ const mapStateToProps = (state, { intl }) => {
       }
     });
 
-    if (notification.actionLabel) {
+    if (notification.action) {
+      const { action } = notification;
+      notification.action = (
+        <Button onClick={action} text={notification.actionLabel} />
+      );
+    } else if (notification.actionLabel) {
       notification.action = (
         <Link to={notification.actionLink}>
           {notification.actionLabel}

app/soapbox/main.tsx

@@ -5,7 +5,9 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import snackbar from 'soapbox/actions/snackbar';
 import * as BuildConfig from 'soapbox/build_config';
+import { store } from 'soapbox/store';
 import { printConsoleWarning } from 'soapbox/utils/console';
 
 import { default as Soapbox } from './containers/soapbox';
@@ -34,7 +36,9 @@ function main() {
       // https://github.com/NekR/offline-plugin/pull/201#issuecomment-285133572
       OfflinePluginRuntime.install({
         onUpdateReady: function() {
-          OfflinePluginRuntime.applyUpdate();
+          store.dispatch(snackbar.show('info', 'An update is available.', 'Update', undefined, () => {
+            OfflinePluginRuntime.applyUpdate();
+          }));
         },
         onUpdated: function() {
           window.location.reload();

app/soapbox/reducers/alerts.ts

@@ -13,6 +13,7 @@ const AlertRecord = ImmutableRecord({
   severity: 'info',
   actionLabel: '',
   actionLink: '',
+  action: () => {},
 });
 
 import type { AnyAction } from 'redux';

app/soapbox/selectors/index.ts

@@ -186,6 +186,7 @@ const buildAlert = (item: any) => {
     title: item.title,
     actionLabel: item.actionLabel,
     actionLink: item.actionLink,
+    action: item.action,
     key: item.key,
     className: `notification-bar-${item.severity}`,
     activeClassName: 'snackbar--active',