大家好，我是你们今天的“离线魔法师”，今天我们要聊聊Service Worker里的两个神器：Background Sync API和Periodic Sync API，看看它们怎么让你的Web应用即使在断网的情况下也能“偷偷摸摸”地干活。
开场白：网络，你这磨人的小妖精！
想想，用户辛辛苦苦填了个表单，结果“啪”一声，网络断了！所有的努力都白费了？这简直就是程序员的噩梦，用户的灾难。幸好，Service Worker给了我们希望，而Background Sync API和Periodic Sync API就像是它的左右护法，专门负责解决这些“网络不在服务区”的问题。
第一部分：Background Sync API – “亡羊补牢，犹未晚也”
Background Sync API，顾名思义，就是在后台进行同步。它主要解决的是“一次性”的数据同步问题。也就是说，当用户在离线状态下进行了一些操作（比如提交表单、发送消息），这些操作会先被“缓存”起来，等到网络恢复的时候，再自动地发送到服务器。有点像我们小时候玩的“留言条”，先把想说的话写下来，等见到人的时候再给他。
1.1 注册Sync事件
首先，你需要在Service Worker里注册一个sync事件监听器。这个监听器就像一个“闹钟”，当浏览器检测到网络恢复的时候，就会“叮”的一声，提醒Service Worker去执行同步任务。
// service-worker.js
self.addEventListener('sync', (event) => {
console.log('后台同步事件触发！', event.tag);
if (event.tag === 'new-post') { // 检查同步的标签，确保执行正确的任务
event.waitUntil(
syncNewPost() // 一个自定义的函数，用于发送新帖子到服务器
);
} else if (event.tag === 'send-message') {
event.waitUntil(sendMessage());
}
});关键点：
event.tag：这是一个字符串，用于标识不同的同步任务。你可以根据不同的场景设置不同的tag，比如’new-post’代表发送新帖子，’send-message’代表发送消息等等。event.waitUntil()：这个方法告诉浏览器，这个同步任务还没完成，别急着关掉Service Worker。它接收一个Promise作为参数，直到这个Promise resolve或者reject，浏览器才会认为同步任务结束。
1.2 请求同步
当用户在离线状态下进行了一些操作，你需要调用registration.sync.register()方法来请求同步。
// 在你的网页代码中
async function submitForm(data) {
try {
// 尝试发送数据到服务器
const response = await fetch('/api/new-post', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
// 如果发送失败，则注册同步
throw new Error('网络错误，稍后重试！');
}
console.log('帖子发送成功！');
} catch (error) {
console.error('发送失败，注册后台同步：', error);
// 注册后台同步
try {
await navigator.serviceWorker.ready;
await navigator.serviceWorker.registration.sync.register('new-post'); // 注册一个名为'new-post'的同步任务
console.log('后台同步已注册，等待网络恢复...');
alert('您的帖子已保存，将在网络恢复后自动发送。');
} catch (syncError) {
console.error('注册后台同步失败：', syncError);
alert('抱歉，无法保存您的帖子。请检查网络连接后重试。');
}
}
}关键点：
navigator.serviceWorker.ready：确保Service Worker已经激活。navigator.serviceWorker.registration.sync.register('new-post')：注册一个名为’new-post’的同步任务。- 错误处理：别忘了处理注册同步失败的情况。
1.3 实现同步逻辑
现在，我们需要在Service Worker里实现syncNewPost()函数，这个函数负责真正地将数据发送到服务器。
// service-worker.js
async function syncNewPost() {
console.log('开始同步新帖子...');
// 从本地存储（比如IndexedDB）中获取待发送的数据
const posts = await getUnsentPosts(); // 假设getUnsentPosts()函数从IndexedDB中获取未发送的帖子
if (!posts || posts.length === 0) {
console.log('没有待发送的帖子。');
return;
}
for (const post of posts) {
try {
// 尝试发送数据到服务器
const response = await fetch('/api/new-post', {
method: 'POST',
body: JSON.stringify(post),
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
// 如果发送失败，抛出错误，让同步任务重试
throw new Error('发送失败，稍后重试！');
}
// 如果发送成功，从本地存储中删除已发送的数据
await deletePost(post.id); // 假设deletePost()函数从IndexedDB中删除已发送的帖子
console.log(`帖子 ${post.id} 发送成功！`);
} catch (error) {
console.error(`帖子 ${post.id} 发送失败：`, error);
// 如果发送失败，不要resolve Promise，让浏览器稍后重试
throw error;
}
}
console.log('所有帖子同步完成！');
}关键点：
- 从本地存储中获取数据：你需要将离线状态下用户提交的数据存储在本地，比如IndexedDB。
- 错误处理：如果发送数据失败，不要resolve Promise，而是抛出一个错误。这样浏览器会认为同步任务没有完成，稍后会再次尝试。
- 清理本地存储：如果发送数据成功，记得从本地存储中删除已发送的数据，避免重复发送。
1.4 错误处理和重试机制
Background Sync API自带重试机制。如果同步任务失败（比如网络仍然不稳定），浏览器会在稍后再次尝试。但是，重试的次数是有限制的，而且每次重试的间隔时间会越来越长。
你可以通过以下方式来控制重试行为：
- 抛出错误：在
sync事件监听器中，如果同步任务失败，抛出一个错误。这样浏览器会认为同步任务没有完成，稍后会再次尝试。 - 使用
event.waitUntil()：确保event.waitUntil()方法中的Promise在同步任务真正完成之后再resolve。
第二部分：Periodic Sync API – “细水长流，润物无声”
Periodic Sync API，顾名思义，就是在后台定期进行同步。它主要解决的是“周期性”的数据同步问题。比如，你可以用它来定期更新新闻内容、下载最新的文章列表等等。就像每天早上给你送牛奶的邮递员，定时定点，风雨无阻。
2.1 注册Periodic Sync事件
和Background Sync API类似，你需要在Service Worker里注册一个periodicsync事件监听器。
// service-worker.js
self.addEventListener('periodicsync', (event) => {
console.log('周期性同步事件触发！', event.tag);
if (event.tag === 'update-news') { // 检查同步的标签，确保执行正确的任务
event.waitUntil(
updateNews() // 一个自定义的函数，用于更新新闻内容
);
}
});关键点：
event.tag：同样用于标识不同的同步任务。event.waitUntil()：同样用于告诉浏览器，这个同步任务还没完成。
2.2 注册Periodic Sync
和Background Sync API不同的是，Periodic Sync API需要你显式地注册一个周期性同步任务。
// 在你的网页代码中
async function registerPeriodicSync() {
try {
await navigator.serviceWorker.ready;
const registration = await navigator.serviceWorker.registration;
// 检查是否已经注册了周期性同步
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
console.log("权限已授权")
try {
await registration.periodicSync.register('update-news', {
minInterval: 24 * 60 * 60 * 1000, // 最小同步间隔：24小时
// id: 'update-news-id' // 可选的ID，用于唯一标识同步任务
});
console.log('周期性同步已注册，每24小时更新一次新闻。');
} catch(error) {
console.error("注册周期性同步失败:", error);
}
} else {
console.log('没有周期性后台同步权限。');
}
} catch (error) {
console.error('注册周期性同步失败：', error);
}
}关键点：
navigator.permissions.query({name: 'periodic-background-sync'})：检查用户是否授予了周期性后台同步权限。registration.periodicSync.register('update-news', {minInterval: 24 * 60 * 60 * 1000})：注册一个名为’update-news’的周期性同步任务，最小同步间隔为24小时。minInterval：这是最重要的参数，它指定了最小的同步间隔。浏览器会根据设备的电量、网络状况等因素，在这个间隔的基础上进行调整。
2.3 实现同步逻辑
现在，我们需要在Service Worker里实现updateNews()函数，这个函数负责真正地更新新闻内容。
// service-worker.js
async function updateNews() {
console.log('开始更新新闻...');
try {
// 从服务器获取最新的新闻数据
const response = await fetch('/api/news');
if (!response.ok) {
throw new Error('获取新闻数据失败！');
}
const news = await response.json();
// 将最新的新闻数据存储到本地存储（比如IndexedDB）
await storeNews(news); // 假设storeNews()函数将新闻数据存储到IndexedDB中
console.log('新闻更新成功！');
// 显示一个通知，告诉用户新闻已经更新
self.registration.showNotification('新闻更新', {
body: '最新的新闻已经准备好了！',
icon: '/icon.png'
});
} catch (error) {
console.error('更新新闻失败：', error);
// 如果更新失败，不要resolve Promise，让浏览器稍后重试
throw error;
}
}关键点：
- 从服务器获取数据：你需要从服务器获取最新的数据。
- 存储数据到本地：你需要将最新的数据存储到本地，以便用户在离线状态下也能访问。
- 显示通知：你可以显示一个通知，告诉用户数据已经更新。
- 错误处理：如果更新失败，不要resolve Promise，而是抛出一个错误。
2.4 权限问题
Periodic Sync API需要用户授予权限才能使用。你可以通过navigator.permissions.query({name: 'periodic-background-sync'})来检查用户是否授予了权限。
如果用户没有授予权限，你可以引导用户手动授予权限。但是，不要过于频繁地请求权限，否则会影响用户体验。
第三部分：注意事项和最佳实践
- 电量优化： 浏览器会根据设备的电量状况来调整同步的频率。尽量避免在电量不足的情况下进行同步，以免影响用户体验。
- 网络优化： 浏览器也会根据网络状况来调整同步的频率。尽量避免在网络不稳定的情况下进行同步。
- 错误处理： 务必进行充分的错误处理，避免同步任务失败导致数据丢失。
- 用户体验： 在进行后台同步时，尽量保持静默，不要打扰用户。可以通过通知来告知用户同步结果。
- 测试： 使用Chrome DevTools可以模拟离线状态，方便你测试Background Sync API和Periodic Sync API。
第四部分：Background Sync vs Periodic Sync，傻傻分不清楚？
为了方便大家理解，我整理了一个表格，对比一下Background Sync API和Periodic Sync API的异同：
| 特性 | Background Sync API | Periodic Sync API |
|---|---|---|
| 触发时机 | 网络恢复时 | 定期，由浏览器决定具体时间 |
| 使用场景 | 离线状态下提交表单、发送消息等一次性任务 | 定期更新新闻、下载文章列表等周期性任务 |
| 是否需要权限 | 不需要 | 需要 |
| 重试机制 | 有，浏览器自动重试 | 有，浏览器自动重试 |
| 最小同步间隔 | 无 | 有，需要指定minInterval |
| 可控性 | 较低，无法控制同步的具体时间 | 较高，可以设置最小同步间隔，但浏览器仍然会进行调整 |
第五部分：代码示例：一个简单的离线评论功能
为了让大家更直观地理解，我们来写一个简单的例子：实现一个离线评论功能。
5.1 HTML结构
<!DOCTYPE html>
<html>
<head>
<title>离线评论</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>发表评论</h1>
<textarea id="commentText" placeholder="写下你的评论..."></textarea>
<button id="submitBtn">提交</button>
<script src="app.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => console.log('Service Worker 注册成功：', registration))
.catch(error => console.log('Service Worker 注册失败：', error));
}
</script>
</body>
</html>5.2 JavaScript代码 (app.js)
const commentText = document.getElementById('commentText');
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', async () => {
const comment = commentText.value;
if (!comment) {
alert('评论内容不能为空！');
return;
}
const commentData = {
text: comment,
timestamp: Date.now()
};
try {
const response = await fetch('/api/comments', {
method: 'POST',
body: JSON.stringify(commentData),
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error('网络错误，稍后重试！');
}
console.log('评论发送成功！');
alert('评论发送成功！');
commentText.value = '';
} catch (error) {
console.error('发送失败，注册后台同步：', error);
try {
await navigator.serviceWorker.ready;
await navigator.serviceWorker.registration.sync.register('new-comment');
console.log('后台同步已注册，等待网络恢复...');
alert('您的评论已保存，将在网络恢复后自动发送。');
commentText.value = '';
// 将评论保存到IndexedDB
await saveCommentToIndexedDB(commentData);
} catch (syncError) {
console.error('注册后台同步失败：', syncError);
alert('抱歉，无法保存您的评论。请检查网络连接后重试。');
}
}
});
// 保存评论到IndexedDB
async function saveCommentToIndexedDB(comment) {
return new Promise((resolve, reject) => {
const openRequest = indexedDB.open("commentsDB", 1);
openRequest.onerror = () => {
console.error("IndexedDB 打开失败:", openRequest.error);
reject(openRequest.error);
};
openRequest.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore = db.createObjectStore("comments", { keyPath: "timestamp" });
objectStore.createIndex("text", "text", { unique: false });
console.log("IndexedDB 已升级");
};
openRequest.onsuccess = () => {
const db = openRequest.result;
const transaction = db.transaction("comments", "readwrite");
const objectStore = transaction.objectStore("comments");
objectStore.add(comment);
transaction.oncomplete = () => {
console.log("评论已保存到 IndexedDB");
db.close();
resolve();
};
transaction.onerror = () => {
console.error("IndexedDB 事务失败:", transaction.error);
db.close();
reject(transaction.error);
};
};
});
}
// 从IndexedDB获取未发送的评论
async function getUnsentComments() {
return new Promise((resolve, reject) => {
const openRequest = indexedDB.open("commentsDB", 1);
openRequest.onerror = () => {
console.error("IndexedDB 打开失败:", openRequest.error);
reject(openRequest.error);
};
openRequest.onsuccess = () => {
const db = openRequest.result;
const transaction = db.transaction("comments", "readonly");
const objectStore = transaction.objectStore("comments");
const getAllRequest = objectStore.getAll();
getAllRequest.onsuccess = () => {
console.log("从 IndexedDB 获取评论成功");
db.close();
resolve(getAllRequest.result);
};
getAllRequest.onerror = () => {
console.error("从 IndexedDB 获取评论失败:", getAllRequest.error);
db.close();
reject(getAllRequest.error);
};
};
});
}
// 从IndexedDB删除已发送的评论
async function deleteCommentFromIndexedDB(timestamp) {
return new Promise((resolve, reject) => {
const openRequest = indexedDB.open("commentsDB", 1);
openRequest.onerror = () => {
console.error("IndexedDB 打开失败:", openRequest.error);
reject(openRequest.error);
};
openRequest.onsuccess = () => {
const db = openRequest.result;
const transaction = db.transaction("comments", "readwrite");
const objectStore = transaction.objectStore("comments");
const deleteRequest = objectStore.delete(timestamp);
deleteRequest.onsuccess = () => {
console.log("从 IndexedDB 删除评论成功");
db.close();
resolve();
};
deleteRequest.onerror = () => {
console.error("从 IndexedDB 删除评论失败:", deleteRequest.error);
db.close();
reject(deleteRequest.error);
};
};
});
}5.3 Service Worker代码 (service-worker.js)
self.addEventListener('install', (event) => {
console.log('Service Worker 安装');
// 跳过等待，立即激活Service Worker
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
console.log('Service Worker 激活');
// 清理旧的缓存
event.waitUntil(clients.claim());
});
self.addEventListener('fetch', (event) => {
// 这里可以添加缓存策略，比如使用Cache API缓存静态资源
// 为了简化示例，这里不做缓存
});
self.addEventListener('sync', (event) => {
console.log('后台同步事件触发！', event.tag);
if (event.tag === 'new-comment') {
event.waitUntil(
syncNewComment()
);
}
});
async function syncNewComment() {
console.log('开始同步新评论...');
// 从IndexedDB获取未发送的评论
const comments = await getUnsentComments();
if (!comments || comments.length === 0) {
console.log('没有待发送的评论。');
return;
}
for (const comment of comments) {
try {
const response = await fetch('/api/comments', {
method: 'POST',
body: JSON.stringify(comment),
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error('发送失败，稍后重试！');
}
// 如果发送成功，从IndexedDB中删除已发送的评论
await deleteCommentFromIndexedDB(comment.timestamp);
console.log(`评论 ${comment.timestamp} 发送成功！`);
} catch (error) {
console.error(`评论 ${comment.timestamp} 发送失败：`, error);
throw error;
}
}
console.log('所有评论同步完成！');
}
// 从IndexedDB获取未发送的评论 (重复代码，最好封装成一个模块)
async function getUnsentComments() {
return new Promise((resolve, reject) => {
const openRequest = indexedDB.open("commentsDB", 1);
openRequest.onerror = () => {
console.error("IndexedDB 打开失败:", openRequest.error);
reject(openRequest.error);
};
openRequest.onsuccess = () => {
const db = openRequest.result;
const transaction = db.transaction("comments", "readonly");
const objectStore = transaction.objectStore("comments");
const getAllRequest = objectStore.getAll();
getAllRequest.onsuccess = () => {
console.log("从 IndexedDB 获取评论成功");
db.close();
resolve(getAllRequest.result);
};
getAllRequest.onerror = () => {
console.error("从 IndexedDB 获取评论失败:", getAllRequest.error);
db.close();
reject(getAllRequest.error);
};
};
});
}
// 从IndexedDB删除已发送的评论 (重复代码，最好封装成一个模块)
async function deleteCommentFromIndexedDB(timestamp) {
return new Promise((resolve, reject) => {
const openRequest = indexedDB.open("commentsDB", 1);
openRequest.onerror = () => {
console.error("IndexedDB 打开失败:", openRequest.error);
reject(openRequest.error);
};
openRequest.onsuccess = () => {
const db = openRequest.result;
const transaction = db.transaction("comments", "readwrite");
const objectStore = transaction.objectStore("comments");
const deleteRequest = objectStore.delete(timestamp);
deleteRequest.onsuccess = () => {
console.log("从 IndexedDB 删除评论成功");
db.close();
resolve();
};
deleteRequest.onerror = () => {
console.error("从 IndexedDB 删除评论失败:", deleteRequest.error);
db.close();
reject(deleteRequest.error);
};
};
});
}5.4 后端代码 (Node.js + Express，仅示例)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.post('/api/comments', (req, res) => {
const comment = req.body;
console.log('收到评论：', comment);
// 这里可以将评论保存到数据库
res.status(200).send('评论已收到！');
});
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});使用方法：
- 将以上代码保存到对应的文件中（index.html, app.js, service-worker.js, server.js）。
- 启动一个Node.js服务器运行server.js (例如使用
node server.js)。 - 在浏览器中打开index.html。
- 断开网络连接（可以使用Chrome DevTools模拟离线状态）。
- 发表评论，你会看到一个提示，告诉你评论已保存，将在网络恢复后自动发送。
- 重新连接网络，刷新页面，你会看到Service Worker自动将评论发送到服务器。
第六部分：总结
Background Sync API和Periodic Sync API是Service Worker中非常强大的工具，它们可以让你构建更加健壮、离线的Web应用。但是，在使用它们的时候，也要注意电量优化、网络优化、错误处理和用户体验等方面的问题。
希望今天的讲座能帮助大家更好地理解和使用这两个API。 记住，离线不是终点，而是新的起点！ 咱们下次再见！