背景
希望在用户离开页面时，向服务器发送数据记录用户信息
对于这个需求，相信大多数前端都不会陌生，毕竟大多数产品都需要收集用户退出页面的数据，那拆分这个需求，可以把它分成两步骤：
- 监听用户离开页面
- 向服务器发送数据
技术分析
监听
所谓离开页面，那我们可以大致认为是一下情况：
- 页面刷新
- 页面跳转
- 关闭tab或浏览器
要监听这类情况，我们可以使用浏览器内置的监听事件：
beforeunload，unload
注意：这里针对不同的兼容性以及要求，两种事件的选用以及所需要的兼容处理各不相同，这里不细说
发送数据
发送数据，也就是发送一次post请求，这里可以使用的方法也很多，包括http、axios、fetch、etc
总结
问题解决！大吉大利！
下一步思考
数据发送是一个异步请求，理所当然会发生请求未完成发送但页面已经丢失的情况，为了能够使数据更有效，再思考改进点
方法很多，这里我们选用在Service worker 中发送请求
Service Worker
没听说过的可以百度了解下，并不是一个新技术了
简单说：它主要运行于浏览器后台，也就是说不需要页面打开我们就能执行程序
理由分析
此处选择它的理由很简单，既然请求是异步，那我们就把这个超长的执行过程放在后台，前台程序只需要通知下：
前台程序：SW（Service Worker），你去帮我跑个腿，发个邮件
SW：好的！（干活去了）
前台程序：下班！
这样的话，服务于用户的前台程序需要做的事情就简单了！
代码实现
注册Service Worker
- 创建service-worker.js放置于public文件夹下（vue项目）
- 在需要使用服务的页面执行代码
// index.vue
window.navigator.serviceWorker.register('/service-worker.js');
这样咱们就注册好了！
防报错
由于SW并非一个全平台都有的功能，所以为了防止报错，我们需要进行一下判断
这里我又添加了一个卸载事件，由于service worker被装载后会被缓存，为了方便调试，我们默认先进行一次卸载以保证我们运行的文件是最新的
// index.vue
const debugging = true;
this.sw = window.navigator.serviceWorker;
// 如果没有service worker，则返回
if (!this.sw) {
return;
} else {
// 获取注册的所有service worker
navigator.serviceWorker.getRegistrations().then((regs) => {
// 如果debugging为true，则解除注册
if (debugging) {
for (let reg of regs) {
reg.unregister();
}
}
// 注册service worker
navigator.serviceWorker.register('/service-worker.js');
});
}
发送数据
Service worker提供也仅支持一些事件，这里我们选用message事件
前台程序调用 postMessage时，可以在sw中触发message事件
sendTrackData = (enter) => {
// 创建一个消息对象，包含要发送的数据和目标事件
const message = {
data: {
type: 'method',
methodName: 'postTrackData',
data: {
...this.data,
event: enter ? 'PAGE_ENTER' : 'PAGE_LEAVE'
},
token: this.token,
postUrl: `${import.meta.env.VITE_APP_API_BASE}/api/bury-dot`
},
target: 'service-worker'
};
// 向service worker发送消息
if (debugging) {
this.sw.controller.postMessage(message);
} else {
console.log('postMessage', message);
}
};
sw运行在后台，它就跟隔壁公司的程序员一样，对你的工作完全不了解，因此我们需要告诉它去做什么，以及这件事需要的信息：
前台程序：SW帮我干个事！去送个信！地址是xxxxxxx，信件内容是xxxxxx
SW：收到！（哼子哼子干活去了）
前台程序：下班！
数据接收
现在转到SW接收部分，直接上代码
// service-worker.js
self.addEventListener('message', (event) => {
// 获取发送的消息对象
const message = event.data;
// 处理消息数据
// console.log('Received from frontend:', message.data);
let data = message.data;
if (data?.type === 'method' && data?.methodName) {
const methodName = data?.methodName;
if (methods[methodName]) {
methods[methodName]({
data: data?.data,
url: data?.postUrl,
token: data?.token
});
}
}
});
const methods = {
postTrackData: () => {}
};
这里我们定义了打工人service-worker，并给它创建一个可以干的事情的目录（methods），根据收到的信息，去做对应的事情
发送数据
接下来定义“送信”这件事
// service-worker.js
const methods = {
postTrackData: ({ data, url, token }) => {
// 定义一个字符串变量
let str = '';
// 遍历data对象的key值，将key值拼接到str变量中
Object.keys(data).forEach((key, index) => {
str += `${index > 0 ? '&' : '?'}${key}=${data[key]}`;
});
// 将str变量拼接到url变量中
url = `${url}${str}`;
// 使用fetch函数发送请求
fetch(url, {
// 请求方式为GET
method: 'GET',
// 请求头
headers: {
// 请求头中添加Authorization
Authorization: `Bearer ${token}`
}
});
}
};
现在咱们的SW会送信了！
工具封装
现在，在我们前台有了一套工作流：
index.vue: 监听用户离开页面 -> 注册sw -> 发送数据给sw
现在我们把它封装！
// track.js
const debugging = false;
// demo:
// this.track = new Track();
// this.track.setUserId(statusStore.id);
// this.track.setToken(this.$login.token.value);
// this.track.send();
export default class Track {
constructor(options) {
this.data = options?.data || {};
this.userId = options?.userId || '';
this.token = options?.token || '';
this.initServiceWorker();
this.initListener();
}
initListener = () => {
window.onbeforeunload = () => {
this.sendTrackData();
};
};
setToken(token) {
this.token = token;
}
setUserId(userId) {
this.userId = userId;
}
setData(data) {
this.data = Object.assign({}, data);
}
initServiceWorker = () => {
// 获取service worker
this.sw = window.navigator.serviceWorker;
// 如果没有service worker，则返回
if (!this.sw) {
return;
} else {
// 获取注册的所有service worker
navigator.serviceWorker.getRegistrations().then((regs) => {
// 如果debugging为true，则解除注册
if (debugging) {
for (let reg of regs) {
reg.unregister();
}
}
// 注册service worker
navigator.serviceWorker.register('/service-worker.js');
});
}
};
send() {
this.sendTrackData(true);
}
sendTrackData = (enter) => {
// 创建一个消息对象，包含要发送的数据和目标事件
const message = {
data: {
type: 'method',
methodName: 'postTrackData',
data: {
...this.data,
event: enter ? 'PAGE_ENTER' : 'PAGE_LEAVE'
},
token: this.token,
postUrl: `${import.meta.env.VITE_APP_API_BASE}/api/bury-dot`
},
target: 'service-worker'
};
// 向service worker发送消息
if (debugging) {
this.sw.controller.postMessage(message);
} else {
console.log('postMessage', message);
}
};
}
根据要求，这里我们预判到既然我们做了页面离开，产品一定也会想要收集页面进入啊！很合理吧！机智的我们于是简单暴露了发送方法，用来随时可以调用！
使用
// index.vue
this.track = new Track();
this.track.setUserId(statusStore.id);
this.track.setToken(this.$login.token.value);
// this.track.send();
这样，需求就搞定了！万事大吉！
