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

কোন পৃষ্ঠাগুলি অফলাইনে কাজ করে তা ব্রাউজারগুলিকে বলতে পরিষেবা কর্মীদের সক্ষম করা৷

Jeff Posnick

কন্টেন্ট ইন্ডেক্সিং এপিআই কি?

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

এটি একটি আবিষ্কার সমস্যা; আপনার PWA কীভাবে ব্যবহারকারীদের অফলাইন-সক্ষম বিষয়বস্তু সম্পর্কে সচেতন করতে পারে যাতে তারা কী উপলব্ধ আছে তা আবিষ্কার করতে এবং দেখতে পারে? কন্টেন্ট ইন্ডেক্সিং এপিআই এই সমস্যার একটি সমাধান। এই সমাধানটির বিকাশকারী-মুখী অংশটি পরিষেবা কর্মীদের জন্য একটি এক্সটেনশন, যা বিকাশকারীদের ব্রাউজার দ্বারা রক্ষণাবেক্ষণ করা একটি স্থানীয় সূচীতে অফলাইন-সক্ষম পৃষ্ঠাগুলির URL এবং মেটাডেটা যুক্ত করতে দেয়৷ সেই বর্ধিতকরণ Chrome 84 এবং পরবর্তীতে উপলব্ধ।

একবার আপনার PWA, সেইসাথে অন্য যেকোন ইনস্টল করা PWAs-এর বিষয়বস্তু দিয়ে সূচী তৈরি হয়ে গেলে, নীচে দেখানো হিসাবে এটি ব্রাউজার দ্বারা প্রদর্শিত হবে।

অতিরিক্তভাবে, যখন কোনো ব্যবহারকারী অফলাইনে আছে তা সনাক্ত করলে Chrome সক্রিয়ভাবে সামগ্রীর সুপারিশ করতে পারে।

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

কর্ম এটি দেখুন

কন্টেন্ট ইন্ডেক্সিং এপিআই-এর অনুভূতি পাওয়ার সর্বোত্তম উপায় হল একটি নমুনা অ্যাপ্লিকেশন চেষ্টা করা।

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

আপনি GitHub এ নমুনা অ্যাপ্লিকেশনটির উত্স দেখতে পারেন।

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

API ব্যবহার করে

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

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

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

একটি প্রস্তাবিত প্যাটার্ন হল একটি "দর্শক" এইচটিএমএল পৃষ্ঠা তৈরি করা যা অন্তর্নিহিত মিডিয়া URL একটি কোয়েরি প্যারামিটার হিসাবে গ্রহণ করতে পারে এবং তারপর ফাইলের বিষয়বস্তু প্রদর্শন করতে পারে, সম্ভাব্য অতিরিক্ত নিয়ন্ত্রণ বা পৃষ্ঠায় সামগ্রী সহ৷

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

ওভারভিউ

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

কন্টেন্ট ইন্ডেক্স করার প্রথম ধাপ হল বর্তমান 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!
}

আপনি যদি একটি ওয়েব পৃষ্ঠার ভিতরে না হয়ে একজন পরিষেবা কর্মী থেকে বিষয়বস্তু সূচীকরণ API-এ কল করেন, আপনি registration মাধ্যমে সরাসরি ServiceWorkerRegistration এ উল্লেখ করতে পারেন৷ এটি ইতিমধ্যেই ServiceWorkerGlobalScope.

সূচক যোগ করা

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

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 currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

একটি এন্ট্রি যোগ করা শুধুমাত্র বিষয়বস্তু সূচক প্রভাবিত করে; এটি ক্যাশে কিছু যোগ করে না।

এজ কেস: আপনার আইকনগুলি একটি fetch হ্যান্ডলারের উপর নির্ভর করলে window প্রসঙ্গ থেকে add() কল করুন

যখন আপনি add() কল করবেন, ক্রোম প্রতিটি আইকনের 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() কল করা শুধুমাত্র সূচককে প্রভাবিত করে। এটি ক্যাশে থেকে কিছু মুছে দেয় না।

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

ব্রাউজার যখন সূচীকৃত বিষয়বস্তু প্রদর্শন করে, তখন এটি একটি ডিলিট মেনু আইটেমের সাথে তার নিজস্ব ইউজার ইন্টারফেস অন্তর্ভুক্ত করতে পারে, যা লোকেদের ইঙ্গিত করার সুযোগ দেয় যে তারা পূর্বে সূচীকৃত বিষয়বস্তু দেখা শেষ করেছে। Chrome 80 এ মুছে ফেলার ইন্টারফেসটি এইভাবে দেখায়:

যখন কেউ সেই মেনু আইটেমটি নির্বাচন করে, আপনার ওয়েব অ্যাপের পরিষেবা কর্মী একটি 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.
});

API ডিজাইন সম্পর্কে প্রতিক্রিয়া

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

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

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

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

https://new.crbug.com এ একটি বাগ ফাইল করুন। যতটা সম্ভব বিস্তারিত অন্তর্ভুক্ত করুন, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদানগুলিকে Blink>ContentIndexing এ সেট করুন।

API ব্যবহার করার পরিকল্পনা করছেন?

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

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

বিষয়বস্তু সূচীকরণের কিছু নিরাপত্তা এবং গোপনীয়তার প্রভাব কী?

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

আনস্প্ল্যাশে ম্যাকসিম কাহারলিটস্কির নায়কের ছবি।