[fix] Electron Demo Multiple Tabs (#279)

Author: stevensJourney

demos/example-electron/CHANGELOG.md

@@ -1,5 +1,9 @@
 # example-electron
 
+## 1.1.0
+
+- Added HTTP server to serve app assets in production builds. This fixes multiple tab use cases.
+
 ## 1.0.16
 
 ### Patch Changes

demos/example-electron/package.json

@@ -25,6 +25,7 @@
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
     "@mui/x-data-grid": "^6.19.11",
+    "express": "^4.19.2",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
     "electron-squirrel-startup": "^1.0.0",
@@ -44,6 +45,7 @@
     "@electron-forge/plugin-vite": "^7.4.0",
     "@electron/fuses": "^1.8.0",
     "@swc/core": "~1.6.0",
+    "@types/express": "^4.17.21",
     "@types/node": "^20.12.8",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",

demos/example-electron/src/main.ts

@@ -1,6 +1,7 @@
 import { app, BrowserWindow } from 'electron';
-import path from 'path';
+import express from 'express';
 import * as url from 'node:url';
+import path from 'path';
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
@@ -22,7 +23,68 @@ const createWindow = () => {
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {
-    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    /**
+     * The PowerSync web SDK relies on SharedWorkers for multiple tab support.
+     * Multiple tab support in Electron is required if multiple `BrowserWindow`s
+     * require the PowerSync client simultaneously.
+     *
+     * The default solution of serving HTML assets from a file is sufficient if multiple
+     * tab support is not required.
+     *
+     * ```js
+     *  mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+     * ```
+     *
+     * Extra steps are required if multiple tab support is required.
+     *
+     * Serving from a file results in `window.origin` being set as `file://`.
+     *
+     * Usually creating multiple `SharedWorker` instances from the same JS context should
+     * link to the same instance of the shared worker. However, multiple worker instances
+     * will be created if the origin is not the same. Apparently `file://` origins cause
+     * the latter.
+     *
+     * For example:
+     * ```js
+     *  const worker1 = new SharedWorker('url');
+     *  const worker2 = new SharedWorker('url');
+     *```
+     *
+     * Should only create 1 instance of a SharedWorker with `worker1` and `worker2`
+     * pointing to the same instance.
+     *
+     * When the content is served from a file `worker1` and `worker2` point to different
+     * (unique) instances of the shared worker code.
+     *
+     * The PowerSync SDK relies on a single shared worker instance being present.
+     *
+     * See: https://github.com/electron/electron/issues/13952
+     *
+     * This serves the production HTML assets via a HTTP server. This sets the Window
+     * origin to a the server address. This results in expected SharedWorker
+     * functionality.
+     */
+    const expressApp = express();
+
+    // The Vite production output should all be here.
+    const bundleDir = path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}`);
+
+    // Serve the assets production assets
+    expressApp.use(express.static(bundleDir));
+
+    /**
+     * If the port used here is dynamic e.g. `0` then the session would be cleared
+     * if the port changes. A fixed port should be used in production.
+     * Care should be taken when selecting this port to avoid conflicts.
+     * This demo uses a random fixed port for demonstration purposes. More advanced
+     * port management should be implemented if using this in production.
+     */
+    const port = process.env.PORT || 40031;
+    const server = expressApp.listen(port, () => {
+      mainWindow.loadURL(`http://127.0.0.1:${port}`);
+    });
+
+    app.on('quit', () => server.close());
   }
 
   // Open the DevTools.