Javascript：關閉分頁、瀏覽器事件動作

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

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

• 於 window.onbeforeunload 發送HTTP Request
• Beacon API：在網頁關掉的那一刻成功送出API
• caniuse.com
• sendBeacon API not working temporarily due to security issue, any workaround?

首先第一篇發送 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
);

以上參考。