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虚拟机——轻松搞懂jvm

    一.JVM体系结构概述 JVM位置 JVM体系结构 1.1 类加载器 ClassLoader   类加载器(ClassLoader)负责加载class文件,class文件在文件开头有特定的文件标示,并 ...

  2. There are only two hard things in Computer Science: cache invalidation and naming things.

    TwoHardThings https://martinfowler.com/bliki/TwoHardThings.html https://github.com/cch123/golang-not ...

  3. 流量染色与gRPC服务托管 微服务协作开发、灰度发布之流量染色 灰度发布与流量染色

    大规模微服务场景下灰度发布与流量染色实践 https://mp.weixin.qq.com/s/UBoRKt3l91ffPagtjExmYw [go-micro]微服务协作开发.灰度发布之流量染色 - ...

  4. 内存模型 Memory model 内存分布及程序运行中(BSS段、数据段、代码段、堆栈

    C语言中内存分布及程序运行中(BSS段.数据段.代码段.堆栈) - 秦宝艳的个人页面 - 开源中国 https://my.oschina.net/pollybl1255/blog/140323 Mem ...

  5. JavaScript代码是怎么执行的?

    前言 众所周知,JavaScript是单线程语言.所以JavaScript是按顺序执行的! 先编译再执行 变量提升 请看下面的例子: console.log(cat) catName("Ch ...

  6. hashlib,configparser,logging

    # hash: 算法, 结果是什么? 是内存地址, # print(hash('123')) # dic = {'name':'alex'} # print(hash('name')) # print ...

  7. Java基础图解,JVM,线程,Spring,TCP,SpringMVC等开发体系图解

    Java基础图解,JVM,线程,Spring,TCP,SpringMVC等开发体系图解 1.Java虚拟机运行时数据区图 2. 堆的默认分配图 3.方法区结构图 4.对象的内存布局图 5.对象头的Ma ...

  8. log4cplus安装测试

     先介绍一下它的基本要素. Layouts :布局器,控制输出消息的格式. Appenders :挂接器,与布局器紧密配合,将特定格式的消息输出到所挂接的设备终端 (如屏幕,文件等等). Logge ...

  9. 从官方文档中探索MySQL分页的几种方式及分页优化

    概览 相比于Oracle,SQL Server 等数据库,MySQL分页的方式简单得多了,官方自带了分页语法 limit 语句: select * from test_t LIMIT {[offset ...

  10. java类里的成员变量是自身的对象问题

    今晚看单例模式饿汉时想到一个问题:假如java类里的成员变量是自身的对象,则新建该类对象时内存中怎么分配空间,我感觉似乎死循环了.于是上网搜索了下,哈哈,果然有人早就思考过这个问题了,站在巨人的肩膀上 ...