Xây dựng cầu nối cross-platform an toàn: Messaging iOS ↔ Android đơn giản

Tôi làm việc trên dự án cần kết nối nhiều component khác nhau qua message. Mỗi component có logic và ngôn ngữ code riêng. Điều này khiến tôi muốn hiểu tất cả cách các platform cho phép giao tiếp.

Mục tiêu bài viết: giải thích cross-origin communication bridges và trình bày ví dụ đơn giản, hữu ích để thực hiện chúng.

Cũng sẽ có nhiều games từ "bridge" (cầu) 😄

BẠN ĐÃ ĐƯỢC CẢNH BÁO.

Nếu chỉ muốn code ngay, link GitHub repository ở cuối bài.

Thông thường, JavaScript chạy trong browser. Trên iOS, là UIWebView hoặc WKWebView. Trên Android, là WebView.

Vì iOS phiền toái hơn, tôi mô tả communication bridge đó trước.

London Bridge is Falling Down (iOS)

Từ iOS 8, Apple khuyến nghị dùng WKWebView thay UIWebView, nên dưới đây chỉ nói bridge trên WKWebView.

Tham khảo UIWebView tại đây.

Để gửi message từ WKWebView đến JavaScript, dùng method:

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

Để nhận message từ JavaScript trong WKWebView, làm theo các bước:

1. Tạo instance WKWebViewConfiguration
2. Tạo instance WKUserContentController
3. Thêm script message handler vào configuration (phần này nối cầu). Action này cũng register message handler trên window object tại path: window.webkit.messageHandlers.MSG_HANDLER_NAME
4. Cho class implement message handler protocol bằng cách thêm <WKScriptMessageHandler> đầu file
5. Implement userContentController:didReceiveScriptMessage (method handle nhận message từ JavaScript)

Xây dựng cầu nối

Giả sử có HTML page sau:

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

Trong native code implement các bước trên:

#import <UIKit/UIKit.h> #import <WebKit/WebKit.h> // 4 @interface ViewController : UIViewController <WKScriptMessageHandler> @property(nonatomic, strong) WKWebView *webview; 

Và violà! Bây giờ bạn có full JavaScript - iOS Communication!

Photo by Todd Diemer on Unsplash

Crossing The Bridge (Android)

Ở Android đơn giản và thân thiện hơn. Chỉ vài bước setup communication bridge:

1. Tạo instance WebView object
2. Bật JavaScript trong WebView (setJavaScriptEnabled)
3. Set JavaScript Interface riêng (chứa method visible cho JavaScript)
4. Method muốn expose cho JavaScript phải có annotation @JavascriptInterface trước khai báo

Giống như trước, giả sử đã tạo HTML file:

Và tạo Android Application đơn giản:

Và xong!

Bây giờ bạn có thể coi mình là Native Communication Ninja!

Link repository:

⚠️ Lưu ý quan trọng về iOS ⚠️

Khi đến lúc destroy WKWebView, bắt buộc phải remove script message handler. Nếu không, handler vẫn hold reference đến WKWebView và memory leak sẽ xảy ra khi tạo WKWebView mới.