feat: sendBeacon离开页面埋点保证送达方案

public/md/sendBeacon.md

@@ -0,0 +1,51 @@
+`sendBeacon` 是一个用于在网页与服务器之间异步传输小数据的 Web API，特别适用于在页面卸载时发送数据。这种方法的优点是即使用户离开页面或关闭浏览器，数据也能被可靠地发送。
+
+### 使用场景
+
+- 记录分析数据（如页面浏览、用户行为等）。
+- 发送用户反馈或事件数据。
+- 发送数据时不影响页面的性能，尤其是在卸载期间。
+
+### 语法
+
+```javascript
+navigator.sendBeacon(url, data);
+```
+
+#### 参数
+
+- **`url`**: 要发送数据的服务器端点（必须是同源或允许跨源的URL）。
+- **`data`**: 可选，发送的数据，可以是 `ArrayBuffer`, `Blob`, `DOMString` 或 `FormData`。
+
+### 返回值
+
+- 返回 `true` 表示请求已成功添加到发送队列，返回 `false` 表示请求失败（通常是因为目标 URL 不可达）。
+
+### 示例代码
+
+```javascript
+// 发送数据示例
+const url = 'https://example.com/track';
+const data = JSON.stringify({ action: 'page_exit', timestamp: Date.now() });
+
+window.addEventListener('beforeunload', function() {
+    const success = navigator.sendBeacon(url, data);
+    console.log('Beacon sent:', success);
+});
+```
+
+### 说明
+
+1. **事件监听**: 通过 `beforeunload` 事件监听用户离开页面的行为，在页面卸载之前调用 `sendBeacon`。
+2. **数据格式**: 在这个示例中，数据被转换为 JSON 字符串以便发送。
+3. **异步特性**: `sendBeacon` 方法不会阻塞页面的关闭，这意味着它不会延迟用户的离开。
+
+### 注意事项
+
+- **数据大小**: `sendBeacon` 适合发送小量数据，通常不应超过 64 KB。
+- **网络请求**: `sendBeacon` 会在后台发送请求，因此不需要等待响应。
+- **支持性**: 现代浏览器都支持 `sendBeacon`，但在较旧的浏览器中可能不支持。
+
+### 小结
+
+`sendBeacon` 提供了一种有效的方式来在页面卸载时或用户离开时发送数据，确保数据的传输不会影响用户体验。如果你需要在用户离开时记录重要的数据或事件，`sendBeacon` 是一个合适的选择。如果有其他问题或需要更详细的信息，请告诉我！

src/router/modules/demo.ts

@@ -76,6 +76,10 @@ const titleArr = [
         key: 'sseFetch',
         title: 'ai对话流式显示文本(使用fetch-event-source)',
     },
+    {
+        key: 'sendBeacon',
+        title: 'sendBeacon离开页面埋点保证送达方案',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/sendBeacon.vue

@@ -0,0 +1,18 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    ></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+getMarkdownContent('./md/sendBeacon.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>