আপনার অফলাইন-সক্ষম পৃষ্ঠাগুলিকে কন্টেন্ট ইন্ডেক্সিং এপিআই দিয়ে ইন্ডেক্স করা

সার্ভিস ওয়ার্কারদেরকে ব্রাউজারকে বলে দেওয়ার সুযোগ দেওয়া যে কোন পেজগুলো অফলাইনে কাজ করবে।

Jeff Posnick

সাফল্য: ক্যাপাবিলিটিজ প্রজেক্টের অংশ কন্টেন্ট ইনডেক্সিং এপিআই, অ্যান্ড্রয়েডের জন্য ক্রোম ৮৪-এ চালু হয়েছে।

কন্টেন্ট ইনডেক্সিং এপিআই (Content Indexing API) বলতে কী বোঝায়?

একটি প্রগ্রেসিভ ওয়েব অ্যাপ ব্যবহার করার অর্থ হলো, আপনার নেটওয়ার্ক সংযোগের বর্তমান অবস্থা নির্বিশেষে মানুষের প্রয়োজনীয় তথ্য—যেমন ছবি, ভিডিও, প্রবন্ধ এবং আরও অনেক কিছু—অ্যাক্সেস করা। সার্ভিস ওয়ার্কার , ক্যাশ স্টোরেজ এপিআই এবং ইনডেক্সডডিবি-র মতো প্রযুক্তিগুলো আপনাকে ডেটা সংরক্ষণ এবং পরিবেশনের জন্য প্রয়োজনীয় ভিত্তি প্রদান করে, যখন ব্যবহারকারীরা সরাসরি একটি PWA-এর সাথে ইন্টারঅ্যাক্ট করে। কিন্তু একটি উচ্চ-মানের, অফলাইন-ফার্স্ট PWA তৈরি করাই গল্পের একটি অংশ মাত্র। ব্যবহারকারীরা যদি বুঝতে না পারে যে একটি ওয়েব অ্যাপের কন্টেন্ট অফলাইনে থাকাকালীনও পাওয়া যাবে, তবে সেই কার্যকারিতাটি বাস্তবায়নে আপনার করা পরিশ্রমের তারা সম্পূর্ণ সুবিধা নিতে পারবে না।

এটি একটি আবিষ্কারের সমস্যা; আপনার PWA কীভাবে ব্যবহারকারীদের এর অফলাইন-সক্ষম কন্টেন্ট সম্পর্কে জানাতে পারে, যাতে তারা উপলব্ধ কন্টেন্টগুলো খুঁজে বের করে দেখতে পারে? কন্টেন্ট ইনডেক্সিং এপিআই (Content Indexing API) এই সমস্যার একটি সমাধান। এই সমাধানের ডেভেলপার-মুখী অংশটি হলো সার্ভিস ওয়ার্কারের একটি এক্সটেনশন, যা ডেভেলপারদের ব্রাউজার দ্বারা পরিচালিত একটি লোকাল ইনডেক্সে অফলাইন-সক্ষম পেজগুলোর ইউআরএল (URL) এবং মেটাডেটা (metadata) যোগ করার সুযোগ দেয়। এই উন্নত বৈশিষ্ট্যটি ক্রোম ৮৪ (Chrome 84) এবং এর পরবর্তী সংস্করণগুলোতে উপলব্ধ।

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

প্রথমে, Chrome-এর নতুন ট্যাব পৃষ্ঠায় Downloads মেনু আইটেমটি নির্বাচন করুন।

সূচিপত্রে নতুন যুক্ত হওয়া মিডিয়া ও প্রবন্ধগুলো 'আপনার জন্য প্রবন্ধ' বিভাগে দেখানো হবে।

এছাড়াও, কোনো ব্যবহারকারী অফলাইনে আছেন তা শনাক্ত করতে পারলে ক্রোম স্বয়ংক্রিয়ভাবে কন্টেন্ট সুপারিশ করতে পারে।

কন্টেন্ট ইন্ডেক্সিং এপিআই কন্টেন্ট ক্যাশ করার কোনো বিকল্প উপায় নয় । এটি আপনার সার্ভিস ওয়ার্কার দ্বারা ইতিমধ্যে ক্যাশ করা পেজগুলো সম্পর্কে মেটাডেটা সরবরাহ করার একটি উপায়, যাতে ব্যবহারকারীরা যখন পেজগুলো দেখতে আগ্রহী হন, তখন ব্রাউজার সেগুলোকে প্রদর্শন করতে পারে। কন্টেন্ট ইন্ডেক্সিং এপিআই ক্যাশ করা পেজগুলোর সহজে খুঁজে পাওয়ার ক্ষেত্রে সহায়তা করে।

দ্রষ্টব্য: কন্টেন্ট ইনডেক্সিং এপিআই কোনো অনুসন্ধানযোগ্য ইনডেক্স নয়। যদিও আপনি সমস্ত ইনডেক্স করা এন্ট্রির একটি তালিকা পেতে পারেন, তবে সরাসরি ইনডেক্স করা মেটাডেটার বিরুদ্ধে কোয়েরি করার কোনো উপায় নেই।

এটি বাস্তবে দেখুন

কন্টেন্ট ইন্ডেক্সিং এপিআই সম্পর্কে ধারণা পাওয়ার সেরা উপায় হলো একটি নমুনা অ্যাপ্লিকেশন ব্যবহার করে দেখা।

1. নিশ্চিত করুন যে আপনি একটি সমর্থিত ব্রাউজার এবং প্ল্যাটফর্ম ব্যবহার করছেন। অ্যান্ড্রয়েডের ক্ষেত্রে এটি শুধুমাত্র ক্রোম ৮৪ বা তার পরবর্তী সংস্করণে সীমাবদ্ধ। আপনি ক্রোমের কোন সংস্করণ ব্যবহার করছেন তা দেখতে about://version এ যান।
2. https://contentindex.dev দেখুন
3. তালিকার এক বা একাধিক আইটেমের পাশে থাকা + বোতামটি ক্লিক করুন।
4. (ঐচ্ছিক) আপনার ব্রাউজারকে অফলাইনে নেওয়ার অনুকরণ করতে আপনার ডিভাইসের ওয়াইফাই ও মোবাইল ডেটা সংযোগ নিষ্ক্রিয় করুন, অথবা এয়ারপ্লেন মোড চালু করুন।
5. Chrome-এর মেনু থেকে Downloads বেছে নিন এবং Articles for You ট্যাবে যান।
6. আপনার পূর্বে সংরক্ষণ করা বিষয়বস্তুগুলো ব্রাউজ করুন।

আপনি গিটহাবে নমুনা অ্যাপ্লিকেশনটির সোর্স দেখতে পারেন।

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

এপিআই ব্যবহার করে

এপিআই ব্যবহার করার জন্য আপনার অ্যাপে একটি সার্ভিস ওয়ার্কার এবং অফলাইনে ব্যবহারযোগ্য ইউআরএল থাকতে হবে। যদি আপনার ওয়েব অ্যাপে সার্ভিস ওয়ার্কার না থাকে, তবে ওয়ার্কবক্স লাইব্রেরিগুলো একটি তৈরি করা সহজ করে দিতে পারে।

কোন ধরনের ইউআরএলগুলোকে অফলাইন-সক্ষম হিসেবে সূচীবদ্ধ করা যেতে পারে?

এপিআই এইচটিএমএল ডকুমেন্টের সাথে সম্পর্কিত ইউআরএল ইন্ডেক্স করা সমর্থন করে। উদাহরণস্বরূপ, একটি ক্যাশ করা মিডিয়া ফাইলের ইউআরএল সরাসরি ইন্ডেক্স করা যায় না। এর পরিবর্তে, আপনাকে এমন একটি পৃষ্ঠার ইউআরএল দিতে হবে যা মিডিয়া প্রদর্শন করে এবং অফলাইনে কাজ করে।

একটি প্রস্তাবিত পদ্ধতি হলো একটি 'ভিউয়ার' HTML পেজ তৈরি করা, যা কোয়েরি প্যারামিটার হিসেবে মূল মিডিয়ার URL গ্রহণ করবে এবং তারপর ফাইলটির বিষয়বস্তু প্রদর্শন করবে, প্রয়োজনে পেজটিতে অতিরিক্ত কন্ট্রোল বা কন্টেন্টও যোগ করতে পারবে।

ওয়েব অ্যাপগুলো কন্টেন্ট ইনডেক্সে শুধুমাত্র সেইসব URL যোগ করতে পারে যেগুলো বর্তমান সার্ভিস ওয়ার্কারের আওতাধীন । অন্য কথায়, একটি ওয়েব অ্যাপ সম্পূর্ণ ভিন্ন কোনো ডোমেইনের URL কন্টেন্ট ইনডেক্সে যোগ করতে পারে না।

সংক্ষিপ্ত বিবরণ

কন্টেন্ট ইনডেক্সিং এপিআই তিনটি অপারেশন সমর্থন করে: মেটাডেটা যোগ করা, তালিকাভুক্ত করা এবং অপসারণ করা। এই মেথডগুলো ServiceWorkerRegistration ইন্টারফেসে যুক্ত করা index একটি নতুন প্রপার্টি থেকে উন্মুক্ত করা হয়েছে।

কন্টেন্ট ইন্ডেক্স করার প্রথম ধাপ হলো বর্তমান ServiceWorkerRegistration এর একটি রেফারেন্স পাওয়া। এর সবচেয়ে সহজ উপায় হলো navigator.serviceWorker.ready ব্যবহার করা:

const registration = await navigator.serviceWorker.ready;

// Remember to feature-detect before using the API:
if ('index' in registration) {
  // Your Content Indexing API code goes here!
}

আপনি যদি কোনো ওয়েব পেজের পরিবর্তে সার্ভিস ওয়ার্কারের ভেতর থেকে কন্টেন্ট ইনডেক্সিং এপিআই-কে কল করেন, তাহলে আপনি registration ব্যবহার করে সরাসরি ServiceWorkerRegistration কে উল্লেখ করতে পারেন। এটি ServiceWorkerGlobalScope. এর অংশ হিসেবে আগে থেকেই সংজ্ঞায়িত থাকবে ।

সূচীতে যোগ করা হচ্ছে

URL এবং তার সাথে যুক্ত মেটাডেটা ইন্ডেক্স করতে add() মেথডটি ব্যবহার করুন। আইটেমগুলো কখন ইন্ডেক্সে যুক্ত হবে, তা বেছে নেওয়ার দায়িত্ব আপনার। আপনি হয়তো কোনো ইনপুটের প্রতিক্রিয়ায়, যেমন 'save offline' বাটনে ক্লিক করার মাধ্যমে, ইন্ডেক্সে আইটেম যুক্ত করতে চাইতে পারেন। অথবা, পিরিয়ডিক ব্যাকগ্রাউন্ড সিঙ্কের মতো কোনো পদ্ধতি ব্যবহার করে, প্রতিবার ক্যাশ করা ডেটা আপডেট হওয়ার সাথে সাথে স্বয়ংক্রিয়ভাবে আইটেম যুক্ত করতে পারেন।

await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',

  // Required; url needs to be an offline-capable HTML page.
  url: '/articles/123',

  // Required; used in user-visible lists of content.
  title: 'Article title',

  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',

  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],

  // Optional; valid categories are:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

একটি এন্ট্রি যোগ করলে তা শুধুমাত্র কন্টেন্ট ইনডেক্সকে প্রভাবিত করে; এটি ক্যাশে নতুন কিছু যোগ করে না।

বিশেষ পরিস্থিতি: আপনার আইকনগুলো যদি fetch হ্যান্ডলারের উপর নির্ভরশীল হয়, তাহলে window কনটেক্সট থেকে add() কল করুন।

যখন আপনি add() কল করেন, Chrome প্রতিটি আইকনের URL-এর জন্য একটি অনুরোধ পাঠায়, যাতে ইনডেক্স করা কন্টেন্টের তালিকা দেখানোর সময় ব্যবহারের জন্য আইকনটির একটি কপি তার কাছে থাকে।

• আপনি যদি window কনটেক্সট থেকে (অর্থাৎ, আপনার ওয়েব পেজ থেকে) add() কল করেন, তাহলে এই অনুরোধটি আপনার সার্ভিস ওয়ার্কারে একটি fetch ইভেন্ট ট্রিগার করবে।

• যদি আপনি আপনার সার্ভিস ওয়ার্কারের মধ্যে (সম্ভবত অন্য কোনো ইভেন্ট হ্যান্ডলারের ভেতরে) add() কল করেন, তাহলে অনুরোধটি সার্ভিস ওয়ার্কারের fetch হ্যান্ডলারকে ট্রিগার করবে না । আইকনগুলো কোনো সার্ভিস ওয়ার্কারের সম্পৃক্ততা ছাড়াই সরাসরি ফেচ হয়ে যাবে। এই বিষয়টি মনে রাখবেন যদি আপনার আইকনগুলো fetch হ্যান্ডলারের উপর নির্ভরশীল হয়, সম্ভবত কারণ সেগুলো শুধু লোকাল ক্যাশে থাকে এবং নেটওয়ার্কে নয়। যদি তাই হয়, তবে নিশ্চিত করুন যে আপনি শুধুমাত্র window কনটেক্সট থেকেই add() কল করছেন।

সূচীর বিষয়বস্তু তালিকাভুক্ত করা

getAll() মেথডটি ইনডেক্স করা এন্ট্রি এবং তাদের মেটাডেটার একটি ইটারেবল লিস্টের জন্য একটি প্রমিজ রিটার্ন করে। রিটার্ন করা এন্ট্রিগুলোতে add() দিয়ে সেভ করা সমস্ত ডেটা থাকবে।

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

সূচী থেকে আইটেম অপসারণ করা হচ্ছে

ইনডেক্স থেকে কোনো আইটেম মুছে ফেলতে, কাঙ্ক্ষিত আইটেমটির id সহ delete() ফাংশনটি কল করুন:

await registration.index.delete('article-123');

delete() কল করলে শুধুমাত্র ইনডেক্স প্রভাবিত হয়। এটি ক্যাশ থেকে কিছুই মুছে ফেলে না।

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

ব্যবহারকারী মুছে ফেলার ইভেন্ট পরিচালনা করা

ব্রাউজার যখন ইনডেক্স করা কন্টেন্ট প্রদর্শন করে, তখন এতে একটি ডিলিট মেনু আইটেমসহ নিজস্ব ইউজার ইন্টারফেস থাকতে পারে, যা ব্যবহারকারীদের পূর্বে ইনডেক্স করা কন্টেন্ট দেখা শেষ হয়েছে তা জানানোর সুযোগ দেয়। ক্রোম ৮০-তে ডিলিট ইন্টারফেসটি দেখতে এইরকম:

যখন কেউ ওই মেনু আইটেমটি নির্বাচন করে, তখন আপনার ওয়েব অ্যাপের সার্ভিস ওয়ার্কার একটি contentdelete ইভেন্ট পাবে। যদিও এই ইভেন্টটি হ্যান্ডেল করা ঐচ্ছিক, এটি আপনার সার্ভিস ওয়ার্কারকে সেইসব কন্টেন্ট, যেমন স্থানীয়ভাবে ক্যাশ করা মিডিয়া ফাইল, যা ব্যবহার করা শেষ হয়েছে বলে কেউ জানিয়ে দিয়েছে, সেগুলোকে "পরিষ্কার" করার একটি সুযোগ করে দেয়।

আপনার contentdelete হ্যান্ডলারের ভিতরে registration.index.delete() কল করার প্রয়োজন নেই; যদি ইভেন্টটি ফায়ার হয়ে থাকে, তাহলে ব্রাউজার দ্বারা প্রাসঙ্গিক ইনডেক্স ডিলিট করার কাজটি ইতিমধ্যেই সম্পন্ন হয়ে গেছে।

self.addEventListener('contentdelete', (event) => {
  // event.id will correspond to the ID value used
  // when the indexed content was added.
  // Use that value to determine what content, if any,
  // to delete from wherever your app stores it. Usually
  // the Cache Storage API or perhaps IndexedDB.
});

দ্রষ্টব্য: contentdelete ইভেন্টটি শুধুমাত্র তখনই ফায়ার হয় যখন ব্রাউজারের বিল্ট-ইন ইউজার ইন্টারফেসের সাথে ইন্টারঅ্যাকশনের কারণে ডিলিট করা হয়। registration.index.delete() কল করা হলে এটি ফায়ার হয় না । যদি আপনার ওয়েব অ্যাপ ঐ API মেথডটি ব্যবহার করে ইনডেক্স ডিলিট করার কাজটি ট্রিগার করে, তবে একই সাথে ক্যাশ করা কন্টেন্টও পরিষ্কার করে ফেলা উচিত।

এপিআই ডিজাইন সম্পর্কে মতামত

এপিআই-টিতে কি এমন কিছু আছে যা ব্যবহারে অসুবিধাজনক বা প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার ধারণাটি বাস্তবায়নের জন্য প্রয়োজনীয় কোনো অংশ কি অনুপস্থিত?

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

বাস্তবায়নে সমস্যা?

আপনি কি ক্রোমের বাস্তবায়নে কোনো ত্রুটি খুঁজে পেয়েছেন?

https://new.crbug.com -এ একটি বাগ রিপোর্ট করুন। যতটা সম্ভব বিস্তারিত তথ্য, সমস্যাটি পুনরায় ঘটানোর নির্দেশাবলী অন্তর্ভুক্ত করুন এবং Components-কে Blink>ContentIndexing এ সেট করুন।

এপিআই ব্যবহার করার পরিকল্পনা করছেন?

আপনার ওয়েব অ্যাপে কন্টেন্ট ইনডেক্সিং এপিআই ব্যবহার করার পরিকল্পনা করছেন? আপনার প্রকাশ্য সমর্থন ক্রোমকে ফিচারগুলোকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার নির্মাতাদের দেখায় যে এগুলোর সমর্থন করা কতটা জরুরি।

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

কন্টেন্ট ইনডেক্সিংয়ের নিরাপত্তা ও গোপনীয়তা সংক্রান্ত প্রভাবগুলো কী কী?

W3C-এর নিরাপত্তা ও গোপনীয়তা প্রশ্নমালার জবাবে প্রদত্ত উত্তরগুলো দেখে নিন। আপনার যদি আরও প্রশ্ন থাকে, তবে প্রজেক্টটির গিটহাব রিপোতে একটি আলোচনা শুরু করুন।