सुरक्षित क्रॉस-प्लेटफॉर्म ब्रिज बनाएं: iOS ↔ Android मैसेजिंग सरल बनाया गया

मैं काम पर एक निश्चित प्रोजेक्ट पर काम कर रहा था, जिसमें मुझे मैसेजेज के माध्यम से कई अलग-अलग कंपोनेंट्स को कनेक्ट करने की आवश्यकता थी। प्रत्येक का अपना लॉजिक और कोड लैंग्वेज था। इसने मुझे उन सभी तरीकों को समझने की इच्छा जताई जिनसे विभिन्न प्लेटफॉर्म कम्युनिकेशन सक्षम करते हैं।

इस लेख का उद्देश्य इन क्रॉस-ओरिजिन कम्युनिकेशन ब्रिजेस को समझाना और उन्हें प्राप्त करने के लिए सरल, फिर भी जानकारीपूर्ण उदाहरण प्रस्तुत करना है।

यहां ब्रिज के बहुत सारे पन भी होंगे।

आपको चेतावनी दी गई थी।

यदि आप केवल कोड के साथ हाथ गंदे करना चाहते हैं, तो इस लेख के नीचे GitHub रिपॉजिटरीज़ के लिंक हैं।

आमतौर पर, आपके द्वारा लिखा गया JavaScript ब्राउज़र के अंदर चलेगा। iOS पर, यह या तो UIWebView या WKWebView हो सकता है। Android पर, एक WebView।

चूंकि iOS प्लेटफॉर्म्स में अधिक निराश करने वाला हो सकता है, मैं पहले वहां कम्युनिकेशन ब्रिज का वर्णन करूंगा।

लंदन ब्रिज इज़ फॉलिंग डाउन (iOS)

iOS 8 से आगे, Apple UIWebView के बजाय WKWebView का उपयोग करने की सिफारिश करता है, इसलिए निम्नलिखित केवल WKWebView पर ब्रिज को संबोधित करेगा।

UIWebView रेफरेंस के लिए, कृपया यहाँ जाएं।

WKWebView से JavaScript में मैसेज भेजने के लिए, आप नीचे दी गई मेथड का उपयोग करते हैं:

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

अपने WKWebView के अंदर JavaScript से मैसेज प्राप्त करने के लिए, आपको निम्न कार्य करने होंगे:

1. WKWebViewConfiguration का एक इंस्टेंस बनाएं
2. WKUserContentController का एक इंस्टेंस बनाएं
3. अपने कॉन्फ़िगरेशन में एक स्क्रिप्ट मैसेज हैंडलर जोड़ें (यह भाग अंतर को पाटता है)। यह एक्शन आपके मैसेज हैंडलर को निम्न पथ के तहत विंडो ऑब्जेक्ट पर रजिस्टर भी करता है: window.webkit.messageHandlers.MSG_HANDLER_NAME
4. <WKScriptMessageHandler> को फ़ाइल के शीर्ष पर जोड़कर क्लास को मैसेज हैंडलर प्रोटोकॉल इम्प्लीमेंट कराएं
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 कम्युनिकेशन है!

ब्रिज पार करना (Android)

यहां चीजें बहुत सरल और अधिक फ्रेंडली हैं। हमारे कम्युनिकेशन ब्रिज को सेटअप करने के लिए, केवल कुछ चरण हैं:

1. WebView ऑब्जेक्ट का एक इंस्टेंस बनाएं
2. इस WebView के अंदर JavaScript इनेबल करें (setJavaScriptEnabled)
3. अपना खुद का JavaScript Interface सेट करें (जिसमें वे मेथड्स होंगे जो आपके JavaScript को विजिबल होंगे)
4. कोई भी मेथड जिसे आप अपने JavaScript के सामने एक्सपोज़ करना चाहते हैं, उसकी घोषणा से पहले @JavascriptInterface एनोटेशन होना चाहिए

पहले की तरह, मान लीजिए हमने यह HTML फ़ाइल बनाई है:

और हमने निम्न सिंपल Android ऐप्लिकेशन बनाया है:

और वहां आप जाएं!

अब आप खुद को एक नेटिव कम्युनिकेशन निंजा मान सकते हैं!

यहां रिपॉजिटरीज़ के लिंक हैं:

⚠️ iOS के संबंध में महत्वपूर्ण नोट ⚠️

जब आप उस बिंदु पर पहुंच जाते हैं जहां आप अपना WKWebView नष्ट करना चाहते हैं, तो यह अनिवार्य है कि आप अपने स्क्रिप्ट मैसेज हैंडलर को हटा दें। यदि आप ऐसा नहीं करते हैं, तो स्क्रिप्ट मैसेज हैंडलर अभी भी आपके WKWebView का रेफरेंस रखेगा और नए WKWebViews बनने पर मेमोरी लीक होगी।