วิธีสร้างสะพานการสื่อสารข้ามแหล่งกำเนิดใน iOS และ Android

ฉันกำลังทำงานในโครงการบางอย่างซึ่งฉันต้องเชื่อมต่อส่วนประกอบต่างๆ ผ่านข้อความ แต่ละคนมีตรรกะและภาษารหัสของตัวเอง สิ่งนี้ทำให้ฉันต้องการเข้าใจทุกวิถีทางที่แพลตฟอร์มต่างๆ เปิดใช้งานการสื่อสาร

บทความนี้มีจุดมุ่งหมายเพื่ออธิบายสะพานสื่อสารข้ามต้นทางและนำเสนอตัวอย่างที่เรียบง่ายแต่ให้ข้อมูลเพื่อให้บรรลุเป้าหมาย

ยังจะมีการเล่นสำนวนสะพานมากมาย ?

คุณได้รับคำเตือน

หากคุณต้องการแค่ใช้โค้ดสกปรก มีลิงก์ไปยังที่เก็บ GitHub ที่ด้านล่างของบทความนี้

โดยปกติ JavaScript ที่คุณเขียนจะทำงานภายในเบราว์เซอร์ บน iOS , อาจเป็น UIWebView หรือ WKWebView บน Android , WebView

เนื่องจาก iOS อาจทำให้แพลตฟอร์มน่ารำคาญมากขึ้น ฉันจะอธิบายสะพานการสื่อสารที่นั่นก่อน

ลอนดอนบริดจ์กำลังพังทลาย (iOS)

ตั้งแต่ iOS 8 เป็นต้นไป Apple แนะนำให้ใช้ WKWebView แทน UIWebView ดังนั้นสิ่งต่อไปนี้จะกล่าวถึงเฉพาะบริดจ์บน WKWebView .

สำหรับข้อมูลอ้างอิง UIWebView โปรดไปที่นี่

ในการส่งข้อความจาก WKWebView ไปยัง JavaScript คุณใช้วิธีการด้านล่าง:


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

ในการรับข้อความจาก JavaScript ภายใน WKWebView ของคุณ คุณต้องดำเนินการดังต่อไปนี้:

สร้างอินสแตนซ์ของ WKWebViewConfiguration
สร้างอินสแตนซ์ของ WKUserContentController
เพิ่มตัวจัดการข้อความสคริปต์ในการกำหนดค่าของคุณ (ส่วนนี้จะเชื่อมช่องว่าง) การดำเนินการนี้ยังลงทะเบียนตัวจัดการข้อความของคุณบนวัตถุหน้าต่างภายใต้เส้นทางต่อไปนี้:window.webkit.messageHandlers.MSG_HANDLER_NAME
ทำให้คลาสใช้โปรโตคอลตัวจัดการข้อความโดยเพิ่ม ที่ด้านบนของไฟล์
ใช้ 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!

วิธีสร้างสะพานการสื่อสารข้ามแหล่งกำเนิดใน iOS และ Android

รูปภาพโดย Todd Diemer บน Unsplash

ข้ามสะพาน (Android)

สิ่งต่าง ๆ ง่ายกว่าและเป็นมิตรกว่ามากที่นี่ ในการตั้งค่าบริดจ์การสื่อสารของเรา มีเพียงไม่กี่ขั้นตอน:

สร้างอินสแตนซ์ของวัตถุ WebView
เปิดใช้งาน JavaScript ภายใน WebView นี้ (setJavaScriptEnabled )
ตั้งค่าอินเทอร์เฟซ JavaScript ของคุณเอง (ซึ่งจะเก็บเมธอดที่ JavaScript ของคุณมองเห็น)
วิธีการใดๆ ที่คุณต้องการเปิดเผยต่อ JavaScript ของคุณต้องมี @JavascriptInterface หมายเหตุ ก่อนการประกาศ

เหมือนเมื่อก่อน สมมติว่าเราได้สร้างไฟล์ HTML นี้:

และเราได้สร้างแอปพลิเคชัน Android อย่างง่ายดังต่อไปนี้:

แล้วก็ไป!

ตอนนี้คุณสามารถถือว่าตัวเองเป็นนินจาสื่อสารพื้นเมือง!

นี่คือลิงค์ไปยังที่เก็บ:

AndroidtoJS RepositoryiOStoJS Repository

⚠️ หมายเหตุสำคัญเกี่ยวกับ iOS ⚠️

เมื่อคุณไปถึงจุดที่คุณต้องการทำลาย WKWebView ของคุณ มันคือ จำเป็น ที่คุณลบตัวจัดการข้อความสคริปต์ของคุณ ถ้าคุณไม่ทำเช่นนั้น ตัวจัดการข้อความสคริปต์จะยังคงมีการอ้างอิงถึง WKWebView ของคุณและหน่วยความจำรั่วจะเกิดขึ้นเมื่อสร้าง WKWebView ใหม่