Akses Asinkron ke Cookie HTTP

Victor Costan
Twitter GitHub

Apa itu Cookie Store API?

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

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

Baca penjelasan

Status saat ini

Langkah Status
1. Buat penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
**3. Kumpulkan masukan & iterasi spesifikasi** **Sedang berlangsung**
4. Uji coba origin Dijeda
5. Luncurkan Not started

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 flag ini di command line akan mengaktifkan API secara global di Chrome untuk sesi saat ini.

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

Anda (mungkin) tidak memerlukan cookie

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

Alasan utama untuk menghindari cookie adalah:

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

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

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

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

Jadi, Anda masih membaca artikel ini karena memiliki alasan kuat untuk menggunakan cookie...

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

Perbaikan mudah 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 selesai.

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

// undefined

Amati, jangan polling

Aplikasi populer untuk mengakses cookie dari JavaScript mendeteksi saat pengguna logout dan mengupdate UI. Saat ini, proses ini dilakukan dengan melakukan 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);
  }
});

Menyambut pekerja layanan

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

Berinteraksi dengan cookie berfungsi dengan cara yang sama dalam konteks dokumen dan dalam 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. Membangunkan pekerja layanan bisa menghabiskan banyak biaya, jadi kita harus menjelaskan secara eksplisit perubahan cookie yang diminati pekerja tersebut.

Pada contoh di bawah, aplikasi yang menggunakan IndexedDB untuk meng-cache data pengguna akan memantau perubahan pada cookie sesi, dan menghapus data yang disimpan dalam cache saat pengguna keluar.

// 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 menggunakan API ini, harap beri tahu kami pendapat Anda. Arahkan masukan tentang bentuk API ke repositori spesifikasi, dan laporkan bug implementasi ke komponen Blink>Storage>CookiesAPI Blink.

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

Referensi lainnya