Beacon API

User Tracking

https://caniuse.com/#feat=beacon

Question & Solution

Beacon API 不會延緩網頁卸載，不會嚴重影響用戶體驗。

為了解決網頁卸載時，異步請求無法成功的問題，瀏覽器特別實現了一個 Beacon API，允許異步請求脫離當前主線程，放到瀏覽器進程里面發出，這樣可以保證一定能發出。

navigator.sendBeacon()方法可以保證，異步請求一定會發出；
第一個參數是請求的網址，第二個參數是發送的數據；

Beacon API 發出的是 POST 請求。

window.addEventListener('click', function (event) {
  navigator.sendBeacon('/graphql/api/v3/logs', 'event=click');
});

https://api.xgqfrms.xyz/graphql/api/v3/logs

https://cdn.xgqfrms.xyz/

應用場景

埋點

異常處理

Sentry

數據收集

數據上報

性能監控

AMP

IE 不支持

1px 透明 gif 圖片

1. 字節小, 43 bytes

2. 支持跨域, 兼容場景多，零配置

前端監控平台 & 架構

https://www.cnblogs.com/xgqfrms/p/13090118.html

Web Performance API

window.performance;

performance.timing

performance.navigation

performance.memory

performance.getEntries();


performance.now(); 
performance.toJSON();

Navigation Timing API

https://www.cnblogs.com/xgqfrms/p/13219596.html

https://www.w3.org/TR/beacon/

W3C Candidate Recommendation 13 April 2017

https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

http://www.ruanyifeng.com/blog/2019/04/user-tracking.html

https://www.sitepoint.com/introduction-beacon-api/

https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

https://golb.hplar.ch/2018/09/beacon-api.html

Transparent.gif

Transparent.gif ‎(1 × 1 pixels, file size: 42 bytes, MIME type: image/gif)

https://commons.wikimedia.org/wiki/File:Transparent.gif

https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif

Bluetooth low energy (BLE) beacons with Eddystone,

具有Eddystone的藍牙低功耗（BLE）信標

https://developers.google.com/beacons

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---