Как построить межпоходные коммуникационные мосты в iOS и Android

1656568928 kak postroit mezhpohodnye kommunikaczionnye mosty v ios i android

На работе я работал над проектом, к которому мне нужно было подключить несколько различных компонентов через сообщения. Каждый имел свою логику и язык кода. Это заставило меня понять, как разные платформы позволяют общаться.

Цель этой статьи – объяснить эти межпоходные коммуникационные мосты и предоставить простые, но информативные примеры их достижения.

Также будет много каламбуров бриджа?

ВАС ПРЕДУПРЕЖДЕНО.

Если вы просто хотите запачкать свои руки кодом, внизу этой статьи есть ссылки на репозитории GitHub.

Как правило, JavaScript, который вы пишете, запускается в обозревателе. Включено iOS, это может быть UIWebView или WKWebView. Включено AndroidWebView.

Поскольку iOS может быть неприятнее среди платформ, я сначала опишу там коммуникационный мост.

Лондонский мост падает (iOS)

Начиная с iOS 8 и далее, Apple рекомендует использовать WKWebView вместо UIWebView, поэтому следующее касается моста только на WKWebView.

Для получения справки об UIWebView перейдите сюда.

Чтобы отправить сообщение с WKWebView на JavaScript, вы используете метод ниже:


- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^)(id, NSError *error))completionHandler;

Чтобы получать сообщения от JavaScript в вашем WKWebView, вы должны сделать следующее:

  1. Создайте экземпляр WKWebViewConfiguration
  2. Создайте экземпляр WKUserContentController
  3. Добавьте обработчик сообщений сценария к конфигурации (эта часть заполняет пробелы). Это действие также регистрирует ваш обработчик сообщений на объекте window по следующему пути: window.webkit.messageHandlers.MSG_HANDLER_NAME
  4. Сделайте класс реализовывать протокол обработчика сообщений, добавив в верхней части файла
  5. Реализуй userContentController:didReceiveScriptMessage (этот метод обрабатывает получение сообщений от JavaScript)

Строительство мостов

Скажем, мы настроили следующую страницу HTML:

<html>
  
  <head>
    <title>Javascript-iOS Communication</title>
  </head>
  
  <body>
    
    <script>
      window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");
    </script>
  </body>
  
  
</html>

И в нашем родном коде мы реализуем шаги, описанные выше:

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

И виола! Теперь у вас есть полная связь JavaScript – iOS!

1*EosjstTDed_5cYeD7Fa-mQ
Фото Тодда Димера на Unsplash

Crossing The Bridge (Android)

Здесь все гораздо проще и дружнее. Для того чтобы настроить наш коммуникационный мост, нужно выполнить всего несколько шагов:

  1. Создайте экземпляр объекта WebView
  2. Включить JavaScript внутри этого WebView (setJavaScriptEnabled)
  3. Установите собственный интерфейс JavaScript (который будет содержать методы, видимые для вашего JavaScript)
  4. Любой метод, который вы хотите открыть для JavaScript, должен иметь @JavascriptInterface аннотация к его декларированию

По-прежнему предположим, что мы создали этот файл HTML:

И мы создали такое простое приложение для Android:

И вот!

Теперь вы можете считать себя ниндзя родного общения!

Вот ссылки на хранилища:

Репозиторий AndroidtoJS Репозиторий iOStoJS

⚠️ Важное примечание к iOS ⚠️

Когда вы приходите к тому, что хотите уничтожить свой WKWebView, это так императивный что вы удаляете обработчик сообщений сценария. Если вы этого не сделаете, обработчик сообщений сценария все равно будет содержать ссылку на ваш WKWebView, и после создания новых WKWebView возникнут утечки памяти.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *