Penyimpanan Bersama dan pembaruan URL Pilih: worklet lintas origin, dan kueri tersimpan

Tara Agyemang
Tara Agyemang
GitHub LinkedIn

Chrome 130 memperkenalkan perubahan pada Shared Storage API untuk memungkinkan penggunaan skrip worklet lintas origin dengan createWorklet() dan addModule(). Kami juga memperkenalkan update pada Select URL API dengan Shared Storage di Chrome 132 dengan dukungan kueri tersimpan.

Diagram yang menunjukkan situs terdaftar dapat menulis jenis data kunci/nilai apa pun ke Penyimpanan Bersama, tetapi pembacaan data dibatasi untuk API output tertentu.
Shared Storage API memungkinkan situs terdaftar menulis jenis data kunci/nilai apa pun ke dalam Shared Storage, tetapi membaca data dibatasi untuk API output tertentu.

Worklet lintas-asal dengan Shared Storage API di Chrome 130

Kami telah memperkenalkan perubahan pada Shared Storage API di Chrome 130 untuk memberi Anda fleksibilitas yang lebih besar saat menggunakan skrip worklet lintas origin.

Yang berubah

Kami telah menghapus batasan origin yang sama untuk addModule() sehingga Anda kini dapat memuat skrip worklet dari origin mana pun. Skrip worklet lintas-asal memungkinkan kasus penggunaan utama seperti menghosting skrip worklet di CDN. Jika skrip worklet memiliki lintas-asal dengan konteks penjelajahan pemanggilan, asal konteks pemanggilan digunakan sebagai asal partisi data untuk mengakses penyimpanan bersama.

Untuk mencocokkan perilaku addModule() baru, dan mengurangi potensi kebingungan, properti dataOrigin telah ditambahkan ke panggilan createWorklet() untuk memungkinkan pembacaan dan penulisan ke partisi data penyimpanan bersama yang berbeda dari konteks penjelajahan yang memanggil. Hal ini memberi Anda kontrol yang lebih terperinci atas penyimpanan bersama origin mana yang diakses oleh setiap worklet, meskipun saat menggunakan skrip worklet lintas origin.

Perubahan yang terjadi

Mulai Chrome 125, skrip lintas origin pihak ketiga di halaman dapat membuat worklet lintas origin tanpa memerlukan iframe lintas origin dengan memanggil createWorklet(url). Sebelumnya, createWorklet(url) menggunakan origin URL skrip (url) sebagai origin partisi data, terlepas dari konteks pemanggilan.

Di Chrome 130, untuk menyesuaikan dengan perilaku addModule() baru, createWorklet() juga menggunakan konteks pemanggilan sebagai asal partisi data default. Untuk terus menggunakan origin URL skrip sebagai origin partisi data, properti baru dataOrigin diperkenalkan agar Anda dapat menetapkan origin partisi data secara eksplisit.

Properti dataOrigin baru menerima "script-origin", yang menetapkan origin partisi data sebagai origin skrip, dan "context-origin" yang menetapkan origin partisi data sebagai origin konteks penjelajahan yang memanggil. Dalam rilis mendatang, kami juga berencana untuk mendukung asal partisi data kustom, tempat skrip worklet dapat mengakses data penyimpanan bersama dari asal arbitrer atas dasar keikutsertaan.

Saat memuat skrip lintas-asal dengan origin data yang ditetapkan ke "script-origin", permintaan untuk skrip yang dikirim dari browser akan menyertakan header "Sec-Shared-Storage-Data-Origin: <origin>". Untuk mengaktifkannya, skrip juga harus menyertakan header respons keikutsertaan "Shared-Storage-Cross-Origin-Worklet-Allowed: ?1".

Cara menggunakan

Jika sudah menggunakan createWorklet() dengan origin skrip sebagai origin partisi data worklet, Anda dapat menetapkan dataOrigin sebagai berikut:

sharedStorage.createWorklet(scriptUrl, {dataOrigin: "script-origin"});

Karena createWorklet() memungkinkan pembuatan partisi data lintas origin dan pembuatan beberapa worklet, sebaiknya Anda bertransisi ke createWorklet() daripada menggunakan addModule().

Kami telah memperbarui dokumentasi developer untuk mencerminkan perubahan ini dan memberikan panduan lebih lanjut.

Kueri tersimpan dengan Select URL API di Chrome 132

Kami memperkenalkan update pada Select URL API dengan Penyimpanan Gabungan di Chrome 132 dengan dukungan kueri tersimpan.

Yang berubah

Select URL API saat ini memiliki dua anggaran per pemuatan halaman yang membatasi jumlah panggilan yang dilakukan ke API pada setiap pemuatan halaman. Kami memperkenalkan kemampuan untuk menyimpan dan menggunakan kembali kueri per halaman. Saat Anda menggunakan kueri tersimpan, anggaran per pemuatan halaman akan ditagih saat kueri tersimpan pertama kali dijalankan, tetapi tidak untuk kueri tersimpan yang dijalankan berikutnya selama pemuatan halaman yang sama.

Cara menerapkan kueri tersimpan

Mulai rilis Chrome 132, Anda dapat menggunakan parameter savedQuery di opsi untuk selectURL() dengan nama kueri:

await sharedStorage.selectURL('experiment', urls, {
  savedQuery: 'control_or_experiment',
  keepAlive: true
});

Gunakan nama savedQuery yang sama untuk setiap panggilan ke selectURL() guna memastikan kueri lanjutan ditagih ke anggaran yang sama.

Kami telah memperbarui dokumentasi untuk mencerminkan perubahan ini dan memberikan detail tambahan tentang anggaran untuk selectURL().

Berinteraksi dan memberikan masukan

Perhatikan bahwa proposal Shared Storage API sedang dalam diskusi dan pengembangan aktif, sehingga dapat berubah sewaktu-waktu.

Kami ingin sekali mendengar pendapat Anda tentang Shared Storage API.

Mendapatkan Info Terbaru

  • Daftar Email: Berlangganan ke daftar email kami untuk mendapatkan info terbaru dan pengumuman terkait Shared Storage API.

Perlu Bantuan?