ওয়েব শেয়ার API এর সাথে OS শেয়ারিং UI এর সাথে একীভূত করুন

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

জো মেডলি
Joe Medley
GitHub

ওয়েব শেয়ার API এর সাথে, ওয়েব অ্যাপগুলি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলির মতো একই সিস্টেম-প্রদত্ত শেয়ার ক্ষমতা ব্যবহার করতে সক্ষম। ওয়েব শেয়ার এপিআই প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতোই ডিভাইসে ইনস্টল করা অন্যান্য অ্যাপের লিঙ্ক, পাঠ্য এবং ফাইল শেয়ার করা ওয়েব অ্যাপের জন্য সম্ভব করে তোলে।

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

ক্ষমতা এবং সীমাবদ্ধতা

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

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

ব্রাউজার সমর্থন

  • ৮৯
  • 93
  • 12.1

উৎস

লিঙ্ক এবং টেক্সট শেয়ারিং

লিঙ্ক এবং টেক্সট শেয়ার করতে, 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));
}

আপনার সাইটে একই কন্টেন্টের জন্য একাধিক ইউআরএল থাকলে, বর্তমান ইউআরএলের পরিবর্তে পৃষ্ঠার ক্যানোনিকাল ইউআরএল শেয়ার করুন। 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.canShare() navigator.share() পরীক্ষা করে বৈশিষ্ট্য সনাক্তকরণ পরিচালনা করে। canShare() এ পাস করা ডেটা অবজেক্ট শুধুমাত্র files সম্পত্তি সমর্থন করে। নির্দিষ্ট ধরনের অডিও, ইমেজ, পিডিএফ, ভিডিও এবং টেক্সট ফাইল শেয়ার করা যায়। একটি সম্পূর্ণ তালিকার জন্য Chromium-এ অনুমোদিত ফাইল এক্সটেনশানগুলি দেখুন৷ ভবিষ্যতে আরো ফাইল প্রকার যোগ করা হতে পারে.

তৃতীয় পক্ষের আইফ্রেমে শেয়ার করা

তৃতীয় পক্ষের আইফ্রেমের মধ্যে থেকে শেয়ার অ্যাকশনটি ট্রিগার করতে, web-share একটি মান সহ allow বৈশিষ্ট্য সহ iframe এম্বেড করুন:

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

আপনি গ্লিচের একটি ডেমোতে এটিকে কার্যকরভাবে দেখতে পারেন এবং উত্স কোডটি দেখতে পারেন। অ্যাট্রিবিউট প্রদান করতে ব্যর্থ হলে Failed to execute 'share' on 'Navigator': Permission denied বার্তা সহ একটি NotAllowedError হবে: অনুমতি অস্বীকার করা হয়েছে।

সান্তা ট্র্যাকার কেস স্টাডি

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

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

2016 সালে, সান্তা ট্র্যাকার টিম অ্যান্ড্রয়েডে ওয়েব শেয়ার API ব্যবহার করেছে। এই API মোবাইলের জন্য একটি নিখুঁত ফিট ছিল. পূর্ববর্তী বছরগুলিতে, দলটি মোবাইলে শেয়ার বোতামগুলি সরিয়ে দিয়েছে কারণ স্থান একটি প্রিমিয়ামে রয়েছে এবং তারা বেশ কয়েকটি শেয়ারের লক্ষ্যমাত্রাকে সমর্থন করতে পারেনি।

কিন্তু ওয়েব শেয়ার API এর সাথে, তারা মূল্যবান পিক্সেল সংরক্ষণ করে একটি বোতাম উপস্থাপন করতে সক্ষম হয়েছিল। তারা আরও দেখেছে যে ব্যবহারকারীরা API সক্ষম না থাকা ব্যবহারকারীদের তুলনায় প্রায় 20% বেশি ওয়েব শেয়ারের সাথে শেয়ার করেছেন। ওয়েব শেয়ার অ্যাকশন দেখতে সান্তা ট্র্যাকারে যান।

ব্রাউজার সমর্থন

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

এখানে এই বৈশিষ্ট্যটির জন্য সমর্থনের একটি মোটামুটি রূপরেখা রয়েছে৷ বিস্তারিত তথ্যের জন্য, সমর্থন লিঙ্কগুলির যেকোনো একটি অনুসরণ করুন।

navigator.canShare()

ব্রাউজার সমর্থন

  • ৮৯
  • 93
  • 14

উৎস

navigator.share()

ব্রাউজার সমর্থন

  • ৮৯
  • 93
  • 12.1

উৎস

API এর জন্য সমর্থন দেখান

আপনি ওয়েব শেয়ার API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chromium টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

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