Cập nhật Bộ nhớ dùng chung và Chọn URL: worklet trên nhiều nguồn gốc và truy vấn đã lưu

Tara Agyemang
Tara Agyemang
GitHub LinkedIn

Chrome 130 giới thiệu các thay đổi đối với Shared Storage API (API Bộ nhớ dùng chung) để cho phép sử dụng tập lệnh worklet trên nhiều nguồn gốc bằng createWorklet() và addModule(). Chúng tôi cũng sẽ ra mắt các bản cập nhật cho API Chọn URL bằng Bộ nhớ dùng chung trong Chrome 132 với tính năng hỗ trợ truy vấn đã lưu.

Sơ đồ cho thấy các trang web đã đăng ký có thể ghi mọi loại dữ liệu khoá/giá trị vào Bộ nhớ dùng chung, nhưng việc đọc dữ liệu chỉ được giới hạn ở một số API đầu ra cụ thể.
Shared Storage API cho phép các trang web đã đăng ký ghi mọi loại dữ liệu khoá/giá trị vào Shared Storage, nhưng việc đọc dữ liệu chỉ được phép thực hiện trên các API đầu ra cụ thể.

Worklet nhiều nguồn gốc bằng Shared Storage API trong Chrome 130

Chúng tôi đã đưa ra các thay đổi đối với Shared Storage API trong Chrome 130 để mang lại cho bạn nhiều tính linh hoạt hơn khi làm việc với các tập lệnh worklet trên nhiều nguồn gốc.

Những điểm thay đổi

Chúng tôi đã xoá quy định hạn chế cùng nguồn gốc cho addModule(), vì vậy, giờ đây, bạn có thể tải các tập lệnh worklet từ bất kỳ nguồn gốc nào. Tập lệnh worklet trên nhiều nguồn gốc cho phép các trường hợp sử dụng chính, chẳng hạn như lưu trữ tập lệnh worklet trên CDN. Khi tập lệnh worklet nằm trên nhiều nguồn gốc với ngữ cảnh duyệt web gọi, nguồn gốc của ngữ cảnh gọi được dùng làm nguồn gốc phân vùng dữ liệu để truy cập vào bộ nhớ dùng chung.

Để khớp với hành vi addModule() mới và giảm khả năng nhầm lẫn, thuộc tính dataOrigin đã được thêm vào lệnh gọi createWorklet() để cho phép đọc và ghi vào một phân vùng dữ liệu bộ nhớ dùng chung khác với ngữ cảnh duyệt web gọi. Điều này giúp bạn kiểm soát chi tiết hơn đối với việc mỗi worklet truy cập vào bộ nhớ dùng chung của nguồn gốc nào, ngay cả khi sử dụng tập lệnh worklet trên nhiều nguồn gốc.

Nội dung thay đổi

Kể từ Chrome 125, tập lệnh nhiều nguồn gốc của bên thứ ba trên một trang có thể tạo worklet nhiều nguồn gốc mà không cần iframe nhiều nguồn gốc bằng cách gọi createWorklet(url). Trước đây, createWorklet(url) sử dụng nguồn gốc URL tập lệnh (url) làm nguồn gốc phân vùng dữ liệu, bất kể ngữ cảnh gọi.

Trong Chrome 130, để phù hợp với hành vi addModule() mới, createWorklet() cũng sử dụng ngữ cảnh gọi làm nguồn phân vùng dữ liệu mặc định. Để tiếp tục sử dụng nguồn gốc URL tập lệnh làm nguồn gốc phân vùng dữ liệu, chúng tôi sẽ ra mắt một thuộc tính mới dataOrigin để cho phép bạn đặt nguồn gốc phân vùng dữ liệu một cách rõ ràng.

Thuộc tính dataOrigin mới chấp nhận "script-origin", thuộc tính này đặt nguồn phân vùng dữ liệu làm nguồn của tập lệnh và "context-origin" đặt nguồn phân vùng dữ liệu làm nguồn của ngữ cảnh duyệt web gọi. Trong bản phát hành trong tương lai, chúng tôi cũng dự định hỗ trợ các nguồn gốc phân vùng dữ liệu tuỳ chỉnh, trong đó tập lệnh worklet có thể truy cập vào dữ liệu bộ nhớ dùng chung từ một nguồn gốc tuỳ ý trên cơ sở chọn tham gia.

Khi tải một tập lệnh nhiều nguồn gốc có nguồn gốc dữ liệu được đặt thành "script-origin", yêu cầu cho tập lệnh được gửi từ trình duyệt sẽ bao gồm tiêu đề "Sec-Shared-Storage-Data-Origin: <origin>". Để bật tính năng này, tập lệnh cũng phải bao gồm tiêu đề phản hồi chọn sử dụng "Shared-Storage-Cross-Origin-Worklet-Allowed: ?1".

How to use

Nếu đang sử dụng createWorklet() với nguồn gốc tập lệnh là nguồn gốc phân vùng dữ liệu của công việc, bạn có thể thiết lập dataOrigin như sau:

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

Vì createWorklet() cho phép tạo một phân vùng dữ liệu nhiều nguồn gốc và tạo nhiều worklet, nên bạn nên chuyển sang sử dụng createWorklet() thay vì addModule().

Chúng tôi đã cập nhật tài liệu dành cho nhà phát triển để phản ánh những thay đổi này và cung cấp thêm hướng dẫn.

Truy vấn đã lưu bằng API Chọn URL trong Chrome 132

Chúng tôi sẽ ra mắt các bản cập nhật cho Select URL API (API Chọn URL) bằng Bộ nhớ dùng chung trong Chrome 132 với tính năng hỗ trợ truy vấn đã lưu.

Điều gì sẽ thay đổi

API Chọn URL hiện có hai ngân sách mỗi lần tải trang hạn chế số lượng lệnh gọi được thực hiện đến API trên mỗi lần tải trang. Chúng tôi sẽ ra mắt tính năng lưu và sử dụng lại truy vấn trên mỗi trang. Khi bạn sử dụng một truy vấn đã lưu, ngân sách cho mỗi lượt tải trang sẽ được tính phí trong lần đầu tiên chạy truy vấn đã lưu, nhưng không tính phí cho các lần chạy tiếp theo của truy vấn đã lưu trong cùng một lượt tải trang.

Cách triển khai truy vấn đã lưu

Kể từ bản phát hành Chrome 132, bạn có thể sử dụng thông số savedQuery trong các tuỳ chọn cho selectURL() với tên của truy vấn:

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

Sử dụng cùng một tên savedQuery cho mọi lệnh gọi đến selectURL() để đảm bảo rằng các truy vấn tiếp theo được tính vào cùng một ngân sách.

Chúng tôi đã cập nhật tài liệu để phản ánh những thay đổi này và cung cấp thêm thông tin chi tiết về việc lập ngân sách cho selectURL().

Tương tác và chia sẻ ý kiến phản hồi

Xin lưu ý rằng đề xuất về API Bộ nhớ dùng chung đang được thảo luận và phát triển tích cực, do đó có thể thay đổi.

Chúng tôi rất mong được nghe ý kiến của bạn về Shared Storage API.

Luôn nắm thông tin mới nhất

Bạn cần được trợ giúp?