Chrome 115 Trusted Web Activities (TWA) থেকে postMessages ব্যবহার করে বার্তা পাঠাতে পারে। এই নিবন্ধটি আপনার অ্যাপ এবং ওয়েবের মধ্যে যোগাযোগের জন্য প্রয়োজনীয় সেটআপের মাধ্যমে চলে।
এই গাইডের শেষে আপনি: - ক্লায়েন্ট এবং ওয়েব সামগ্রী যাচাইকরণ কীভাবে কাজ করে তা বুঝতে পারবেন। - ক্লায়েন্ট এবং ওয়েব সামগ্রীর মধ্যে যোগাযোগের চ্যানেলটি কীভাবে শুরু করতে হয় তা জানুন। - জানুন কিভাবে বার্তা পাঠাতে হয় এবং ওয়েব সামগ্রী থেকে বার্তা গ্রহণ করতে হয়।
এই নির্দেশিকা অনুসরণ করতে আপনার প্রয়োজন হবে:
- আপনার build.gradle ফাইলে সর্বশেষ androidx.browser (min v1.6.0-alpha02) লাইব্রেরি যোগ করতে।
- TWA-এর জন্য Chrome সংস্করণ 115.0.5790.13 বা তার বেশি।
window.postMessage() পদ্ধতি নিরাপদে উইন্ডো অবজেক্টের মধ্যে ক্রস-অরিজিন যোগাযোগ সক্ষম করে। উদাহরণস্বরূপ, একটি পৃষ্ঠা এবং একটি পপ-আপের মধ্যে যা এটি তৈরি করেছে, বা একটি পৃষ্ঠা এবং এটির মধ্যে এমবেড করা একটি আইফ্রেমের মধ্যে৷
সাধারণত, বিভিন্ন পৃষ্ঠার স্ক্রিপ্টগুলিকে শুধুমাত্র তখনই একে অপরকে অ্যাক্সেস করার অনুমতি দেওয়া হয় যখন তারা একই উত্স থেকে উদ্ভূত পৃষ্ঠাগুলি একই প্রোটোকল, পোর্ট নম্বর এবং হোস্ট ( একই-অরিজিন নীতি হিসাবেও পরিচিত) ভাগ করে। window.postMessage() পদ্ধতি বিভিন্ন উৎসের মধ্যে নিরাপদে যোগাযোগ করার জন্য একটি নিয়ন্ত্রিত প্রক্রিয়া প্রদান করে। এটি চ্যাট অ্যাপ্লিকেশন, সহযোগী সরঞ্জাম এবং অন্যান্য বাস্তবায়নের জন্য কার্যকর হতে পারে। উদাহরণস্বরূপ, একটি চ্যাট অ্যাপ্লিকেশন বিভিন্ন ওয়েবসাইটে থাকা ব্যবহারকারীদের মধ্যে বার্তা পাঠাতে postMessage ব্যবহার করতে পারে। ট্রাস্টেড ওয়েব অ্যাক্টিভিটিসে (TWA) postMessage ব্যবহার করা কিছুটা কঠিন হতে পারে, এই গাইডটি আপনাকে TWA ক্লায়েন্টে পোস্টমেসেজ ব্যবহার করে ওয়েবপেজ থেকে বার্তা পাঠাতে এবং বার্তা গ্রহণ করতে পারে।
ওয়েব যাচাইকরণে অ্যাপটি যোগ করুন
পোস্টমেসেজটি কাজ করার জন্য এটির জন্য একটি ওয়েবসাইট এবং এই সাইটটি চালু করা বিশ্বস্ত ওয়েব অ্যাক্টিভিটি অ্যাপের মধ্যে একটি বৈধ সম্পর্ক প্রয়োজন, এটি সম্পর্কের সাথে আপনার assetlinks.json ফাইলে অ্যাপের প্যাকেজ নাম যোগ করে ডিজিটাল সম্পদ লিঙ্ক (DAL) এর সাথে করা যেতে পারে। use_as_origin হিসাবে তাই এটি নিম্নলিখিত হিসাবে হবে:
[{
"relation": ["delegate_permission/common.use_as_origin"],
"target" : { "namespace": "android_app", "package_name": "com.example.app", "sha256_cert_fingerprints": [""] }
}]
মনে রাখবেন যে TWA-এর সাথে যুক্ত মূলের সেটআপের জন্য, 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 এবং অ্যাপটি যখন ওয়েব থেকে একটি বার্তা পায় তখন এটি কল করা হয়। যোগাযোগ শুরু করার জন্য পোস্টমেসেজ চ্যানেল শুরু করতে ক্লায়েন্টে কলব্যাক যোগ করুন, যেমনটি নিম্নলিখিত কোডে দেখানো হয়েছে।
private final String TAG = "TWA/CCT-PostMessageDemo";
private Uri SOURCE_ORIGIN = Uri.parse("my-app-origin-uri");
private Uri TARGET_ORIGIN = Uri.parse("website-you-are-communicating-with");
// It stores the validation result so you can check on it before requesting postMessage channel, since without successful validation it is not posible 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.
}
};
ওয়েব থেকে যোগাযোগ করা হচ্ছে
এখন আমরা আমাদের হোস্ট অ্যাপ থেকে বার্তা পাঠাতে এবং গ্রহণ করতে পারি, আমরা কীভাবে ওয়েব থেকে একই কাজ করব? যোগাযোগ হোস্ট অ্যাপ থেকে শুরু করতে হবে, তারপর প্রথম বার্তা থেকে ওয়েব পেজ পোর্ট পেতে হবে। এই পোর্ট ব্যাক যোগাযোগ করতে ব্যবহার করা হয়. আপনার জাভাস্ক্রিপ্ট ফাইল নিম্নলিখিত উদাহরণ মত কিছু দেখাবে:
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);
};
});
আপনি এখানে একটি সম্পূর্ণ সম্পূর্ণ নমুনা খুঁজে পেতে পারেন
আনস্প্ল্যাশে জোয়ানা কোসিনস্কা দ্বারা ছবি