Beacon API All In One

Beacon API

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

navigator.sendBeacon(url, data);


window.addEventListener("unload", function logData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
xhr.send(analyticsData);
}); window.addEventListener("unload", function logData() {
navigator.sendBeacon("/log", analyticsData);
});
window.onsubmit = function send_analytics() {
var data = JSON.stringify({
location: location.href,
time: Date()
}); navigator.sendBeacon('/analytics', data);
};

window.onload = window.onunload = function analytics(event) {
if (!navigator.sendBeacon) return; var url = "https://example.com/analytics";
// Create the data to send
var data = "state=" + event.type + "&location=" + location.href; // Send the beacon
var status = navigator.sendBeacon(url, data); // Log the data and result
console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};

demo

https://developer.aliyun.com/article/752954

refs

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

Beacon

W3C Candidate Recommendation 13 April 2017

https://w3c.github.io/beacon/#sendbeacon-method



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


Beacon API All In One的更多相关文章

  1. 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包

    使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...

  2. Beacon API

    Beacon API User Tracking https://caniuse.com/#feat=beacon Question & Solution Beacon API 不会延缓网页卸 ...

  3. html5统计数据上报API:SendBeacon

    公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...

  4. Web Performance API

    Web Performance API 性能监测/性能优化 https://developer.mozilla.org/en-US/docs/Web/API/Performance https://d ...

  5. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解

    系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...

  6. pagehide event & sendBeacon

    pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sen ...

  7. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  8. 前端监控平台 & 架构

    前端监控平台 & 架构 1px 透明的 gif 字节小, 43 bytes 支持跨域, 兼容场景多,零配置 https://en.wikipedia.org/wiki/GIF demo htt ...

  9. SDK & 埋点 & user behavior tracker

    SDK & 埋点 & user behavior tracker 同一个 SDK ,根据不同的应用市场, 分别进行统计分析 ? https://www.umeng.com/ user ...

随机推荐

  1. java native:Java本地方法调用(jni方式)

    https://www.cnblogs.com/zh1164/p/6283831.html

  2. windows命令行关闭IE代理

    打开:reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings" /v ProxyEnab ...

  3. okhttp踩坑

    ResponseBody.string()   平常我们用的客户端http调用工具一般是RestTemplate,HttpClient,okhttp,以前使用过前两者,没咋接触过okhttp,我看公司 ...

  4. JVM 线上故障排查

    JVM 线上故障排查 Linux 1.1 CPU 1.2 内存 1.3 存储 1.4 网络 一.CPU 飚高 寻找原因 二.内存问题排查 三.一般排查问题的方法 四.应用场景举例 4.1 怎么查看某个 ...

  5. Spring Boot:定时任务与图片压缩处理

    一.定时任务 1.创建定时任务 2.@Scheduled 二.图片压缩处理 1.添加thumbnailator依赖 2.创建图片处理类 3.基本使用方法 一.定时任务 项目中可以采用定时任务进行一些操 ...

  6. 学会lambda表达式,能让你少敲1000行代码!

    01.什么是 lambda 表达式 1. 函数式接口 在聊起 lambda 表达式之前,我们不得不提起函数式接口:一个接口只包含唯一的方法,那么它就是函数式接口.例如: public class La ...

  7. 闲聊CAP、BASE与XA

    CAP理论与BASE理论 首先要和大家说的就是大名鼎鼎的CAP理论与BASE理论了,这两个理论与解决分布式事务问题是密切相关的. 其实网上有很多关于CAP与BASE相关的文章,一写就写了一大堆,篇幅很 ...

  8. Java程序操作Hive

    1.hive的lib+jdbc,还要把mysql的连接驱动加载过来 2.编写程序 开启远程服务:[root@zhiyou ~]# hiveserver2 &[1] 4127[root@zhiy ...

  9. Codeforces Global Round 9 E. Inversion SwapSort

    题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...

  10. 在eclipse完成对Java_web项目里面资源文件的读取

    Java_web项目的资源文件一般有两种: 一种是存放数据之间有联系的文件,使用xml文件 另一种是存放数据之间没有联系的文件,使用properties文件 这里我们对properties文件读写做示 ...