TWA के लिए PostMessage

Sayed El-Abady

Chrome 115 से भरोसेमंद वेब गतिविधियां (TWA), postMessage का इस्तेमाल करके मैसेज भेज सकती हैं. यह दस्तावेज़ आपके ऐप्लिकेशन और वेब के बीच संपर्क करने के लिए ज़रूरी सेटअप के बारे में बताता है.

इस गाइड के खत्म होने पर, आपको ये काम करने होंगे:

• जानें कि क्लाइंट और वेब कॉन्टेंट की पुष्टि करने की प्रक्रिया कैसे काम करती है.
• क्लाइंट और वेबकॉन्टेंट के बीच कम्यूनिकेशन चैनल शुरू करने का तरीका जानें.
• वेबकॉन्टेंट पर मैसेज भेजने और उससे मैसेज पाने का तरीका जानें.

इस गाइड का पालन करने के लिए, आपको इनकी ज़रूरत होगी:

• अपनी बिल्ड.gradle फ़ाइल में, सबसे नई androidx.browser (कम से कम v1.6.0-alpha02) लाइब्रेरी जोड़ने के लिए.
• TWA के लिए, Chrome का 115.0.5790.13 या उसके बाद का वर्शन.

window.postMessage() वाला तरीका, Window ऑब्जेक्ट के बीच क्रॉस-ऑरिजिन कम्यूनिकेशन को सुरक्षित रूप से चालू करता है. उदाहरण के लिए, किसी पेज और उससे बने पॉप-अप के बीच या फिर उसमें एम्बेड किए गए पेज और iframe के बीच.

आम तौर पर, अलग-अलग पेजों पर मौजूद स्क्रिप्ट को एक-दूसरे को सिर्फ़ तब ऐक्सेस करने की अनुमति होती है, जब वे पेज एक ही ऑरिजिन से शुरू होते हों और वे एक ही प्रोटोकॉल, पोर्ट नंबर, और होस्ट को शेयर करते हों. इसे एक ही ऑरिजिन से जुड़ी नीति भी कहा जाता है. window.postMessage() तरीके से, अलग-अलग ऑरिजिन के बीच सुरक्षित तरीके से बातचीत करने का एक कंट्रोल सिस्टम मिलता है. यह चैट ऐप्लिकेशन, सहयोगी टूल वगैरह लागू करने के लिए उपयोगी हो सकता है. उदाहरण के लिए, किसी चैट ऐप्लिकेशन में, अलग-अलग वेबसाइटों पर मौजूद उपयोगकर्ताओं को मैसेज भेजने के लिए, postMessage का इस्तेमाल किया जा सकता है. भरोसेमंद वेब गतिविधियों (टीडब्ल्यूए) में postMessage का इस्तेमाल करना थोड़ा मुश्किल हो सकता है. इस गाइड में बताया गया है कि वेब पेज से मैसेज भेजने और पाने के लिए, TWA क्लाइंट में postMessage का इस्तेमाल कैसे करें.

वेब पुष्टि में ऐप्लिकेशन जोड़ें

PostMessage API, दो मान्य ऑरिजिन को एक-दूसरे से कम्यूनिकेट करने की अनुमति देता है. पहला सोर्स और टारगेट ऑरिजिन. Android ऐप्लिकेशन को टारगेट ऑरिजिन पर मैसेज भेजने की अनुमति देने के लिए, Android ऐप्लिकेशन को यह बताना होगा कि वह किस सोर्स ऑरिजिन के बराबर है. ऐसा करने के लिए, अपनी assetlinks.json फ़ाइल में ऐप्लिकेशन के पैकेज का नाम को use_as_origin से जोड़कर, डिजिटल ऐसेट लिंक (डीएएल) का इस्तेमाल किया जा सकता है. ऐसा करने पर, यह कुछ ऐसा दिखेगा:

[{
  "relation": ["delegate_permission/common.use_as_origin"],
  "target" : { "namespace": "android_app", "package_name": "com.example.app", "sha256_cert_fingerprints": [""] }
}]

ध्यान दें कि टीडब्ल्यूए से जुड़े ऑरिजिन पर सेट अप करते समय, MessageEvent.origin फ़ील्ड के लिए ऑरिजिन की जानकारी देना ज़रूरी होता है. हालांकि, postMessage का इस्तेमाल ऐसी दूसरी साइटों से संपर्क करने के लिए किया जा सकता है जिनमें डिजिटल ऐसेट लिंक शामिल नहीं हैं. उदाहरण के लिए, अगर आप www.example.com के मालिक हैं, तो आपको DAL के ज़रिए इस बात की पुष्टि करनी होगी. हालांकि, आप दूसरी वेबसाइटों से बातचीत कर सकते हैं, उदाहरण के लिए www.wikipedia.org.

अपने मेनिफ़ेस्ट में PostMessageService जोड़ें

postMessage कम्यूनिकेशन पाने के लिए, आपको सेवा सेट अप करनी होगी. इसके लिए, अपने Android मेनिफ़ेस्ट में PostMessageService को जोड़ें:

<service android:name="androidx.browser.customtabs.PostMessageService"
android:exported="true"/>

CustomTabsSession इंस्टेंस पाएं

मेनिफ़ेस्ट में सेवा जोड़ने के बाद, सेवा को बाइंड करने के लिए, CustomTabsClient क्लास का इस्तेमाल करें. कनेक्ट होने के बाद, नया सेशन बनाने के लिए, उपलब्ध क्लाइंट का इस्तेमाल इस तरह किया जा सकता है. CustomTabsSession, postMessage API को मैनेज करने वाला मुख्य क्लास है. इस कोड से पता चलता है कि सेवा कनेक्ट होने के बाद, क्लाइंट का इस्तेमाल करके नया सेशन कैसे बनाया जाता है और इस सेशन का इस्तेमाल postMessage के लिए कैसे किया जाता है:

private CustomTabsClient mClient;
private CustomTabsSession mSession;

// We use this helper method to return the preferred package to use for
// Custom Tabs.
String packageName = CustomTabsClient.getPackageName(this, null);

// Binding the service to (packageName).
CustomTabsClient.bindCustomTabsService(this, packageName, new CustomTabsServiceConnection() {
 @Override
 public void onCustomTabsServiceConnected(@NonNull ComponentName name,
     @NonNull CustomTabsClient client) {
   mClient = client;

   // Note: validateRelationship requires warmup to have been called.
   client.warmup(0L);

   mSession = mClient.newSession(customTabsCallback);
 }

 @Override
 public void onServiceDisconnected(ComponentName componentName) {
   mClient = null;
 }
});

अब आप सोच रहे हैं कि यह customTabsCallback इंस्टेंस क्या है? हम इसे अगले सेक्शन में बनाएंगे.

CustomTabsCallback बनाएं

CustomTabsCallback, CustomTabsClient के लिए कॉलबैक क्लास होता है. इससे कस्टम टैब में, इवेंट से जुड़े मैसेज मिलते हैं. इनमें से एक इवेंट onPostMessage है. ऐप्लिकेशन को वेब से मैसेज मिलने पर यह कॉल आता है. बातचीत शुरू करने के लिए, postMessage चैनल शुरू करने के लिए, क्लाइंट में कॉलबैक जोड़ें, जैसा कि नीचे दिए गए कोड में दिखाया गया है.

private final String TAG = "TWA/CCT-PostMessageDemo";

// The origin the TWA is equivalent to, where the Digital Asset Links file
// was created with the "use_as_origin" relationship.
private Uri SOURCE_ORIGIN = Uri.parse("https://source-origin.example.com");

// The origin the TWA will communicate with. In most cases, SOURCE_ORIGIN and
// TARGET_ORIGIN will be the same.
private Uri TARGET_ORIGIN = Uri.parse("https://target-origin.example.com");

// It stores the validation result so you can check on it before requesting
// postMessage channel, since without successful validation it is not possible
// to use postMessage.
boolean mValidated;

CustomTabsCallback customTabsCallback = new CustomTabsCallback() {

    // Listens for the validation result, you can use this for any kind of
    // logging purposes.
    @Override
    public void onRelationshipValidationResult(int relation, @NonNull Uri requestedOrigin,
        boolean result, @Nullable Bundle extras) {
        // If this fails:
        // - Have you called warmup?
        // - Have you set up Digital Asset Links correctly?
        // - Double check what browser you're using.
        Log.d(TAG, "Relationship result: " + result);
        mValidated = result;
    }

    // Listens for any navigation happens, it waits until the navigation finishes
    // then requests post message channel using
    // CustomTabsSession#requestPostMessageChannel(sourceUri, targetUri, extrasBundle)

    // The targetOrigin in requestPostMessageChannel means that you can be certain their messages are delivered only to the website you expect.
    @Override
    public void onNavigationEvent(int navigationEvent, @Nullable Bundle extras) {
        if (navigationEvent != NAVIGATION_FINISHED) {
            return;
        }

        if (!mValidated) {
            Log.d(TAG, "Not starting PostMessage as validation didn't succeed.");
        }

        // If this fails:
        // - Have you included PostMessageService in your AndroidManifest.xml ?
        boolean result = mSession.requestPostMessageChannel(SOURCE_ORIGIN, TARGET_ORIGIN, new Bundle());
        Log.d(TAG, "Requested Post Message Channel: " + result);
    }

    // This gets called when the channel we requested is ready for sending/receiving messages.
    @Override
    public void onMessageChannelReady(@Nullable Bundle extras) {
        Log.d(TAG, "Message channel ready.");

        int result = mSession.postMessage("First message", null);
        Log.d(TAG, "postMessage returned: " + result);
    }

    // Listens for upcoming messages from Web.
    @Override
    public void onPostMessage(@NonNull String message, @Nullable Bundle extras) {
        super.onPostMessage(message, extras);
        // Handle the received message.
    }
};

वेब से संवाद करना

अब हम अपने होस्ट ऐप्लिकेशन से मैसेज भेज और पा सकते हैं, लेकिन हम वेब से भी यह काम कैसे करते हैं? कम्यूनिकेशन, होस्ट ऐप्लिकेशन से शुरू होना चाहिए. इसके बाद, वेब पेज पर पहले मैसेज से पोर्ट की ज़रूरत पड़ती है. इस पोर्ट का इस्तेमाल, वापस कम्यूनिकेट करने के लिए किया जाता है. आपकी JavaScript फ़ाइल नीचे दिए गए उदाहरण की तरह दिखेगी:

window.addEventListener("message", function (event) {
  // We are receiveing messages from any origin, you can check of the origin by
  // using event.origin

  // get the port then use it for communication.
  var port = event.ports[0];
  if (typeof port === 'undefined') return;

  // Post message on this port.
  port.postMessage("Test")

  // Receive upcoming messages on this port.
  port.onmessage = function(event) {
    console.log("[PostMessage1] Got message" + event.data);
  };
});

आपको पूरा पूरा सैंपल देखने के लिए यहां पर क्लिक करें

Unsplash पर जोआना कोसिंस्का की फ़ोटो