Web Share API-এর মাধ্যমে OS শেয়ারিং UI-এর সাথে ইন্টিগ্রেট করা

ওয়েব অ্যাপ, প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতো একই সিস্টেম-প্রদত্ত শেয়ার করার ক্ষমতা ব্যবহার করতে পারে।

Joe Medley
Joe Medley
GitHub

Web Share API-এর মাধ্যমে, ওয়েব অ্যাপ প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতো একই সিস্টেম-প্রদত্ত শেয়ার করার ক্ষমতা ব্যবহার করতে পারে। Web Share API-এর মাধ্যমে ওয়েব অ্যাপ, প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতোই ডিভাইসে ইনস্টল করা অন্যান্য অ্যাপে লিঙ্ক, টেক্সট ও ফাইল শেয়ার করতে পারে।

ইনস্টল করা PWA-কে বিকল্প হিসেবে নিয়ে সিস্টেম-লেভেল শেয়ার টার্গেট পিকার।
সিস্টেম-লেভেল শেয়ার টার্গেট পিকার, যেখানে ইনস্টল করা PWA একটি বিকল্প হিসেবে থাকে।

কেপেবিলিটি ও সীমাবদ্ধতা

ওয়েব শেয়ারের নিম্নলিখিত ক্ষমতা ও সীমাবদ্ধতা আছে:

  • এটি শুধুমাত্র এমন সাইটে ব্যবহার করা যাবে যা HTTPS-এর মাধ্যমে অ্যাক্সেস করা হয়।
  • থার্ড-পার্টি iframe-এ শেয়ার করা হলে, allow অ্যাট্রিবিউট ব্যবহার করতেই হবে।
  • ক্লিকের মতো ব্যবহারকারীর অ্যাকশনের উত্তরে এটি চালু করতে হবে। onload হ্যান্ডলারের মাধ্যমে এটি ইনভোক করা অসম্ভব।
  • এটি URL, টেক্সট বা ফাইল শেয়ার করতে পারে।

Browser Support

  • Chrome: 128.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

লিঙ্ক ও টেক্সট শেয়ার করা হচ্ছে

লিঙ্ক ও টেক্সট শেয়ার করতে, share() পদ্ধতি ব্যবহার করুন, যা হল প্রয়োজনীয় প্রপার্টি অবজেক্ট সহ প্রমিস-ভিত্তিক পদ্ধতি। ব্রাউজার যাতে TypeError না দেখায়, তার জন্য অবজেক্টে নিম্নলিখিত প্রপার্টির মধ্যে অন্তত একটি থাকতে হবে: title, text, url বা files। যেমন, আপনি URL ছাড়া টেক্সট শেয়ার করতে পারেন অথবা এর উল্টোটাও করতে পারেন। তিনজন মেম্বারকেই অনুমতি দিলে ব্যবহারের ক্ষেত্রে আরও বেশি সুবিধা পাওয়া যায়। মনে করুন, নিচের কোডটি রান করার পরে, ব্যবহারকারী টার্গেট হিসেবে একটি ইমেল অ্যাপ্লিকেশন বেছে নিয়েছেন। title প্যারামিটার ইমেলের বিষয়, text, মেসেজের বিষয়বস্তু এবং ফাইল, অ্যাটাচমেন্ট হতে পারে।

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

আপনার সাইটে একই কন্টেন্টের জন্য একাধিক URL থাকলে, বর্তমান URL-এর পরিবর্তে পৃষ্ঠার সেরা URL শেয়ার করুন। document.location.href শেয়ার করার পরিবর্তে, আপনি পৃষ্ঠার <head>-এ সেরা URL <meta> ট্যাগ চেক করে সেটি শেয়ার করবেন। এটি ব্যবহারকারীকে আরও ভালো অভিজ্ঞতা প্রদান করবে। এটি শুধু রিডাইরেক্ট এড়ায় না, তার সাথে এটিও নিশ্চিত করে যে শেয়ার করা URL কোনও নির্দিষ্ট ক্লায়েন্টের জন্য সঠিক ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। যেমন, কোনও বন্ধু যদি মোবাইল URL শেয়ার করেন এবং আপনি সেটি ডেস্কটপ কম্পিউটারে দেখেন, তাহলে আপনাকে ডেস্কটপ ভার্সন দেখানো উচিত:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

ফাইল শেয়ার করা হচ্ছে

ফাইল শেয়ার করতে, প্রথমে navigator.canShare()-এর জন্য টেস্ট করুন এবং কল করুন। তারপর navigator.share()-এ কল করার সময় ফাইলের অ্যারে অন্তর্ভুক্ত করুন:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

লক্ষ্য করুন যে স্যাম্পেলটি navigator.share()-এর পরিবর্তে navigator.canShare()-এর জন্য পরীক্ষা করে ফিচার শনাক্তকরণ ম্যানেজ করে। canShare()-এ পাস করা ডেটা অবজেক্টে শুধু files প্রপার্টি কাজ করে। নির্দিষ্ট ধরনের অডিও, ছবি, পিডিএফ, ভিডিও এবং টেক্সট ফাইল শেয়ার করা যেতে পারে। সম্পূর্ণ তালিকার জন্য Chromium-এ অনুমোদিত ফাইল এক্সটেনশন দেখুন। ভবিষ্যতে আরও ফাইলের ধরন যোগ করা হতে পারে।

থার্ড-পার্টি iframe-এ শেয়ার করা

থার্ড-পার্টি iframe-এর মধ্যে থেকে শেয়ার অ্যাকশন ট্রিগার করতে, web-share ভ্যালু সহ allow অ্যাট্রিবিউটের সাথে iframe এম্বেড করুন:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Santa Tracker কেস স্টাডি

Santa Tracker অ্যাপে শেয়ার করার বোতাম দেখানো হচ্ছে।
সান্তা ট্র্যাকার শেয়ার করার বোতাম।

Santa Tracker, একটি ওপেন-সোর্স প্রোজেক্ট, যা Google-এ ছুটির ঐতিহ্য। প্রতি ডিসেম্বরে, আপনি গেম ও শিক্ষামূলক অভিজ্ঞতার মাধ্যমে এই সিজন উদযাপন করতে পারবেন।

২০১৬ সালে, Santa Tracker টিম Android-এ Web Share API ব্যবহার করেছিল। এই API মোবাইলের জন্য একদম উপযুক্ত ছিল। আগের বছরগুলিতে, টিম মোবাইলে শেয়ার বোতাম সরিয়ে দিয়েছিল কারণ জায়গা খুব কম ছিল এবং তারা একাধিক শেয়ার টার্গেট রাখার কোনও যুক্তি খুঁজে পায়নি।

কিন্তু Web Share API-এর মাধ্যমে, তারা একটি বোতাম উপস্থাপন করতে পেরেছে, যা মূল্যবান পিক্সেল বাঁচায়। তারা আরও দেখেছেন যে, API চালু না থাকা ব্যবহারকারীদের তুলনায় Web Share ব্যবহারকারীরা প্রায় ২০% বেশি শেয়ার করেছেন। ওয়েব শেয়ার কীভাবে কাজ করে তা দেখতে Santa Tracker-এ যান।

ব্রাউজার সহায়তা

Web Share API-এর জন্য ব্রাউজার সাপোর্ট সূক্ষ্ম, এবং এটি সাজেস্ট করা হয় যে আপনি কোনও নির্দিষ্ট পদ্ধতি সমর্থিত বলে ধরে নেওয়ার পরিবর্তে ফিচার শনাক্তকরণ (আগের কোড স্যাম্পেলে বর্ণিত) ব্যবহার করুন।

এই ফিচারের জন্য সহায়তা সংক্রান্ত একটি রাফ আউটলাইন এখানে দেওয়া হল। বিস্তারিত তথ্যের জন্য, যেকোনও একটি সহায়তা লিঙ্ক অনুসরণ করুন।

navigator.canShare()

Browser Support

  • Chrome: 128.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 14.

Source

navigator.share()

Browser Support

  • Chrome: 128.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

API-এর জন্য সহায়তা দেখান

আপনি কি Web Share API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chromium টিমকে ফিচারগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার ভেন্ডরদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ।

হ্যাশট্যাগ #WebShare ব্যবহার করে @ChromiumDev-এ টুইট করুন এবং আপনি এটি কোথায় ও কীভাবে ব্যবহার করছেন তা আমাদের জানান।