網站需求要在關閉分頁、瀏覽器後,將用戶登出。因此需要
1.有個事件監聽,能在各大 PC、Mobile 瀏覽器在關閉分頁或瀏覽器後執行程式
2.該程式要能成功打 API 告知後端該用戶要登出

踩坑踩很久,先分享一下找到的文章,快速出坑

首先第一篇發送 HTTP Request 諸多方法,除了作者提到 Service Worker 本身比較麻煩,我看了文件還真是很麻煩,故沒有測
其他測過結果 Beacon API 瀏覽器相容最好,因此有此需求,請直接用它吧。

再來分享事件監聽我嘗試過下列寫法,電腦版 Safari、Chrome、Firefox、手機版 Chrome、Firefox 都能生效,
唯獨手機版 Safari 不行(IOS 版本12、14 都測過)。這網站可以測事件有無觸發,測完放棄治療IOS Safari。

// let isIOS = navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i);
// eventName = isIOS ? 'pagehide' : 'beforeunload'

// 電腦版 Safari 能生效
window.addEventListener('pagehide', e => this.beforeUnload()); 
// 電腦版 Safari、Chrome、Firefox 能生效
window.addEventListener('beforeunload' 或 'unload', e => this.beforeUnload());
// 手機版 Chrome、Firefox 能生效
document.addEventListener('visibilitychange', e => this.beforeUnload()); 

再來第二篇 Beacon API 照可能會碰到跨域問題,而開發環境已經設 * 還是不能跑,參考第四篇得到以下改法可以參考一下

let blog = new Blob(
  [
    JSON.stringify({
      Status: status,
      Account: account,
    }),
  ],
  // { type: 'application/json; charset=UTF-8' }
  { type: 'text/plain; charset=UTF-8' }
);

navigator.sendBeacon(
  apiHost + '/api/demoUpdateLoginStatus',
  blog
);

以上參考。