用户离开页面时向服务器发送数据
背景
希望在用户离开页面时，向服务器发送数据记录用户信息
对于这个需求，相信大多数前端都不会陌生，毕竟大多数产品都需要收集用户退出页面的数据，那拆分这个需求，可以把它分成两步骤：
监听用户离开页面
向服务器发送数据
技术分析
监听
所谓离开页面，那我们可以大致认为是一下情况：
页面刷新
页面跳转
关闭tab或浏览器
要监听这类情况，我们可以使用浏览器内置的监听事件：
beforeunload，unload
注意：这里针对不同的兼容性以及要求，两种事件的选用以及所需要的兼容处理各不相同，这里不细说
发送数据
发送数据，也就是发送一次post请求，这里可以使用的方法也很多，包括http、axios、fetch、etc
总结
问题解决！大吉大利！
下一步思考
数据发送是一个异步请求，理所当然会发生请求未完成发送但页面已经丢失的情况，为了能够使数据更有效，再思考改进点
方法很多，这里我们选用在Service worker 中发送请求
Service Worker
没听说过的可以百度了解下，并不是一个新技术了
简单说：它主要运行于浏览器后台，也就是说不需要页面打开我们就能执行程序
理由分析
此处选择它的理由很简单，既然请求是异步，那我们就把这个超~长~的执行过程放在后台，前台程序只需要通知下：
前台程序：SW（Service Worker），你去帮我跑个腿，发个邮件
SW：好的！（干活去了）
前台程序：那我下班了
这样的话，服务于用户的前台程序需要做的事情就简单了！
代码实现
注册Service Worker
创建service-worker.js放置于public文件夹下（vue项目）
在需要使用服务的页面执行代码
这样咱们就注册好了！
防报错
由于SW并非一个全平台都有的功能，所以为了防止报错，我们需要进行一下判断
这里我又添加了一个卸载事件，由于service worker被装载后会被缓存，为了方便调试，我们默认先进行一次卸载以保证我们运行的文件是最新的
发送数据
Service worker提供也仅支持一些事件，这里我们选用message事件
前台程序调用 postMessage时，可以在sw中触发message事件
sw运行在后台，它就跟隔壁公司的程序员一样，对你的工作完全不了解，因此我们需要告诉它去做什么，以及这件事需要的信息：
前台程序：SW帮我干个事！去送个信！地址是xxxxxxx，信件内容是xxxxxx
SW：收到！
前台程序：下班！
数据接收
现在转到SW接收部分，直接上代码
这里我们定义了打工人service-worker，并给它创建一个可以干的事情的目录（methods），根据收到的信息，去做对应的事情
发送数据
接下来定义“送信”这件事
现在咱们的SW会送信了！
工具封装
现在，在我们前台有了一套工作流：
index.vue: 监听用户离开页面 -> 注册sw -> 发送数据给sw
现在我们把它封装！
根据要求，这里我们预判到既然我们做了页面离开，产品一定也会想要收集页面进入啊！很合理吧！机智的我们于是简单暴露了发送方法，用来随时可以调用！
使用
这样，需求就搞定了！万事大吉！
