chore: mobile web bridge concept (#1228)

packages/mobile/WebFrame/DeviceInterface.template.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class WebProcessDeviceInterface {
+  constructor(messageSender) {
+    this.appVersion = '1.2.3'
+    this.environment = 1
+    this.databases = []
+    this.messageSender = messageSender
+  }
+
+  setApplication() {}
+
+  sendMessage(functionName, args) {
+    return this.messageSender.sendMessage(functionName, args)
+  }
+}

packages/mobile/WebFrame/MessageSender.template.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class WebProcessMessageSender {
+  constructor() {
+    this.pendingMessages = []
+    window.addEventListener('message', this.handleMessageFromReactNative.bind(this))
+  }
+
+  handleMessageFromReactNative(event) {
+    const message = event.data
+    try {
+      const parsed = JSON.parse(message)
+      const { messageId, returnValue } = parsed
+      const pendingMessage = this.pendingMessages.find((m) => m.messageId === messageId)
+      pendingMessage.resolve(returnValue)
+      this.pendingMessages.splice(this.pendingMessages.indexOf(pendingMessage), 1)
+    } catch (error) {
+      console.log('Error parsing message from React Native', message, error)
+    }
+  }
+
+  sendMessage(functionName, args) {
+    const messageId = Math.random()
+    window.ReactNativeWebView.postMessage(JSON.stringify({ functionName: functionName, args: args, messageId }))
+    return new Promise((resolve) => {
+      this.pendingMessages.push({
+        messageId,
+        resolve,
+      })
+    })
+  }
+}