Akses Asinkron ke Cookie HTTP

Victor Costan
X GitHub

Apa itu Cookie Store API?

Cookie Store API mengekspos cookie HTTP ke pekerja layanan dan menawarkan alternatif asinkron untuk document.cookie. API ini memudahkan Anda untuk:

  • Hindari jank di thread utama, dengan mengakses cookie secara asinkron.
  • Hindari polling untuk cookie, karena perubahan pada cookie dapat diamati.
  • Mengakses cookie dari pekerja layanan.

Baca penjelasan

Status saat ini

Langkah Status
1. Membuat penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
**3. Mengumpulkan masukan & melakukan iterasi pada spesifikasi** **Dalam proses**
4. Uji coba origin Dijeda
5. Luncurkan Belum dimulai

Bagaimana cara menggunakan penyimpanan cookie asinkron?

Mengaktifkan uji coba origin

Untuk mencobanya secara lokal, API dapat diaktifkan di command line:

chrome --enable-blink-features=CookieStore

Meneruskan tanda ini di command line akan mengaktifkan API secara global di Chrome untuk sesi saat ini.

Atau, Anda dapat mengaktifkan tanda #enable-experimental-web-platform-features di chrome://flags.

Anda (mungkin) tidak memerlukan cookie

Sebelum membahas API baru, saya ingin menyatakan bahwa cookie masih merupakan primitif penyimpanan sisi klien terburuk platform Web, dan masih harus digunakan sebagai upaya terakhir. Ini bukan suatu kebetulan - cookie adalah mekanisme penyimpanan sisi klien pertama Web, dan kami telah belajar banyak sejak saat itu.

Alasan utama untuk menghindari cookie adalah:

  • Cookie memasukkan skema penyimpanan Anda ke dalam API back-end Anda. Setiap permintaan HTTP membawa snapshot jar cookie. Hal ini memudahkan engineer back-end untuk memperkenalkan dependensi pada format cookie saat ini. Setelah hal ini terjadi, frontend tidak dapat mengubah skema penyimpanannya tanpa men-deploy perubahan yang sesuai ke backend.

  • Cookie memiliki model keamanan yang kompleks. Fitur platform Web modern mengikuti kebijakan origin yang sama, yang berarti bahwa setiap aplikasi mendapatkan sandbox-nya sendiri, dan sepenuhnya independen dari aplikasi lain yang mungkin dijalankan pengguna. Cakupan cookie menyebabkan cerita keamanan yang jauh lebih kompleks, dan hanya mencoba merumuskannya akan menggandakan ukuran artikel ini.

  • Cookie memiliki biaya performa yang tinggi. Browser harus menyertakan snapshot cookie Anda dalam setiap permintaan HTTP, sehingga setiap perubahan pada cookie harus disebarkan di seluruh stack penyimpanan dan jaringan. Browser modern memiliki penerapan penyimpanan cookie yang sangat dioptimalkan, tetapi kita tidak akan pernah dapat membuat cookie seefisien mekanisme penyimpanan lainnya, yang tidak perlu berkomunikasi dengan stack jaringan.

Untuk semua alasan di atas, aplikasi Web modern harus menghindari cookie dan sebagai gantinya menyimpan ID sesi ke dalam IndexedDB, dan secara eksplisit menambahkan ID ke header atau isi permintaan HTTP tertentu, melalui fetch API.

Meskipun demikian, Anda masih membaca artikel ini karena memiliki alasan yang baik untuk menggunakan cookie...

API document.cookie yang sudah lama ada adalah sumber jank yang cukup terjamin untuk aplikasi Anda. Misalnya, setiap kali Anda menggunakan pengambil document.cookie, browser harus berhenti mengeksekusi JavaScript hingga memiliki informasi cookie yang Anda minta. Tindakan ini dapat memerlukan hop proses atau pembacaan disk, dan akan menyebabkan UI Anda mengalami jank.

Perbaikan langsung untuk masalah ini adalah beralih dari pengambil document.cookie ke Cookie Store API asinkron.

await cookieStore.get('session_id');

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

Penyetel document.cookie dapat diganti dengan cara yang sama. Perlu diingat bahwa perubahan hanya dijamin akan diterapkan setelah Promise yang ditampilkan oleh cookieStore.set diselesaikan.

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

// undefined

Amati, jangan polling

Aplikasi populer untuk mengakses cookie dari JavaScript mendeteksi saat pengguna logout, dan memperbarui UI. Hal ini saat ini dilakukan dengan polling document.cookie, yang menyebabkan jank dan berdampak negatif pada masa pakai baterai.

Cookie Store API menghadirkan metode alternatif untuk mengamati perubahan cookie, yang tidak memerlukan polling.

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

Selamat datang pekerja layanan

Karena desain sinkron, document.cookie API tidak tersedia untuk pekerja layanan. Cookie Store API bersifat asinkron, sehingga diizinkan di pekerja layanan.

Interaksi dengan cookie berfungsi dengan cara yang sama dalam konteks dokumen dan di pekerja layanan.

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

Namun, mengamati perubahan cookie sedikit berbeda pada pekerja layanan. Mengaktifkan pekerja layanan bisa sangat mahal, jadi kita harus menjelaskan perubahan cookie yang diminati pekerja tersebut secara eksplisit.

Pada contoh di bawah, aplikasi yang menggunakan IndexedDB untuk menyimpan data pengguna ke dalam cache memantau perubahan pada cookie sesi, dan menghapus data yang di-cache saat pengguna logout.

// 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;
    }
  }
});

Praktik terbaik

Segera hadir.

Masukan

Jika Anda mencoba API ini, beri tahu kami pendapat Anda. Berikan masukan tentang bentuk API ke repositori spesifikasi, dan laporkan bug implementasi ke komponen Blink Blink>Storage>CookiesAPI.

Kami sangat tertarik untuk mempelajari pengukuran performa dan kasus penggunaan di luar yang diuraikan dalam penjelasan.

Referensi lainnya