Связь между гибридными приложениями

Webview — это компонент, который используется нативными приложениями для отображения веб-контента. Это очень полезно, поскольку дает родным приложениям возможность отображать веб-контент, не покидая страницы. Правда в том, что интеграция веб-просмотра необходима для таких приложений.

Мне нужно было использовать эту интеграцию в Trendyol Tech. Потому что Trendyol — это растущая компания электронной коммерции, которая работает на настольных и мобильных платформах. Вполне нормально, что некоторые функции должны быть на обеих платформах. В таких случаях использование гибридных приложений является обязательным, поскольку любой запрос на изменение будет влиять на обе платформы. Так что мы выбрали этот путь, так как мы готовы внести изменения на одном месте.

В такой ситуации вполне нормально, что в голову приходит вопрос, как это сделать. Давайте посмотрим, как.

У нас есть 5 шагов, чтобы выполнить задачу следующим образом

Как найти операционную систему
Создать событие и слушать в IOS
Отправка события из веб-просмотра в IOS
Создать событие и слушать в Android
Отправка события из веб-просмотра на Android

1) Поиск операционной системы

Во-первых, нам нужно выяснить, в какой среде работает наш веб-просмотр, поскольку у нас есть две разные операционные системы: IOS и Android. Итак, у нас должна быть функция, которая сообщит об этом операционной системе.

function getOperatingSystem(): string {
  const userAgent = navigator.userAgent || navigator.vendor;
  if (/windows phone/i.test(userAgent)) {
    return ‘Windows Phone’;
  }
  if (/android/i.test(userAgent)) {
    return ‘android’;
  }
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return ‘ios’;
  }
  return ‘unknown’;
}
export default getOperatingSystem;

После того, как наша функция готова, пришло время отправить событие в IOS.

2) Создайте событие и прослушайте его в IOS

Мы создадим объект WKWebview, а затем добавим наш пользовательский метод.

webView = WKWebView(frame: self.view.frame)
webView.configuration.userContentController.add(self, name: “customMethod”)

Теперь мы можем добавить прослушиватель, чтобы события, поступающие из веб-просмотра, запускали код.

public func userContentController(_ userContentController:
WKUserContentController, didReceive message: WKScriptMessage) {
    // rest of code
}

Мы можем получить сообщение с помощью message.body и запустить наш код, используя его.

Это все для IOS. Давайте продолжим с реализацией веб-просмотра.

3) Отправка события из веб-просмотра в IOS

Мы должны расширить интерфейс окна, чтобы установить свойство webkit, так как мы будем использовать его для вызова метода, который будет описан в IOS.

declare global {
  interface Window {
    webkit: any;
  }
}

Мы должны проверить, является ли операционная система IOS или нет, с помощью нашей функции, которую мы описали выше, а затем вызвать ваш собственный метод, описанный в IOS.

if (getOperatingSystem() === ‘ios’) {
  window.webkit = window.webkit || {};
  window.webkit.messageHandlers.scriptHandler.customMethod(message);
}

Итак, наш мост между IOS и веб-просмотром завершен.

4) Создайте мероприятие и прослушайте его на Android

Нам нужно создать интерфейс с пользовательским методом для веб-просмотра.

class WebAppInterface(private val mContext: Context){
    @JavascriptInterface
    fun customMethod(message: String) {
        // rest of code
    }
}

Второй шаг — включение javascript и привязка нашего интерфейса к пользовательскому имени.

val webView: WebView = findViewById(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(this), “CustomName”)

5) Отправка события из веб-просмотра на Android

Теперь мы можем вызвать наш интерфейс в веб-просмотре с сообщением, которое вы хотите отправить.

Мы завершим это после проверки того, является ли операционная система Android или нет.

if (getOperatingSystem() ===‘android’{
    CustomName.customMethod(message);
}

Итак, мы уже там? Нет. Это туда и обратно. Мы только что говорили об отправке событий из веб-просмотра в IOS/Android, а не наоборот :)

Отправка события из IOS/Android в Webview

Мы должны создать событие на стороне IOS со следующим фрагментом кода.

Мы должны использовать метод evaluateJavaScript для создания события как в IOS, так и в Android со следующими фрагментами кода.

Для IOS

func evaluateJavaScript(_ javaScriptString: String,         completionHandler: ((Any?, Error?) -> Void)? = nil)

Для Android

public void evaluateJavascript (String javaScriptString,
ValueCallback<String> resultCallback)

Мы можем добавить ниже фрагмент кода для добавления события JavaScript для обеих сред.

var customEvent = new CustomEvent(‘customEventName’);
document.dispatchEvent(customEvent);

После этого добавляется прослушиватель в веб-просмотре следующим образом.

document.addEventListener(‘customEventName’, () => {
  // rest of code
});

Ну вот и все. Мы рассмотрели обе среды с точки зрения двусторонней привязки данных.

Спасибо за прочтение.

Связь между гибридными приложениями

Похожие вопросы