ui: use service workers

web/package.json

@@ -31,7 +31,19 @@
     "typescript": "^4.5.5",
     "util": "^0.12.4",
     "uuid": "^3.4.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "workbox-background-sync": "^5.1.4",
+    "workbox-broadcast-update": "^5.1.4",
+    "workbox-cacheable-response": "^5.1.4",
+    "workbox-core": "^5.1.4",
+    "workbox-expiration": "^5.1.4",
+    "workbox-google-analytics": "^5.1.4",
+    "workbox-navigation-preload": "^5.1.4",
+    "workbox-precaching": "^5.1.4",
+    "workbox-range-requests": "^5.1.4",
+    "workbox-routing": "^5.1.4",
+    "workbox-strategies": "^5.1.4",
+    "workbox-streams": "^5.1.4"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=true craco start",
@@ -60,6 +72,7 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "^17.0.16",
     "eslint": "^8.8.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-flowtype": "^8.0.3",

web/src/components/core/Header.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { getTheme, MessageBarButton } from '@fluentui/react';
+import { getTheme } from '@fluentui/react';
 import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
-import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
 
 import SettingsModal, { SettingsChanges } from '~/components/settings/SettingsModal';
 import AboutModal from '~/components/modals/AboutModal';
 import config from '~/services/config';
-import api from '~/services/api';
 import { getSnippetsMenuItems, SnippetMenuItem } from '~/utils/headerutils';
 import ChangeLogModal from '~/components/modals/ChangeLogModal';
 import SharePopup from '~/components/utils/SharePopup';
@@ -34,7 +32,6 @@ interface HeaderState {
   showAbout?: boolean
   showChangelog?: boolean
   loading?: boolean
-  showUpdateBanner?: boolean
   showShareMessage?: boolean
 }
 
@@ -61,9 +58,7 @@ export class Header extends React.Component<any, HeaderState> {
       showAbout: false,
       showChangelog: false,
       loading: false,
-      showUpdateBanner: false,
-      // showShareMessage: false
-      showShareMessage: true
+      showShareMessage: false
     };
   }
 
@@ -73,13 +68,6 @@ export class Header extends React.Component<any, HeaderState> {
     fileElement.accept = '.go';
     fileElement.addEventListener('change', () => this.onItemSelect(), false);
     this.fileInput = fileElement;
-
-    // show update popover
-    api.getVersion().then(r => {
-      const { version } = r;
-      if (!version) return;
-      this.setState({ showUpdateBanner: version !== config.appVersion });
-    }).catch(err => console.warn('failed to check server API version: ', err));
   }
 
   onItemSelect() {
@@ -249,23 +237,6 @@ export class Header extends React.Component<any, HeaderState> {
     const { snippetName } = this.props;
 
     return <header className='header' style={this.styles}>
-      <MessageBar
-        className={this.state.showUpdateBanner ? 'app__update app__update--visible' : 'app__update'}
-        messageBarType={MessageBarType.warning}
-        onDismiss={() => this.setState({ showUpdateBanner: false })}
-        dismissButtonAriaLabel="Close"
-        isMultiline={false}
-        actions={
-          <div>
-            <MessageBarButton onClick={() => {
-              this.setState({ showUpdateBanner: false });
-              config.forceRefreshPage();
-            }}>Action</MessageBarButton>
-          </div>
-        }
-      >
-        Web application was updated, click <b>Reload</b> to apply changes
-      </MessageBar>
       <img
         src='/go-logo-blue.svg'
         className='header__logo'

web/src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { initializeIcons } from '@fluentui/react/lib/Icons';
 import { registerGoLanguageProvider } from '~/components/editor/provider';
 import apiClient from '~/services/api';
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import App from './App';
 import './index.css';
 
@@ -15,5 +15,5 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// Learn more about service workers: https://cra.link/PWA
+serviceWorkerRegistration.register();

web/src/service-worker.ts

@@ -0,0 +1,95 @@
+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }: { request: Request; url: URL }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    }
+
+    // If this is a URL that starts with /_, skip.
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    }
+
+    // If this looks like a URL for a resource, because it contains
+    // a file extension, skip.
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    }
+
+    // Return true to signal that we want to use the handler.
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  })
+);
+
+// Cache WebAssembly and Go assets
+const goWasmAssetsRegExp = new RegExp('^/(wasm_exec.js|worker.wasm)$');
+const DAY_IN_SECONDS = 24 * 60 * 60;
+registerRoute(
+  ({ url }) => url.origin === self.location.origin && goWasmAssetsRegExp.test(url.pathname),
+  new StaleWhileRevalidate({
+    cacheName: 'wasm',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxAgeSeconds: 5 * DAY_IN_SECONDS }),
+    ],
+  })
+)
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.

web/src/serviceWorker.ts → web/src/serviceWorkerRegistration.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 // This optional code is used to register a service worker.
 // register() is not called by default.
 
@@ -8,19 +9,22 @@
 // resources are updated in the background.
 
 // To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
+// opt-in, read https://cra.link/PWA
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
   // [::1] is the IPv6 localhost address.
   window.location.hostname === '[::1]' ||
   // 127.0.0.0/8 are considered localhost for IPv4.
-  window.location.hostname.match(
-    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-  )
+  window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
-export function register(config) {
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
@@ -43,7 +47,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-            'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            'worker. To learn more, visit https://cra.link/PWA'
           );
         });
       } else {
@@ -54,10 +58,10 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -71,7 +75,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                'tabs for this page are closed. See https://cra.link/PWA.'
               );
 
               // Execute callback
@@ -93,25 +97,25 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -122,16 +126,18 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
   }
 }