आईओएस और एंड्रॉइड में क्रॉस-ओरिजिनल कम्युनिकेशन ब्रिज कैसे बनाएं

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

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

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

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

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

आमतौर पर, आपके द्वारा लिखा गया जावास्क्रिप्ट एक ब्राउज़र के अंदर चलेगा। आईओएस . पर , यह या तो UIWebView या WKWebView हो सकता है। एंड्रॉइड . पर , एक वेबव्यू।

चूंकि आईओएस प्लेटफॉर्म के लिए अधिक परेशान करने वाला हो सकता है, इसलिए मैं पहले वहां संचार पुल का वर्णन करूंगा।

लंदन ब्रिज नीचे गिर रहा है (iOS)

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

UIWebView संदर्भ के लिए, कृपया यहां जाएं।

WKWebView से JavaScript पर संदेश भेजने के लिए, आप नीचे दी गई विधि का उपयोग करें:


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

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

WKWebViewConfiguration का एक उदाहरण बनाएं
WKUserContentController का एक उदाहरण बनाएं
अपने कॉन्फ़िगरेशन में एक स्क्रिप्ट संदेश हैंडलर जोड़ें (यह हिस्सा अंतर को पाटता है)। यह क्रिया आपके संदेश हैंडलर को निम्न पथ के अंतर्गत विंडो ऑब्जेक्ट पर भी पंजीकृत करती है:window.webkit.messageHandlers.MSG_HANDLER_NAME
फ़ाइल के शीर्ष पर जोड़कर कक्षा को संदेश हैंडलर प्रोटोकॉल लागू करें
उपयोगकर्ता सामग्री नियंत्रक को लागू करें:didReceiveScriptMessage (यह विधि जावास्क्रिप्ट से संदेशों को प्राप्त करती है)

बिल्डिंग ब्रिज

मान लें कि हमारे पास निम्न 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)

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

वेबव्यू ऑब्जेक्ट का इंस्टेंस बनाएं
इस वेबव्यू के अंदर JavaScript सक्षम करें (setJavaScriptEnabled )
अपना स्वयं का JavaScript इंटरफ़ेस सेट करें (जिसमें वे विधियां होंगी जो आपके JavaScript को दिखाई देंगी)
कोई भी तरीका जिसे आप अपने जावास्क्रिप्ट के सामने रखना चाहते हैं, उसके पास @JavascriptInterface होना चाहिए एनोटेशन इसकी घोषणा से पहले

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

और हमने निम्नलिखित सरल Android एप्लिकेशन बनाया है:

और वहाँ तुम जाओ!

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

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

AndroidtoJS रिपॉजिटरीiOStoJS रिपोजिटरी

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

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