دسترسی ناهمزمان به کوکی های HTTP

Victor Costan
X GitHub

Cookie Store API چیست؟

Cookie Store API کوکی‌های HTTP را در اختیار کارکنان خدمات قرار می‌دهد و جایگزینی ناهمزمان برای document.cookie ارائه می‌دهد. API این کار را آسان تر می کند:

  • با دسترسی ناهمزمان به کوکی ها، از jank در رشته اصلی اجتناب کنید.
  • از نظرسنجی برای کوکی ها خودداری کنید، زیرا تغییرات کوکی ها قابل مشاهده است.
  • به کوکی‌های کارگران خدمات دسترسی پیدا کنید.

توضیح دهنده را بخوانید

وضعیت فعلی

مرحله وضعیت
1. توضیح دهنده ایجاد کنید کامل شود
2. پیش نویس اولیه مشخصات را ایجاد کنید کامل شود
**3. جمع آوری بازخورد و تکرار در مورد مشخصات ** **در حال انجام**
4. آزمایش مبدا مکث کرد
5. راه اندازی کنید شروع نشده است

چگونه از فروشگاه کوکی async استفاده کنم؟

آزمایش اولیه را فعال کنید

برای امتحان کردن آن به صورت محلی، API را می توان در خط فرمان فعال کرد:

chrome --enable-blink-features=CookieStore

ارسال این پرچم در خط فرمان، API را به صورت سراسری در کروم برای جلسه فعلی فعال می‌کند.

همچنین، می‌توانید پرچم #enable-experimental-web-platform-features در chrome://flags فعال کنید.

شما (احتمالا) به کوکی ها نیاز ندارید

قبل از ورود به API جدید، می‌خواهم بیان کنم که کوکی‌ها همچنان بدترین ذخیره‌سازی اولیه در پلتفرم وب هستند و همچنان باید به عنوان آخرین راه‌حل استفاده شوند. این یک تصادف نیست - کوکی ها اولین مکانیسم ذخیره سازی سمت سرویس گیرنده وب بودند و از آن زمان تاکنون چیزهای زیادی یاد گرفته ایم.

دلایل اصلی اجتناب از کوکی ها عبارتند از:

  • کوکی ها طرح ذخیره سازی شما را به API پشتیبان شما می آورند. هر درخواست HTTP یک عکس فوری از شیشه کوکی دارد. این امر باعث می‌شود مهندسان بک‌اند وابستگی‌هایی را به قالب کوکی فعلی معرفی کنند. هنگامی که این اتفاق می‌افتد، بخش جلویی شما نمی‌تواند طرح فضای ذخیره‌سازی خود را بدون اعمال تغییر منطبق در بک‌اند تغییر دهد.

  • کوکی ها یک مدل امنیتی پیچیده دارند. ویژگی‌های پلتفرم وب مدرن از خط مشی مبدأ یکسانی پیروی می‌کنند، به این معنی که هر برنامه جعبه سند مخصوص خود را دارد و کاملاً مستقل از سایر برنامه‌هایی است که کاربر ممکن است در حال اجرا باشد. دامنه‌های کوکی داستان امنیتی بسیار پیچیده‌تری را ایجاد می‌کنند، و صرفاً تلاش برای خلاصه‌سازی است که حجم این مقاله را دو برابر می‌کند.

  • کوکی ها هزینه های عملکرد بالایی دارند. مرورگرها باید در هر درخواست HTTP یک عکس فوری از کوکی‌های شما بگنجانند، بنابراین هر تغییری در کوکی‌ها باید در فضای ذخیره‌سازی و پشته‌های شبکه منتشر شود. مرورگرهای مدرن پیاده‌سازی‌های فروشگاه کوکی‌ها را بسیار بهینه‌سازی کرده‌اند، اما ما هرگز نمی‌توانیم کوکی‌ها را به اندازه مکانیسم‌های ذخیره‌سازی دیگر که نیازی به صحبت با پشته شبکه ندارند، کارآمد کنیم.

به دلایل بالا، برنامه‌های کاربردی وب مدرن باید از کوکی‌ها اجتناب کنند و در عوض یک شناسه جلسه را در IndexedDB ذخیره کنند و به صراحت شناسه را از طریق واکشی API به سربرگ یا بدنه درخواست‌های HTTP خاص اضافه کنند.

همانطور که گفته شد، شما هنوز در حال خواندن این مقاله هستید زیرا دلیل خوبی برای استفاده از کوکی ها دارید...

API محترم document.cookie یک منبع کاملاً تضمینی جاک برای برنامه شما است. به عنوان مثال، هر زمان که از document.cookie getter استفاده می کنید، مرورگر باید اجرای جاوا اسکریپت را متوقف کند تا زمانی که اطلاعات کوکی درخواستی شما را در اختیار داشته باشد. این می تواند یک پرش فرآیند یا یک دیسک خوانده شود و باعث jank شدن رابط کاربری شما شود.

یک راه حل ساده برای این مشکل جابجایی از document.cookie getter به 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

توجه کنید، نظرسنجی نکنید

یک برنامه محبوب برای دسترسی به کوکی‌ها از جاوا اسکریپت، تشخیص زمان خروج کاربر و به‌روزرسانی رابط کاربری است. این کار در حال حاضر توسط polling document.cookie انجام می‌شود که jank را معرفی می‌کند و تأثیر منفی بر عمر باتری دارد.

Cookie Store 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);
  }
});

خوش آمدید کارگران خدمات

به دلیل طراحی همزمان، API document.cookie در دسترس کارکنان خدمات قرار نگرفته است. 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 را امتحان کردید، لطفاً نظر خود را با ما در میان بگذارید! لطفاً بازخورد شکل API را به مخزن مشخصات هدایت کنید و اشکالات پیاده سازی را به مؤلفه Blink>Storage>CookiesAPI Blink گزارش دهید.

ما به خصوص علاقه مندیم که در مورد اندازه گیری های عملکرد و موارد استفاده فراتر از موارد ذکر شده در توضیح بیشتر بیاموزیم.

منابع اضافی