Beacon API All In One
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
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的更多相关文章
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- Beacon API
Beacon API User Tracking https://caniuse.com/#feat=beacon Question & Solution Beacon API 不会延缓网页卸 ...
- html5统计数据上报API:SendBeacon
公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv.uv.页面留存率.访问设备等信息.与之相关的就是客户端的数据采集,然后上报的服务端.为了保证数据的准确性,就需要保证数 ...
- Web Performance API
Web Performance API 性能监测/性能优化 https://developer.mozilla.org/en-US/docs/Web/API/Performance https://d ...
- Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT SDK 配置详解
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- pagehide event & sendBeacon
pagehide event & sendBeacon 通过 API 测试 pagehide 是否触发了 pagehide 不支持正常的 fetch 请求发送 pagehide 仅支持 sen ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- 前端监控平台 & 架构
前端监控平台 & 架构 1px 透明的 gif 字节小, 43 bytes 支持跨域, 兼容场景多,零配置 https://en.wikipedia.org/wiki/GIF demo htt ...
- SDK & 埋点 & user behavior tracker
SDK & 埋点 & user behavior tracker 同一个 SDK ,根据不同的应用市场, 分别进行统计分析 ? https://www.umeng.com/ user ...
随机推荐
- java native:Java本地方法调用(jni方式)
https://www.cnblogs.com/zh1164/p/6283831.html
- windows命令行关闭IE代理
打开:reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings" /v ProxyEnab ...
- okhttp踩坑
ResponseBody.string() 平常我们用的客户端http调用工具一般是RestTemplate,HttpClient,okhttp,以前使用过前两者,没咋接触过okhttp,我看公司 ...
- JVM 线上故障排查
JVM 线上故障排查 Linux 1.1 CPU 1.2 内存 1.3 存储 1.4 网络 一.CPU 飚高 寻找原因 二.内存问题排查 三.一般排查问题的方法 四.应用场景举例 4.1 怎么查看某个 ...
- Spring Boot:定时任务与图片压缩处理
一.定时任务 1.创建定时任务 2.@Scheduled 二.图片压缩处理 1.添加thumbnailator依赖 2.创建图片处理类 3.基本使用方法 一.定时任务 项目中可以采用定时任务进行一些操 ...
- 学会lambda表达式,能让你少敲1000行代码!
01.什么是 lambda 表达式 1. 函数式接口 在聊起 lambda 表达式之前,我们不得不提起函数式接口:一个接口只包含唯一的方法,那么它就是函数式接口.例如: public class La ...
- 闲聊CAP、BASE与XA
CAP理论与BASE理论 首先要和大家说的就是大名鼎鼎的CAP理论与BASE理论了,这两个理论与解决分布式事务问题是密切相关的. 其实网上有很多关于CAP与BASE相关的文章,一写就写了一大堆,篇幅很 ...
- Java程序操作Hive
1.hive的lib+jdbc,还要把mysql的连接驱动加载过来 2.编写程序 开启远程服务:[root@zhiyou ~]# hiveserver2 &[1] 4127[root@zhiy ...
- Codeforces Global Round 9 E. Inversion SwapSort
题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...
- 在eclipse完成对Java_web项目里面资源文件的读取
Java_web项目的资源文件一般有两种: 一种是存放数据之间有联系的文件,使用xml文件 另一种是存放数据之间没有联系的文件,使用properties文件 这里我们对properties文件读写做示 ...