Auto-reload on app updates (#3693)

* Auto-reload on app updates * update #1 * test * wip * green * wip * ux * green * red * cleanup * Add release notes * Unique notification name * Missing awaits * Try to fix Electron app * Simplify update checking * PR feedback
actualbudget · Nov 3, 2024 · 6f07894 · 6f07894
1 parent 871de93
commit 6f07894
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 12 deletions.
diff --git a/packages/desktop-client/src/browser-preload.browser.js b/packages/desktop-client/src/browser-preload.browser.js
@@ -1,4 +1,5 @@
 import { initBackend as initSQLBackend } from 'absurd-sql/dist/indexeddb-main-thread';
+import { registerSW } from 'virtual:pwa-register';
 
 import * as Platform from 'loot-core/src/client/platform';
 
@@ -39,6 +40,19 @@ function createBackendWorker() {
 
 createBackendWorker();
 
+let isUpdateReadyForDownload = false;
+let markUpdateReadyForDownload;
+const isUpdateReadyForDownloadPromise = new Promise(resolve => {
+  markUpdateReadyForDownload = () => {
+    isUpdateReadyForDownload = true;
+    resolve(true);
+  };
+});
+const updateSW = registerSW({
+  immediate: true,
+  onNeedRefresh: markUpdateReadyForDownload,
+});
+
 global.Actual = {
   IS_DEV,
   ACTUAL_VERSION,
@@ -140,7 +154,14 @@ global.Actual = {
     window.open(url, '_blank');
   },
   onEventFromMain: () => {},
-  applyAppUpdate: () => {},
+  isUpdateReadyForDownload: () => isUpdateReadyForDownload,
+  waitForUpdateReadyForDownload: () => isUpdateReadyForDownloadPromise,
+  applyAppUpdate: async () => {
+    updateSW();
+
+    // Wait for the app to reload
+    await new Promise(() => {});
+  },
   updateAppMenu: () => {},
 
   ipcConnect: () => {},

diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -51,8 +51,20 @@ function AppInner() {
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const dispatch = useDispatch();
 
+  const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
+    if (global.Actual.isUpdateReadyForDownload()) {
+      dispatch(
+        setAppState({
+          loadingText: t('Downloading and applying update...'),
+        }),
+      );
+      await global.Actual.applyAppUpdate();
+    }
+    return cb?.();
+  };
+
   async function init() {
-    const socketName = await global.Actual.getServerSocket();
+    const socketName = await maybeUpdate(() => global.Actual.getServerSocket());
 
     dispatch(
       setAppState({
@@ -86,14 +98,16 @@ function AppInner() {
           loadingText: t('Retrieving remote files...'),
         }),
       );
-      send('get-remote-files').then(files => {
-        if (files) {
-          const remoteFile = files.find(f => f.fileId === cloudFileId);
-          if (remoteFile && remoteFile.deleted) {
-            dispatch(closeBudget());
-          }
+
+      const files = await send('get-remote-files');
+      if (files) {
+        const remoteFile = files.find(f => f.fileId === cloudFileId);
+        if (remoteFile && remoteFile.deleted) {
+          dispatch(closeBudget());
         }
-      });
+      }
+
+      await maybeUpdate();
     }
   }
 

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -100,6 +100,29 @@ export function FinancesApp() {
     }, 100);
   }, []);
 
+  useEffect(() => {
+    async function run() {
+      await global.Actual.waitForUpdateReadyForDownload();
+      dispatch(
+        addNotification({
+          type: 'message',
+          title: t('A new version of Actual is available!'),
+          message: t('Click the button below to reload and apply the update.'),
+          sticky: true,
+          id: 'update-reload-notification',
+          button: {
+            title: t('Update now'),
+            action: async () => {
+              await global.Actual.applyAppUpdate();
+            },
+          },
+        }),
+      );
+    }
+
+    run();
+  }, []);
+
   useEffect(() => {
     async function run() {
       const latestVersion = await getLatestVersion();

diff --git a/packages/desktop-client/src/index.tsx b/packages/desktop-client/src/index.tsx
@@ -58,7 +58,12 @@ function rootReducer(state, action) {
   return appReducer(state, action);
 }
 
-const store = createStore(rootReducer, undefined, applyMiddleware(thunk));
+const compose = window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] || (f => f);
+const store = createStore(
+  rootReducer,
+  undefined,
+  compose(applyMiddleware(thunk)),
+);
 const boundActions = bindActionCreators(
   actions,
   store.dispatch,

diff --git a/packages/desktop-client/vite.config.mts b/packages/desktop-client/vite.config.mts
@@ -152,7 +152,7 @@ export default defineConfig(async ({ mode }) => {
       mode === 'desktop'
         ? undefined
         : VitePWA({
-            registerType: 'autoUpdate',
+            registerType: 'prompt',
             workbox: {
               globPatterns: [
                 '**/*.{js,css,html,txt,wasm,sql,sqlite,ico,png,woff2,webmanifest}',

diff --git a/packages/desktop-electron/preload.ts b/packages/desktop-electron/preload.ts
@@ -66,6 +66,10 @@ contextBridge.exposeInMainWorld('Actual', {
     ipcRenderer.send('update-menu', budgetId);
   },
 
+  // No auto-updates in the desktop app
+  isUpdateReadyForDownload: () => false,
+  waitForUpdateReadyForDownload: () => new Promise<void>(() => {}),
+
   getServerSocket: () => {
     return null;
   },

diff --git a/packages/loot-core/src/client/actions/app.ts b/packages/loot-core/src/client/actions/app.ts
@@ -18,7 +18,7 @@ export function setAppState(state: Partial<AppState>): SetAppStateAction {
 
 export function updateApp() {
   return async (dispatch: Dispatch) => {
-    global.Actual.applyAppUpdate();
+    await global.Actual.applyAppUpdate();
     dispatch(setAppState({ updateInfo: null }));
   };
 }

diff --git a/upcoming-release-notes/3693.md b/upcoming-release-notes/3693.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [jfdoming]
+---
+
+Auto-reload on app updates if possible, and show a notification if not possible