এইচটিটিপি কুকিজে অ্যাসিঙ্ক্রোনাস অ্যাক্সেস

Victor Costan

কুকি স্টোর API কি?

কুকি স্টোর API পরিষেবা কর্মীদের কাছে HTTP কুকি প্রকাশ করে এবং document.cookie এর একটি অ্যাসিঙ্ক্রোনাস বিকল্প অফার করে৷ API এটি সহজ করে তোলে:

  • অ্যাসিঙ্ক্রোনাসভাবে কুকিজ অ্যাক্সেস করে মূল থ্রেডে জ্যাঙ্ক এড়িয়ে চলুন।
  • কুকিজের জন্য পোলিং এড়িয়ে চলুন, কারণ কুকিতে পরিবর্তন লক্ষ্য করা যায়।
  • পরিষেবা কর্মীদের কাছ থেকে কুকি অ্যাক্সেস করুন।

ব্যাখ্যাকারী পড়ুন

বর্তমান অবস্থা

ধাপ স্ট্যাটাস
1. ব্যাখ্যাকারী তৈরি করুন সম্পূর্ণ
2. স্পেসিফিকেশনের প্রাথমিক খসড়া তৈরি করুন সম্পূর্ণ
**3. প্রতিক্রিয়া সংগ্রহ করুন এবং বিশেষত্বের উপর পুনরাবৃত্তি করুন** **প্রগতিতে আছে**
4. মূল বিচার বিরতি দেওয়া হয়েছে
5. লঞ্চ করুন শুরু হয়নি

আমি কিভাবে async কুকি স্টোর ব্যবহার করব?

মূল ট্রায়াল সক্ষম করুন

স্থানীয়ভাবে এটি চেষ্টা করার জন্য, API কমান্ড লাইনে সক্ষম করা যেতে পারে:

chrome --enable-blink-features=CookieStore

কমান্ড লাইনে এই পতাকাটি পাস করা বর্তমান সেশনের জন্য ক্রোমে বিশ্বব্যাপী API সক্ষম করে।

বিকল্পভাবে, আপনি chrome://flags#enable-experimental-web-platform-features পতাকা সক্ষম করতে পারেন।

আপনার (সম্ভবত) কুকিজ দরকার নেই

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

কুকিজ এড়ানোর প্রধান কারণ হল:

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

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

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

উপরের সমস্ত কারণের জন্য, আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিকে কুকিজ এড়িয়ে চলা উচিত এবং পরিবর্তে একটি সেশন শনাক্তকারীকে IndexedDB- তে সংরক্ষণ করা উচিত এবং নির্দিষ্ট HTTP অনুরোধের শিরোনাম বা বডিতে স্পষ্টভাবে শনাক্তকারী যোগ করা উচিত, ফেচ API এর মাধ্যমে।

বলা হচ্ছে, আপনি এখনও এই নিবন্ধটি পড়ছেন কারণ আপনার কাছে কুকিজ ব্যবহার করার একটি ভাল কারণ রয়েছে...

শ্রদ্ধেয় document.cookie API আপনার অ্যাপ্লিকেশনের জন্য জ্যাঙ্কের একটি মোটামুটি নিশ্চিত উৎস। উদাহরণস্বরূপ, আপনি যখনই document.cookie getter ব্যবহার করেন, ব্রাউজারটিকে জাভাস্ক্রিপ্ট চালানো বন্ধ করতে হবে যতক্ষণ না আপনার অনুরোধ করা কুকি তথ্য না থাকে। এটি একটি প্রসেস হপ বা একটি ডিস্ক রিড নিতে পারে এবং আপনার UI জ্যাঙ্ক করতে পারে৷

এই সমস্যার একটি সহজ সমাধান হল document.cookie গেটার থেকে অ্যাসিঙ্ক্রোনাস কুকি স্টোর API এ স্যুইচ করা।

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

document.cookie সেটার একইভাবে প্রতিস্থাপন করা যেতে পারে। মনে রাখবেন যে cookieStore.set দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি সমাধান হওয়ার পরেই পরিবর্তনটি প্রয়োগ করার গ্যারান্টি দেওয়া হয়।

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

পর্যবেক্ষণ করুন, ভোট দেবেন না

জাভাস্ক্রিপ্ট থেকে কুকিজ অ্যাক্সেস করার জন্য একটি জনপ্রিয় অ্যাপ্লিকেশন ব্যবহারকারী কখন লগ আউট করে তা সনাক্ত করে এবং UI আপডেট করে। এটি বর্তমানে polling document.cookie দ্বারা করা হয়, যা জ্যাঙ্ক প্রবর্তন করে এবং ব্যাটারির জীবনের উপর নেতিবাচক প্রভাব ফেলে৷

কুকি স্টোর API কুকি পরিবর্তনগুলি পর্যবেক্ষণ করার জন্য একটি বিকল্প পদ্ধতি নিয়ে আসে, যার জন্য পোলিং প্রয়োজন হয় না।

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

স্বাগত সেবা কর্মীদের

সিঙ্ক্রোনাস ডিজাইনের কারণে, document.cookie API পরিষেবা কর্মীদের জন্য উপলব্ধ করা হয়নি। কুকি স্টোর API অ্যাসিঙ্ক্রোনাস, এবং তাই পরিষেবা কর্মীদের অনুমতি দেওয়া হয়।

কুকিজের সাথে ইন্টারঅ্যাক্ট করা একইভাবে ডকুমেন্ট প্রেক্ষাপটে এবং পরিষেবা কর্মীদের মধ্যে কাজ করে।

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

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

নীচের উদাহরণে, একটি অ্যাপ্লিকেশন যা ব্যবহারকারীর ডেটা ক্যাশে করতে IndexedDB ব্যবহার করে সেশন কুকিতে পরিবর্তনগুলি মনিটর করে এবং ব্যবহারকারী লগ অফ করলে ক্যাশে করা ডেটা বাতিল করে৷

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

সর্বোত্তম অনুশীলন

শীঘ্রই আসছে.

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

আপনি যদি এই APIটি একবার চেষ্টা করে দেখেন, তাহলে আপনি কী মনে করেন তা আমাদের জানান! অনুগ্রহ করে এপিআই আকৃতির বিষয়ে স্পেসিফিকেশন রিপোজিটরিতে প্রতিক্রিয়া জানান এবং Blink>Storage>CookiesAPI ব্লিঙ্ক কম্পোনেন্টে বাস্তবায়ন বাগ রিপোর্ট করুন।

আমরা বিশেষ করে পারফরম্যান্স পরিমাপ সম্পর্কে জানতে আগ্রহী এবং ব্যাখ্যাকারীতে বর্ণিত বিষয়গুলির বাইরে কেসগুলি ব্যবহার করতে চাই।

অতিরিক্ত সম্পদ