frontend/app: Reconnect remote access when app is resumed. fix #113

Tinkerforge · Oct 17, 2024 · 4a22999 · 4a22999
1 parent bfedae9
commit 4a22999
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/frontend/index.html b/frontend/index.html
@@ -17,6 +17,9 @@
 					reg.update();
 				})
 			}
+			function median_app_resumed() {
+				window.dispatchEvent(new Event("appResumed"));
+			}
 		</script>
 	</head>
 	<body>

diff --git a/frontend/src/components/Frame.tsx b/frontend/src/components/Frame.tsx
@@ -6,6 +6,7 @@ import { Row, Spinner } from 'react-bootstrap';
 import { connected, connected_to, secret } from './charger_list';
 import { setAppNavigation } from './Navbar';
 import { enableLogging } from '../utils';
+import Median from "median-js-bridge";
 
 export const chargerID = signal(0);
 export const chargerPort = signal(0);
@@ -15,20 +16,48 @@ export class Frame extends Component {
     worker: Worker;
     show_spinner = signal(true);
     id: string;
+    abort: AbortController;
     constructor() {
         super();
 
+        this.abort = new AbortController();
+
         document.title = connected_to.value;
 
         this.id = crypto.randomUUID();
-        this.worker = new Worker();
         navigator.serviceWorker.addEventListener("message", (e: MessageEvent) => {
             const msg = e.data as Message;
             if (msg.receiver_id === this.id) {
                 this.worker.postMessage(msg);
             }
         });
 
+        this.startWorker();
+
+        // used by the app to detect a resumed app
+        window.addEventListener("appResumed", () => {
+            this.worker.terminate();
+            this.startWorker();
+            this.show_spinner.value = true;
+        }, {signal: this.abort.signal});
+
+        // this is used by the app to close the remote connection via the native app menu.
+        (window as any).close = () => {
+            connected.value = false;
+            connected_to.value = "";
+            setAppNavigation();
+        }
+
+        // this is used by the app to change location via the native app menu.
+        (window as any).switchTo = (hash: string) => {
+            const frame = document.getElementById("interface") as HTMLIFrameElement;
+            const frame_window = frame.contentWindow;
+            frame_window.location.hash = hash;
+        }
+    }
+
+    startWorker() {
+        this.worker = new Worker();
         const message_event = (e: MessageEvent) => {
             if (typeof e.data === "string") {
                 switch (e.data) {
@@ -136,6 +165,7 @@ export class Frame extends Component {
     componentWillUnmount() {
         this.worker.postMessage("close");
         document.title = "Remote Access";
+        this.abort.abort();
     }
 
     render() {