check for updates and show update button

.eslintrc.js

@@ -7,6 +7,9 @@ module.exports = {
     'airbnb/hooks',
     'plugin:jest-dom/recommended',
   ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
   rules: {
     'import/prefer-default-export': 0,
     'import/no-named-as-default': 0,
@@ -23,6 +26,12 @@ module.exports = {
     'react/prop-types': 0,
     'react/require-default-props': 0,
     'no-await-in-loop': 'warn',
+    'no-console': ['error', {
+      allow: ['debug', 'info', 'warn', 'error'],
+    }],
+    'no-multi-spaces': ['error', {
+      ignoreEOLComments: true,
+    }],
     'no-plusplus': [
       'error',
       {

.github/workflows/build.yaml

@@ -104,13 +104,13 @@ jobs:
           DOCKER_METADATA_PR_HEAD_SHA: true
 
       - name: get date
-        run: echo "BUILD_TIMESTAMP=$(git show -s --format=%cI)" >> $GITHUB_ENV
+        run: echo "GIT_TIMESTAMP=$(git show -s --format=%cI)" >> $GITHUB_ENV
 
       - uses: docker/build-push-action@v4
         with:
           build-args: |
             VITE_APP_GIT_SHA=${{ github.event_name == 'push' && github.sha || github.event.pull_request.head.sha }}
-            VITE_APP_BUILD_TIMESTAMP=${{ env.BUILD_TIMESTAMP }}
+            VITE_APP_GIT_TIMESTAMP=${{ env.GIT_TIMESTAMP }}
             SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
             SENTRY_RELEASE=${{ github.event_name == 'push' && github.sha || github.event.pull_request.head.sha }}
           builder: ${{ steps.buildx.outputs.name }}

Dockerfile

@@ -14,11 +14,11 @@ ADD . ./
 RUN pnpm install --offline
 
 ARG VITE_APP_GIT_SHA=unknown
-ARG VITE_APP_BUILD_TIMESTAMP=1970-01-01T00:00:00Z
+ARG VITE_APP_COMMIT_TIMESTAMP=1970-01-01T00:00:00Z
 ARG SENTRY_AUTH_TOKEN
 ARG SENTRY_RELEASE
 ENV VITE_APP_GIT_SHA $VITE_APP_GIT_SHA
-ENV VITE_APP_BUILD_TIMESTAMP $VITE_APP_BUILD_TIMESTAMP
+ENV VITE_APP_COMMIT_TIMESTAMP $VITE_APP_COMMIT_TIMESTAMP
 ENV SENTRY_AUTH_TOKEN $SENTRY_AUTH_TOKEN
 ENV SENTRY_RELEASE $SENTRY_RELEASE
 RUN pnpm build:production

go/build.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 cd "$(dirname "$0")"
-docker compose build --build-arg VITE_APP_GIT_SHA=$(git show -s --format=%H) --build-arg VITE_APP_BUILD_TIMESTAMP=$(git show -s --format=%cI)
+docker compose build --build-arg VITE_APP_GIT_SHA=$(git show -s --format=%H) --build-arg VITE_APP_COMMIT_TIMESTAMP=$(git show -s --format=%cI)

package.json

@@ -69,7 +69,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.2",
+    "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.14",
     "camelcase": "^6.3.0",
     "env-cmd": "^8.0.2",
@@ -91,10 +91,11 @@
     "puppeteer": "^19.11.1",
     "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.3.2",
-    "vite": "^4.4.0",
+    "vite": "^4.4.7",
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-svgr": "^3.2.0",
-    "whatwg-fetch": "^3.6.2"
+    "whatwg-fetch": "^3.6.2",
+    "workbox-window": "^7.0.0"
   },
   "browserslist": {
     "production": [

src/components/AppHeader/index.jsx

@@ -14,6 +14,7 @@ import ResizeHandler from '../ResizeHandler';
 import { filterRegularClick } from '../../utils';
 
 import AccountMenu from './AccountMenu';
+import PWAIcon from '../PWAIcon';
 import TimeFilter from './TimeFilter';
 
 const styles = () => ({
@@ -130,14 +131,17 @@ const AppHeader = ({
           <div className={classes.headerWideItem} style={reorderWideStyle}>
             {Boolean(!primeNav && !clips && !annotating && dongleId) && <TimeFilter />}
           </div>
-          <IconButton
-            aria-owns={open ? 'menu-appbar' : null}
-            aria-haspopup="true"
-            onClick={handleClickedAccount}
-            aria-label="account menu"
-          >
-            <AccountIcon className={classes.accountIcon} />
-          </IconButton>
+          <div className="flex flex-row gap-2">
+            <PWAIcon />
+            <IconButton
+              aria-owns={open ? 'menu-appbar' : null}
+              aria-haspopup="true"
+              onClick={handleClickedAccount}
+              aria-label="account menu"
+            >
+              <AccountIcon className={classes.accountIcon} />
+            </IconButton>
+          </div>
         </div>
       </AppBar>
       {Boolean(MyCommaAuth.isAuthenticated() && profile) && (

src/components/ErrorFallback.jsx

@@ -31,7 +31,7 @@ const ErrorFallback = ({ error, componentStack }) => {
   }, []);
 
   const information = `connect version: ${import.meta.env.VITE_APP_GIT_SHA || 'unknown'}
-Build timestamp: ${import.meta.env.VITE_APP_BUILD_TIMESTAMP || 'unknown'}
+Build timestamp: ${import.meta.env.VITE_APP_COMMIT_TIMESTAMP || 'unknown'}
 URL: ${window.location.href}
 
 Browser: ${window.navigator.userAgent}

src/components/PWAIcon.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+
+import {
+  CircularProgress,
+  IconButton,
+  Tooltip,
+} from '@material-ui/core';
+
+import { CheckCircle, Download } from '../icons';
+
+const intervalMS = 60 * 60 * 1000;  // 1 hour
+
+const PWAIcon = ({ immediate }) => {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onNeedrefresh: () => {
+      console.debug('[PWA] Update available');
+      if (immediate) {
+        updateServiceWorker(true);
+      }
+    },
+    onOfflineReady: () => {
+      console.debug('[PWA] Ready to work offline');
+    },
+    onRegistered: (registration) => {
+      console.debug('[PWA] Service worker registered');
+
+      if (registration) {
+        // Check for updates regularly
+        setInterval(() => {
+          console.debug('[PWA] Checking for updates');
+          registration.update();
+        }, intervalMS);
+      }
+    },
+    onRegisterError: (error) => {
+      console.error('[PWA]', error);
+    },
+  });
+  const [installing, setInstalling] = useState(false);
+
+  if (immediate) {
+    return null;
+  }
+
+  const close = () => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  if (!offlineReady && !needRefresh) {
+    return <div className="w-12" />;
+  }
+
+  let title;
+  let Icon;
+  let color;
+  let callback;
+  if (needRefresh) {
+    title = 'Install update';
+    Icon = Download;
+    color = 'text-[rgba(128,255,128,0.5)]';
+    callback = () => {
+      setInstalling(true);
+      updateServiceWorker(true);
+    };
+  } else if (offlineReady) {
+    title = 'No updates available';
+    Icon = CheckCircle;
+    color = 'text-[rgba(255,255,255,0.5)]';
+    callback = close;
+  }
+
+  return (
+    <Tooltip
+      className="w-12 flex justify-center self-center"
+      title={<span className="text-xs">{title}</span>}
+    >
+      <IconButton
+        className="animate-fadein"
+        onClick={callback}
+        disabled={installing}
+      >
+        {installing ? (
+          <CircularProgress className="flex text-[rgba(128,255,128,0.5)]" size={24} />
+        ) : (
+          <Icon className={`w-7 h-7 ${color}`} />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default PWAIcon;

src/components/anonymous.jsx

@@ -10,8 +10,10 @@ import Typography from '@material-ui/core/Typography';
 
 import { config as AuthConfig } from '@commaai/my-comma-auth';
 
-import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon } from '../icons';
 import Colors from '../colors';
+import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon } from '../icons';
+
+import PWAIcon from './PWAIcon';
 
 import demoDevices from '../demo/devices.json';
 
@@ -130,7 +132,7 @@ class AnonymousLanding extends Component {
       const { code, state } = data.detail.authorization;
       window.location = [AuthConfig.APPLE_REDIRECT_PATH, qs.stringify({ code, state })].join('?');
     });
-    document.addEventListener('AppleIDSignInOnFailure', console.log);
+    document.addEventListener('AppleIDSignInOnFailure', console.warn);
   }
 
   render() {
@@ -163,6 +165,7 @@ class AnonymousLanding extends Component {
             <Typography className={classes.demoLinkText}>Try the demo</Typography>
           </a>
         </div>
+        <PWAIcon immediate />
       </div>
     );
   }