Thông thường, một trang hoặc ứng dụng sẽ có dữ liệu phân tích hoặc dữ liệu khác chưa được gửi vào thời điểm người dùng đóng trang/ứng dụng đó. Để ngăn ngừa mất dữ liệu, một số trang web sử dụng lệnh gọi đồng bộ đến XMLHttpRequest() để giữ cho trang hoặc ứng dụng mở cho đến khi dữ liệu của trang/ứng dụng được chuyển đến máy chủ. Không chỉ có những cách tốt hơn để lưu dữ liệu, mà kỹ thuật này còn tạo ra trải nghiệm người dùng kém bằng cách trì hoãn việc đóng trang trong tối đa vài giây.
Phương pháp này cần phải thay đổi và các trình duyệt đang phản hồi. Thông số kỹ thuật XMLHttpRequest()
đã được lên kế hoạch ngừng sử dụng và
loại bỏ. Chrome 80 thực hiện bước đầu tiên bằng cách không cho phép các lệnh gọi đồng bộ bên trong một số trình xử lý sự kiện, cụ thể là beforeunload, unload, pagehide và visibilitychange khi các trình xử lý này được kích hoạt trong quá trình đóng. WebKit cũng đã triển khai một cam kết để thực hiện
thay đổi hành vi tương tự gần đây.
Tôi sẽ mô tả ngắn gọn các lựa chọn dành cho những người cần thời gian để cập nhật trang web của họ và nêu ra các phương án thay thế cho XMLHttpRequest().
Tạm thời chọn không tham gia
Chrome muốn dành thời gian cho nhà phát triển để loại bỏ sự phụ thuộc vào XMLHttpRequest(), vì vậy, chúng tôi đã cung cấp các lựa chọn tạm thời chọn không tham gia.
Tham gia bản dùng thử theo nguyên gốc. Với lựa chọn này, bạn sẽ thêm một mã thông báo dành riêng cho nguyên gốc vào tiêu đề trang để cho phép các lệnh gọi XMLHttpRequest() đồng bộ. Lựa chọn này sẽ kết thúc ngay trước khi Chrome 89 được phát hành, vào khoảng tháng 3 năm 2021. Khách hàng doanh nghiệp của Chrome cũng có thể sử dụng cờ chính sách AllowSyncXHRInPageDismissal, cờ này sẽ kết thúc cùng lúc.
Phương án thay thế
Bất kể bạn gửi dữ liệu trở lại máy chủ như thế nào, tốt nhất là bạn nên tránh đợi cho đến khi trang tải xuống để gửi tất cả dữ liệu cùng một lúc. Ngoài việc tạo ra trải nghiệm người dùng kém, việc tải xuống không đáng tin cậy trên các trình duyệt hiện đại và có nguy cơ mất dữ liệu nếu có sự cố xảy ra. Cụ thể, các sự kiện tải xuống thường không kích hoạt trên trình duyệt dành cho thiết bị di động
vì có nhiều cách để đóng một thẻ hoặc trình duyệt trên hệ điều hành di động mà không cần kích hoạt sự kiện unload.
Với XMLHttpRequest(), việc sử dụng tải trọng nhỏ là một lựa chọn. Giờ đây, đây là một yêu cầu. Cả hai phương án thay thế đều có giới hạn tải lên là 64 KB cho mỗi ngữ cảnh, theo yêu cầu của thông số kỹ thuật.
Tìm nạp duy trì hoạt động
Fetch API
cung cấp một phương tiện mạnh mẽ để xử lý các tương tác với máy chủ và một giao diện
nhất quán để sử dụng trên các API nền tảng
khác nhau. Trong số các lựa chọn của API này có keepalive, đảm bảo rằng một yêu cầu tiếp tục cho dù trang tạo yêu cầu đó có mở hay không:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
Phương thức fetch() có ưu điểm là kiểm soát tốt hơn những gì được gửi đến máy chủ. Điều mà tôi không trình bày trong ví dụ là fetch() cũng trả về một lời hứa phân giải bằng đối tượng Response. Vì tôi đang cố gắng tránh việc tải xuống trang, nên tôi đã chọn không làm gì với đối tượng này.
SendBeacon()
SendBeacon()
thực sự sử dụng Fetch API ở chế độ nền, đó là lý do API này có cùng giới hạn tải trọng 64 KB và cũng đảm bảo rằng một yêu cầu tiếp tục sau khi trang tải xuống. Ưu điểm chính của API này là tính đơn giản. API này cho phép bạn gửi dữ liệu bằng một dòng mã duy nhất:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
Kết luận
Với việc ngày càng có nhiều
fetch()
trên các trình duyệt, XMLHttpRequest() hy vọng sẽ bị loại bỏ
khỏi nền tảng web. Các nhà cung cấp trình duyệt đều đồng ý rằng API này nên bị loại bỏ, nhưng sẽ mất thời gian. Việc ngừng sử dụng một trong những trường hợp sử dụng tệ nhất là bước đầu tiên giúp cải thiện trải nghiệm người dùng cho mọi người.