অ্যাপ আইকনের জন্য ব্যাজিং

অ্যাপ ব্যাজিং এপিআই ইনস্টল করা ওয়েব অ্যাপগুলিকে অ্যাপ আইকনে একটি অ্যাপ্লিকেশন-ব্যাপী ব্যাজ সেট করার অনুমতি দেয়।

পিট লেপেজ

অ্যাপ ব্যাজিং এপিআই কি?

আটটি বিজ্ঞপ্তি সহ টুইটারের উদাহরণ এবং একটি ফ্ল্যাগ টাইপ ব্যাজ দেখানো অন্য একটি অ্যাপ।
আটটি বিজ্ঞপ্তি সহ টুইটারের উদাহরণ এবং একটি ফ্ল্যাগ টাইপ ব্যাজ দেখানো অন্য একটি অ্যাপ।

অ্যাপ ব্যাজিং এপিআই ইনস্টল করা ওয়েব অ্যাপগুলিকে একটি অ্যাপ্লিকেশন-ব্যাপী ব্যাজ সেট করার অনুমতি দেয়, যা অ্যাপ্লিকেশনের সাথে যুক্ত একটি অপারেটিং-সিস্টেম-নির্দিষ্ট জায়গায় দেখানো হয় (যেমন শেলফ বা হোম স্ক্রীন)।

ব্যাজিং ব্যবহারকারীকে সূক্ষ্মভাবে অবহিত করা সহজ করে যে নতুন কার্যকলাপ রয়েছে যার জন্য তাদের মনোযোগের প্রয়োজন হতে পারে, বা একটি অপঠিত গণনার মতো অল্প পরিমাণ তথ্য নির্দেশ করতে পারে।

ব্যাজগুলি বিজ্ঞপ্তিগুলির চেয়ে বেশি ব্যবহারকারী-বান্ধব হতে থাকে এবং অনেক বেশি ফ্রিকোয়েন্সি সহ আপডেট করা যেতে পারে, কারণ তারা ব্যবহারকারীকে বাধা দেয় না। এবং, কারণ তারা ব্যবহারকারীকে বাধা দেয় না, তাদের ব্যবহারকারীর অনুমতির প্রয়োজন নেই।

সম্ভাব্য ব্যবহারের ক্ষেত্রে

এই API ব্যবহার করতে পারে এমন অ্যাপগুলির উদাহরণগুলির মধ্যে রয়েছে:

  • চ্যাট, ইমেল, এবং সামাজিক অ্যাপ, নতুন বার্তা এসেছে তা সংকেত দিতে বা অপঠিত আইটেমের সংখ্যা দেখাতে।
  • প্রোডাক্টিভিটি অ্যাপ্লিকেশান, একটি দীর্ঘ-চলমান ব্যাকগ্রাউন্ড টাস্ক (যেমন একটি ছবি বা ভিডিও রেন্ডার করা) সম্পূর্ণ হয়েছে তা সংকেত দিতে।
  • গেমস, সংকেত দিতে যে একজন খেলোয়াড়ের অ্যাকশন প্রয়োজন (যেমন, দাবাতে, যখন খেলোয়াড়ের পালা)।

সমর্থন

অ্যাপ ব্যাজিং API Windows, এবং macOS-এ Chrome 81 এবং Edge 81 বা তার পরে কাজ করে। ChromeOS-এর জন্য সমর্থন বিকাশে রয়েছে এবং ভবিষ্যতে প্রকাশে উপলব্ধ হবে৷ অ্যান্ড্রয়েডে, ব্যাজিং API সমর্থিত নয়। পরিবর্তে, অ্যান্ড্রয়েড স্বয়ংক্রিয়ভাবে ইনস্টল করা ওয়েব অ্যাপের জন্য অ্যাপ আইকনে একটি ব্যাজ দেখায় যখন কোনও অপঠিত বিজ্ঞপ্তি থাকে, ঠিক যেমন Android অ্যাপগুলির জন্য।

চেষ্টা করে দেখুন

  1. অ্যাপ ব্যাজিং API ডেমো খুলুন।
  2. অনুরোধ করা হলে, অ্যাপটি ইনস্টল করতে ইনস্টল ক্লিক করুন বা এটি ইনস্টল করতে Chrome মেনু ব্যবহার করুন।
  3. এটি একটি ইনস্টল করা PWA হিসাবে খুলুন। দ্রষ্টব্য, এটি অবশ্যই একটি ইনস্টল করা PWA (আপনার টাস্ক বার বা ডকে) হিসাবে চলছে।
  4. অ্যাপ আইকন থেকে ব্যাজ সেট বা সাফ করতে সেট বা সাফ বোতামে ক্লিক করুন। আপনি ব্যাজ মান জন্য একটি নম্বর প্রদান করতে পারেন.

অ্যাপ ব্যাজিং এপিআই কীভাবে ব্যবহার করবেন

অ্যাপ ব্যাজিং API ব্যবহার করার জন্য, আপনার ওয়েব অ্যাপকে Chrome-এর ইনস্টল করার মানদণ্ড পূরণ করতে হবে এবং ব্যবহারকারীদের অবশ্যই তাদের হোম স্ক্রিনে এটি যোগ করতে হবে।

ব্যাজ API navigator দুটি পদ্ধতি নিয়ে গঠিত:

  • setAppBadge( number ) : অ্যাপের ব্যাজ সেট করে। যদি একটি মান প্রদান করা হয়, তবে প্রদত্ত মানের সাথে ব্যাজ সেট করুন অন্যথায়, একটি সাধারণ সাদা বিন্দু (বা প্ল্যাটফর্মের জন্য উপযুক্ত অন্য পতাকা) প্রদর্শন করুন। 0 number সেট করা clearAppBadge() কল করার মতই।
  • clearAppBadge() : অ্যাপের ব্যাজ সরিয়ে দেয়।

উভয়ই খালি প্রতিশ্রুতি দেয় যা আপনি ত্রুটি পরিচালনার জন্য ব্যবহার করতে পারেন।

ব্যাজটি বর্তমান পৃষ্ঠা থেকে বা নিবন্ধিত পরিষেবা কর্মী থেকে সেট করা যেতে পারে। ব্যাজ সেট বা সাফ করতে (ফোরগ্রাউন্ড পৃষ্ঠা বা পরিষেবা কর্মীতে), কল করুন:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

কিছু ক্ষেত্রে, অপারেটিং সিস্টেম ব্যাজটির সঠিক উপস্থাপনা অনুমোদন নাও করতে পারে। এই ধরনের ক্ষেত্রে, ব্রাউজার সেই ডিভাইসের জন্য সেরা উপস্থাপনা প্রদান করার চেষ্টা করবে। উদাহরণস্বরূপ, যেহেতু ব্যাজিং এপিআই অ্যান্ড্রয়েডে সমর্থিত নয়, তাই অ্যান্ড্রয়েড কখনও সংখ্যাসূচক মানের পরিবর্তে একটি বিন্দু দেখায়।

ব্যবহারকারী এজেন্ট কিভাবে ব্যাজ প্রদর্শন করে সে সম্পর্কে কিছু অনুমান করবেন না। কিছু ব্যবহারকারী এজেন্ট "4000" এর মতো একটি সংখ্যা নিতে পারে এবং এটিকে "99+" হিসাবে পুনরায় লিখতে পারে। আপনি যদি নিজেই ব্যাজটি পরিপূর্ণ করেন (উদাহরণস্বরূপ এটিকে "99" এ সেট করে) তাহলে "+" প্রদর্শিত হবে না। প্রকৃত নম্বর যাই হোক না কেন, শুধু setAppBadge(unreadCount) কল করুন এবং ব্যবহারকারী এজেন্টকে সেই অনুযায়ী এটি প্রদর্শনের সাথে ডিল করতে দিন।

Chrome-এ অ্যাপ ব্যাজিং API-এর জন্য একটি ইনস্টল করা অ্যাপের প্রয়োজন হলেও, ইনস্টলের অবস্থার উপর নির্ভর করে ব্যাজিং API-এ আপনার কল করা উচিত নয়। শুধুমাত্র API কল করুন যখন এটি বিদ্যমান থাকে, কারণ অন্যান্য ব্রাউজারগুলি অন্য জায়গায় ব্যাজ দেখাতে পারে। যদি এটি কাজ করে তবে এটি কাজ করে। যদি না হয়, এটা সহজভাবে না.

ব্যাকগ্রাউন্ডে একটি পরিষেবা কর্মী থেকে ব্যাজ সেট করা এবং সাফ করা

আপনি পরিষেবা কর্মী ব্যবহার করে ব্যাকগ্রাউন্ডে অ্যাপ ব্যাজ সেট করতে পারেন। এটি পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক, পুশ API বা উভয়ের সংমিশ্রণের মাধ্যমে করুন।

পর্যায়ক্রমিক পটভূমি সিঙ্ক

পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক একজন পরিষেবা কর্মীকে পর্যায়ক্রমে সার্ভারে পোল করার অনুমতি দেয়, যা একটি আপডেট স্থিতি পেতে এবং navigator.setAppBadge() কল করতে ব্যবহার করা যেতে পারে।

যাইহোক, যে ফ্রিকোয়েন্সিতে সিঙ্ক কল করা হয় তা পুরোপুরি নির্ভরযোগ্য নয় এবং ব্রাউজারের বিবেচনার ভিত্তিতে বলা হয়।

ওয়েব পুশ API

Push API সার্ভারগুলিকে পরিষেবা কর্মীদের কাছে বার্তা পাঠাতে দেয়, যা জাভাস্ক্রিপ্ট কোড চালাতে পারে এমনকি যখন কোনও অগ্রভাগের পৃষ্ঠা চলছে না। সুতরাং, একটি সার্ভার পুশ navigator.setAppBadge() কল করে ব্যাজ আপডেট করতে পারে।

যাইহোক, বেশিরভাগ ব্রাউজার, ক্রোম অন্তর্ভুক্ত, যখনই একটি পুশ বার্তা প্রাপ্ত হয় তখন একটি বিজ্ঞপ্তি প্রদর্শনের প্রয়োজন হয়। কিছু ব্যবহারের ক্ষেত্রে এটি ঠিক আছে (উদাহরণস্বরূপ ব্যাজ আপডেট করার সময় একটি বিজ্ঞপ্তি দেখানো) কিন্তু একটি বিজ্ঞপ্তি প্রদর্শন না করে সূক্ষ্মভাবে ব্যাজ আপডেট করা অসম্ভব করে তোলে।

এছাড়াও, পুশ বার্তাগুলি পেতে ব্যবহারকারীদের অবশ্যই আপনার সাইটের বিজ্ঞপ্তির অনুমতি দিতে হবে।

উভয়ের সংমিশ্রণ

নিখুঁত না হলেও, Push API এবং পর্যায়ক্রমিক ব্যাকগ্রাউন্ড সিঙ্ক একসাথে ব্যবহার করা একটি ভাল সমাধান প্রদান করে। উচ্চ অগ্রাধিকার তথ্য পুশ API এর মাধ্যমে বিতরণ করা হয়, একটি বিজ্ঞপ্তি দেখায় এবং ব্যাজ আপডেট করে। এবং নিম্ন অগ্রাধিকার তথ্য প্রদান করা হয় ব্যাজ আপডেট করার মাধ্যমে, হয় যখন পৃষ্ঠা খোলা থাকে, অথবা পর্যায়ক্রমিক পটভূমি সিঙ্কের মাধ্যমে।

প্রতিক্রিয়া

Chrome টিম অ্যাপ ব্যাজিং API এর সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷

API ডিজাইন সম্পর্কে আমাদের বলুন

API এ এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে আপনার একটি প্রশ্ন বা মন্তব্য আছে?

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করতে ভুলবেন না, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী এবং UI>Browser>WebAppInstalls এ উপাদান সেট করুন। দ্রুত এবং সহজ পুনরুৎপাদন ভাগ করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

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

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

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

সহায়ক লিঙ্ক

Unsplash- এ প্রতীক কাত্যলের হিরো ছবি