Thunkable X: полноценный обмен данными между приложением и WebViewer

В недавнем обновлении наконец-то был реализован механизм для обмена данными между App и WebViewer, что позволяет создавать гибридные приложения и реализовать при помощи Javascript и фреймворков функциональность, отсутствующую в нативной части. Для обмена данными в оффлайн необходимо создать файл html и добавить его в проект. Рассмотрим локальный обмен данными.

Для отправки данных в Web Viewer предназначен метод Post Message, а для получения данных из Web Viewer - обработчик события Receives Message.

Шаблон кода файла для обмена данными показан ниже.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
	let ThunkableWebviewerExtension = {
	  postMessage: function (message) {
		if (window.ReactNativeWebView) {
		  window.ReactNativeWebView.postMessage(message);
		} else {
		  window.parent.postMessage(message, '*');
		}
	  },
	  receiveMessage: function(fxn) {
		let callbackFunction = function(event) {
		  if (typeof fxn === 'function') {
			fxn(event.data)
		  }
		};
		document.addEventListener('message', callbackFunction, false);
		window.addEventListener('message', callbackFunction, false);
	  }
	}
	</script>
  </head>
  <body>
    <span id="messageDisplay"></span>
    <br />
    <button type="button" id="messageButton">Click to send a message to the app</button>
  </body>
  <script>
    
    document.getElementById('messageButton').onclick = function() {
      ThunkableWebviewerExtension.postMessage('Message from WebViewer');
    }

ThunkableWebviewerExtension.receiveMessage(function(message) {
      document.getElementById('messageDisplay').innerHTML = message;
    });
  </script>
</html>

Добавьте файл с приведённым кодом в приложение, после чего укажите его полное имя в свойстве URL компонента WebViewer. Для отправки сообщения из HTML используется метод postMessage, а для приёма сообщения - receiveMessage.

Каждый раз добавлять файл в приложение неудобно, по причине чего на этапе отладки практичнене обновлять и загружать html-файл с web-сервера или генерировать содержимое html динамически.