Fix HMR on android

Author: haslinghuis

ANDROID.md

@@ -212,6 +212,16 @@ This will:
 3. Compile Android APK
 4. Install and launch on connected device/emulator
 
+Note: Dev mode does not rebuild the `dist/` folder. Tauri will load from `devUrl` during `tauri android dev` and falls back to `dist/` only if the dev server is unreachable. If you need a fresh fallback, build the web assets first:
+```bash
+yarn build
+yarn tauri:dev:android
+```
+Alternatively, use the convenience script to build dist then run dev:
+```bash
+yarn tauri:dev:android:with-dist
+```
+
 #### Live Reload Setup
 To enable hot module replacement on the emulator:
 

package.json

@@ -32,14 +32,21 @@
     "android:emu:start:host": "run-script-os",
     "android:emu:start:host:win32": "start \"\" \"%ANDROID_HOME%\\emulator\\emulator.exe\" -avd Medium_Phone_API_35 -gpu host -no-snapshot-load",
     "android:emu:start:host:default": "QT_QPA_PLATFORM=xcb $ANDROID_HOME/emulator/emulator -avd ${AVD:-Medium_Phone_API_35} -gpu host -no-snapshot-load &",
+    "android:adb:wait": "run-script-os",
+    "android:adb:wait:win32": "%ANDROID_HOME%\\platform-tools\\adb.exe wait-for-device",
+    "android:adb:wait:default": "$ANDROID_HOME/platform-tools/adb wait-for-device && until $ANDROID_HOME/platform-tools/adb shell getprop sys.boot_completed 2>/dev/null | grep -q 1; do sleep 1; done",
+    "android:adb:reverse": "run-script-os",
+    "android:adb:reverse:win32": "%ANDROID_HOME%\\platform-tools\\adb.exe reverse tcp:8000 tcp:8000",
+    "android:adb:reverse:default": "$ANDROID_HOME/platform-tools/adb reverse tcp:8000 tcp:8000",
     "format": "prettier --write {src,test}/**/*.{js,vue,css,less}",
     "storybook": "start-storybook -p 6006",
     "prepare": "husky install",
     "tauri:dev": "tauri dev",
     "tauri:build": "tauri build",
     "tauri:dev:android": "run-script-os",
-    "tauri:dev:android:win32": "start \"\" \"%ANDROID_HOME%\\emulator\\emulator.exe\" -avd Medium_Phone_API_35 -gpu swiftshader_indirect -no-snapshot-load && tauri android dev",
-    "tauri:dev:android:default": "yarn android:emu:start && tauri android dev",
+    "tauri:dev:android:win32": "start \"\" \"%ANDROID_HOME%\\emulator\\emulator.exe\" -avd Medium_Phone_API_35 -gpu swiftshader_indirect -no-snapshot-load && %ANDROID_HOME%\\platform-tools\\adb.exe wait-for-device && %ANDROID_HOME%\\platform-tools\\adb.exe reverse tcp:8000 tcp:8000 && tauri android dev",
+    "tauri:dev:android:default": "yarn android:emu:start && yarn android:adb:wait && yarn android:adb:reverse && tauri android dev",
+    "tauri:dev:android:with-dist": "yarn build && yarn tauri:dev:android",
     "tauri:build:android": "tauri android build"
   },
   "window": {

src/js/utils/checkBrowserCompatibility.js

@@ -1,6 +1,51 @@
 import { Capacitor } from "@capacitor/core";
 import { isTauri } from "@tauri-apps/api/core";
 
+// In dev on Android/WebView, a previously installed service worker can cache assets
+// and prevent hot updates from Vite. Proactively unregister all SW and clear caches
+// when running in dev or in a native (Capacitor/Tauri) context.
+async function disableServiceWorkersForDev() {
+    try {
+        const isDev = (() => {
+            try {
+                return !!(import.meta && import.meta.env && import.meta.env.DEV);
+            } catch (_) {
+                return false;
+            }
+        })();
+        const isNative = Capacitor?.isNativePlatform?.() === true;
+        if ((isDev || isNative) && typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+            const regs = await navigator.serviceWorker.getRegistrations();
+            for (const r of regs) {
+                try {
+                    await r.unregister();
+                } catch (_) {}
+            }
+            if (typeof caches !== "undefined" && caches?.keys) {
+                const keys = await caches.keys();
+                for (const k of keys) {
+                    try {
+                        await caches.delete(k);
+                    } catch (_) {}
+                }
+            }
+            // Also attempt to stop active controller
+            if (navigator.serviceWorker.controller) {
+                try {
+                    navigator.serviceWorker.controller.postMessage({ type: "SKIP_WAITING" });
+                } catch (_) {}
+            }
+            // Small delay to ensure SW is cleared before app logic proceeds
+            await new Promise((res) => setTimeout(res, 50));
+        }
+    } catch (_) {
+        // best-effort; ignore
+    }
+}
+
+// Fire and forget; we don't block app init
+// disableServiceWorkersForDev();
+
 // Detects OS using modern userAgentData API with fallback to legacy platform
 // Returns standardized OS name string or "unknown"
 export function getOS() {

vite.config.js

@@ -86,6 +86,9 @@ export default defineConfig({
         }),
         VitePWA({
             registerType: "prompt",
+            devOptions: {
+                enabled: false,
+            },
             workbox: {
                 globPatterns: ["**/*.{js,css,html,ico,png,svg,json,mcm}"],
                 // 5MB
@@ -123,6 +126,12 @@ export default defineConfig({
     server: {
         port: 8000,
         strictPort: true,
+        host: true,
+        hmr: {
+            protocol: "ws",
+            host: "localhost",
+            clientPort: 8000,
+        },
     },
     preview: {
         port: 8080,