減少延遲導覽
網頁或應用程式在使用者關閉時,通常會有未提交的 Analytics 或其他資料。為避免資料遺失,部分網站會使用對 XMLHttpRequest()
的同步呼叫,在資料傳送至伺服器前,保持網頁或應用程式處於開啟狀態。除了有更好的方式來儲存資料,這項技巧還會延遲關閉網頁,最多延遲數秒,造成不好的使用者體驗。
這種做法需要改變,而瀏覽器也正在做出回應。XMLHttpRequest()
規格已淘汰並移除。Chrome 80 會採取第一步驟,禁止在多個事件處理常式中進行同步呼叫,特別是 beforeunload
、unload
、pagehide
和 visibilitychange
,如果這些事件處理常式在關閉時觸發,WebKit 最近也推出了實作相同行為變更的提交內容。
本文將簡要說明需要時間更新網站的使用者可用的選項,並概略說明 XMLHttpRequest()
的替代方案。
暫時選擇退出
Chrome 不想輕易關閉 XMLHttpRequest()
,因此提供幾種暫時性的選擇退出選項。對於網際網路上的網站,可使用原始試用版。您可以利用這項功能,在網頁標頭中加入特定來源的符記,啟用同步 XMLHttpRequest()
呼叫。這個選項將於 Chrome 89 推出前不久 (2021 年 3 月某個時間) 終止。Chrome 企業版客戶也可以使用 AllowSyncXHRInPageDismissal
政策旗標,這項功能也會在同一時間結束。
替代方案
無論您如何將資料傳回伺服器,都最好避免等到頁面卸載後才一次傳送所有資料。除了造成不佳的使用者體驗之外,在現代瀏覽器上,卸載功能也不可靠,而且如果發生錯誤,可能會導致資料遺失。具體來說,卸載事件通常不會在行動瀏覽器上觸發,因為在行動作業系統上,有許多關閉分頁或瀏覽器的方式,而不會觸發 unload
事件。XMLHttpRequest()
使用小酬載是一種選擇。這項要求現在已是必要條件。根據規格要求,這兩種替代方案的上傳限制為每個情境 64 KB。
擷取保持運作
Fetch API 提供可靠的處理伺服器互動方式,以及一致的介面,可在不同平台 API 中使用。其中的選項之一是 keepalive
,可確保要求持續進行,無論發出要求的網頁是否仍處於開啟狀態:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
fetch()
方法的優點是可進一步控管傳送至伺服器的內容。在範例中沒有顯示的是,fetch()
也會傳回承諾,並以 Response
物件解析。由於我試圖避免頁面卸載,因此選擇不對其採取任何行動。
SendBeacon()
SendBeacon()
實際上會在幕後使用 Fetch API,因此會受到相同的 64 KB 酬載限制,並確保在頁面卸載後繼續要求。其主要優點是簡單易用。您可以使用一行程式碼提交資料:
window.addEventListener('unload', {
navigator.sendBeacon('/siteAnalytics', getStatistics());
}
結論
隨著fetch()
在各瀏覽器的支援度提升,XMLHttpRequest()
或許會在某個時間點從網路平台移除。瀏覽器供應商同意應移除這項功能,但這需要時間。停用最糟糕的用途之一,是改善所有使用者體驗的第一步。
相片來源:Matthew Hamilton 在 Unsplash 網站上提供