上一章我们对离线存储进行了讲解，本节我们继续介绍离线处理中的另外一个话题 - 后台同步，该机制允许用户随时随地进行事务处理，而无需关心网络的连接状态。比如以下示例：
通过演示我们可以看到，无论在线还是离线，甚至在触发了后台同步之后关闭页面，只要网络处于在线状态都会执行后台同步事件，并将缓存在本地的请求数据发送到服务端。对于传统的 Web 应用来说，该特性是极其令人兴奋的，因为它解决了传统 Web 应用所存在的以下几个问题：
- 页面发起的请求会随着页面的关闭而终止。
- 在离线状态下，很难将用户的网络请求缓存起来，并在网络恢复正常后再次进行请求。
那么它究竟是如何工作的？下面我们通过上面的演示实例对其进行说明。
# 基本使用
# 注册
在上面的演示中，当我们点击添加按钮后，控制台首先输出了已触发后台同步：add-todo，这便完成了后台同步事件注册，主要代码如下：
<script src="./db.js"></script>
<script src="./ui.js"></script>
<script src="./network.js"></script>
<script>
window.addEventListener('load', function() {
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.register('./sw.js').then(function(registration) {
document.getElementById('submit').addEventListener('click', function() {
ui.submit(function(name) {
db.addTodo(name).then(function() {
registration.sync.register('add-todo').then(function() {
console.log('已触发后台同步：add-todo');
});
});
});
});
});
navigator.serviceWorker.addEventListener('message', function(event) {
ui.render(event.data);
});
} else {
document.getElementById('submit').addEventListener('click', function() {
ui.submit(function(name) {
network.addTodos([{ name: name }]).then(function(todos) {
ui.render
