From fe48c634812366f20fa649c1ac87ff008951b3a9 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Wed, 5 Mar 2025 09:55:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20sendBeacon=E7=A6=BB=E5=BC=80=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=9F=8B=E7=82=B9=E4=BF=9D=E8=AF=81=E9=80=81=E8=BE=BE?=
 =?UTF-8?q?=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/md/sendBeacon.md       | 51 +++++++++++++++++++++++++++++++++++
 src/router/modules/demo.ts    |  4 +++
 src/views/demo/sendBeacon.vue | 18 +++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 public/md/sendBeacon.md
 create mode 100644 src/views/demo/sendBeacon.vue

diff --git a/public/md/sendBeacon.md b/public/md/sendBeacon.md
new file mode 100644
index 0000000..c1e68a8
--- /dev/null
+++ b/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` 是一个合适的选择。如果有其他问题或需要更详细的信息，请告诉我！
\ No newline at end of file
diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index cfd75c6..29b565e 100644
--- a/src/router/modules/demo.ts
+++ b/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
diff --git a/src/views/demo/sendBeacon.vue b/src/views/demo/sendBeacon.vue
new file mode 100644
index 0000000..efb13a7
--- /dev/null
+++ b/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>