Комуникация между хибридни приложения

Webview е компонент, който се използва от родните приложения за показване на уеб съдържание. Това е много полезно, тъй като дава възможност на собствените приложения да показват уеб съдържание, без да напускат страницата. Истината е, че интеграциите на webview са от съществено значение за такива приложения.

Трябваше да използвам тези интеграции в Trendyol Tech. Тъй като Trendyol е разрастваща се фирма за електронна търговия, която работи на настолни и мобилни платформи. Съвсем нормално е някои функции да присъстват и в двете платформи. В такива случаи използването на хибридни приложения е задължително, тъй като всяка заявка за промяна ще засегне и двете платформи. Така че избрахме този начин, тъй като сме готови да направим промени на едно място.

В такава ситуация е съвсем нормално да ви хрумне въпросът как да го направите. Нека да видим как.

Имаме 5 стъпки за изпълнение на задачата, както следва

Намиране на операционната система
Създайте събитие и слушайте в IOS
Изпращане на събитие от webview към IOS
Създайте събитие и слушайте в Android
Изпращане на събитие от webview към 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”)

Сега можем да добавим слушател, така че събитията, идващи от webview, да задействат кода.

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

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

Това е всичко за IOS. Нека продължим с внедряването на webview.

3) Изпращане на събитие от webview към 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 и webview е завършен.

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) Изпращане на събитие от webview към Android

Вече можем да извикаме нашия интерфейс в webview със съобщението, което искате да изпратите.

Ще го завършим, след като проверим дали операционната система е Android или не.

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

И така, стигнахме ли вече? Не. Това е двупосочно пътуване. Току-що говорихме за изпращане на събития от webview към 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);

След това идва добавянето на слушател в webview, както следва

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

И така, това е всичко. Разгледахме и двете среди от гледна точка на двупосочно обвързване на данни.

Благодаря за четенето.

Комуникация между хибридни приложения

Подобни въпроси