[小菜一碟] 利用 window.navigator.sendBeacon() 在使用者關閉網頁視窗時發送記錄

我們在追蹤客戶端行為時,多多少少會遇到一個場景,就是要在使用者把網頁視窗關閉時,將記錄送回伺服器端,做法上我們可能會想在網頁視窗觸發 unload 事件的時候,發送 AJAX Request 回伺服器端就好了,但是這個方法在一些瀏覽器上(比如:Firefox)不 Work,取而代之 Web APIs 提供了更好的 API - sendBeacon()

傳統 AJAX

我用 jQuery 的 $.ajax(),在觸發 window.onunload 事件時,向 /user-close-window 發送 POST Request,藉此來記錄使用者結束瀏覽的時間點。

我們很快就會發現,它在某些瀏覽器上並不 Work,原因在於網頁視窗在關閉時,有可能我們的 AJAX 還在跟伺服器建立連線,或者是後端伺服器收到請求還在處理中,此時連線突然被關閉了,作業也就跟著中止了,而這個要不要保持連線的動作完全取決於瀏覽器有沒有實作?

我們做個實驗,假定我們在 UserCloseWindow() 方法中,處理記錄需要花 0.1 秒,0.1 秒後在偵錯視窗印出 "user-close-window" 字樣,以證明記錄處理完畢。

結果在 Chrome 上伺服器成功收到 Request 並處理完畢,而在 Firefox 上則沒有反應。

sendBeacon()

sendBeacon() 則是專為分析跟診斷而生的 API,目前基本上主流的瀏覽器都有實作,既然是標準,只要有實作的瀏覽器應該行為是一致的(Safari 我不敢保證),所以我們改用 sendBeacon() 來傳送記錄就萬無一失了。

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學