在日常的開發(fā)中，經(jīng)常需要在用戶關(guān)閉頁面或?qū)Ш街疗渌撁鏁r(shí)，向服務(wù)器發(fā)送重要的數(shù)據(jù)請求。然而，確保這些數(shù)據(jù)請求能夠安全、完整地發(fā)送到后端一直是一個挑戰(zhàn)。近日，Chrome 瀏覽器正在積極引入一個革命性的 JavaScript API——fetchLater()。這個全新的 API 旨在徹底簡化關(guān)閉頁面時(shí)的數(shù)據(jù)發(fā)送過程，確保即使在頁面關(guān)閉后或用戶離開的情況下，請求也能在未來某個時(shí)刻被安全、可靠地發(fā)出。本文就來詳細(xì)了解這個超實(shí)用的全新 API。

注：fetchLater() 已在 Chrome 中提供，用于在版本 121（2024 年 1 月發(fā)布）開始的原始試驗(yàn)中供真實(shí)用戶測試，該試驗(yàn)將持續(xù)到 Chrome 126（2024 年 7 月）。

以前這樣寫

在傳統(tǒng)的做法中，開發(fā)者常常依賴pagehide、visibilitychange、unload、beforeunload 事件來捕捉頁面卸載的時(shí)機(jī)，并借助navigator.sendBeacon()方法或使用帶有keepalive選項(xiàng)的fetch()來發(fā)送數(shù)據(jù)。

當(dāng)頁面卸載時(shí)，pagehide事件和 unload 事件會被觸發(fā)。同時(shí)，visibilitychange事件會在頁面的可見性發(fā)生變化時(shí)觸發(fā)，這也可以用來捕捉頁面卸載的情況。當(dāng)用戶即將離開當(dāng)前頁面（例如，嘗試關(guān)閉瀏覽器標(biāo)簽頁或刷新頁面）時(shí)，beforeunload 事件被觸發(fā)。

window.addEventListener('pagehide', (event) => {
  sendDataToServer();  
});  
  
window.addEventListener('visibilitychange', (event) => {
  if (document.visibilityState === 'hidden') {  
    sendDataToServer();  
  }  
});

addEventListener("unload", (event) => {
  sendDataToServer();  
})

addEventListener("beforeunload", (event) => {
  sendDataToServer();  
})

navigator.sendBeacon()方法用于異步地向服務(wù)器發(fā)送數(shù)據(jù)，即使頁面正在卸載或不可見，也能保證數(shù)據(jù)被發(fā)送。這對于確保數(shù)據(jù)能夠可靠地到達(dá)服務(wù)器非常有用。

function sendDataToServer() {  
  var url = 'https://example.com/log';  
  var data = new Blob(['some data'], {type: 'application/json'});  
    
  navigator.sendBeacon(url, data);  
}

當(dāng)然，也可以使用fetch()的keepalive選項(xiàng)來確保請求在頁面卸載后繼續(xù)發(fā)送。不過需要注意的是，keepalive選項(xiàng)的支持情況可能因?yàn)g覽器而異。

function sendDataToServer() {  
  var url = 'https://example.com/log';  
  var data = { someKey: 'someValue' };  
    
  fetch(url, {  
    method: 'POST',  
    body: JSON.stringify(data),  
    headers: {  
      'Content-Type': 'application/json'  
    },  
    keepalive: true // 嘗試在頁面卸載后繼續(xù)發(fā)送請求  
  });  
}

然而，pagehide、visibilitychange、unload、beforeunload 事件都存在可靠性問題。數(shù)據(jù)顯示，即使多個事件一起使用，大約有 10% 的數(shù)據(jù)沒有被發(fā)送就消失了。

妙用 fetchLater()

fetchLater() 的功能正如其名：它要求瀏覽器在未來某個時(shí)刻確保發(fā)送請求，即使頁面已經(jīng)關(guān)閉或用戶導(dǎo)航到其他頁面。

fetchLater() 的語法如下：

const fetchLaterResult = fetchLater(request, options);

fetchLater() 接受兩個參數(shù)，與 fetch() 的參數(shù)相同：

• request：可以是一個字符串形式的 URL，或者是一個 Request 實(shí)例。
• options：可選項(xiàng)，它擴(kuò)展了 fetch() 中的 options，并增加了一個名為 activateAfter 的超時(shí)設(shè)置。

fetchLater() 返回一個 FetchLaterResult 對象，它目前只包含一個只讀屬性 activated。當(dāng)指定的“稍后”時(shí)間點(diǎn)到來且請求已經(jīng)發(fā)出時(shí)，activated 屬性會被設(shè)置為 true。需要注意的是，對于 fetchLater() 發(fā)出的請求，其任何響應(yīng)都不會被保留。

request

在使用時(shí)，最簡單的形式是直接傳入一個 URL 作為請求：

fetchLater('/endpoint/');

并且，fetchLater() 繼承了 fetch() 的靈活性，允許用戶為其請求設(shè)置多種選項(xiàng)。這些選項(xiàng)包括自定義頭部信息、控制憑據(jù)的處理方式、指定 POST 請求體，以及利用 AbortController 在必要時(shí)取消請求。

fetchLater('/endpoint/', {
  method: 'GET',
  cache: 'no-store',
  mode: 'same-origin',
  headers: {Authorization: 'SUPER_SECRET'},
});

options

fetchLater() 的options 參數(shù)擴(kuò)展了 fetch() 的選項(xiàng)，新增了 activateAfter 超時(shí)設(shè)置，使得請求能夠在設(shè)定的超時(shí)時(shí)間后或頁面卸載時(shí)（兩者中較早發(fā)生者）自動觸發(fā)。

例如，如果有一個應(yīng)用，用戶通常會在整個工作日中保持開啟狀態(tài)。在這種情況下，您可以設(shè)置一個一小時(shí)的超時(shí)時(shí)間，以確保在分析數(shù)據(jù)時(shí)擁有更精細(xì)的粒度，同時(shí)確保即使用戶在這一小時(shí)內(nèi)任何時(shí)候退出應(yīng)用，也能夠成功發(fā)送數(shù)據(jù)。隨后，您可以為下一個小時(shí)的分析數(shù)據(jù)設(shè)置新的 fetchLater() 請求，以確保數(shù)據(jù)的持續(xù)收集和發(fā)送。

const hourInMilliseconds = 60 * 60 * 1000;
fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});

嘗試 fetchLater()

目前，fetchLater() 仍處于實(shí)驗(yàn)狀態(tài)，現(xiàn)在可以在 chrome://flags/#enable-experimental-web-platform-features 中啟用 Experimental Web Platform 功能標(biāo)志來啟用 fetchLater() API。

圖片