离线优先Web应用通过IndexedDB实现本地数据存储与同步。首先初始化数据库并创建对象仓库，如用于存储笔记的notes表；接着封装增删改查操作，所有数据操作均优先在本地完成，例如添加笔记时存入IndexedDB并标记synced: false；读取数据时直接从本地获取，确保无网络时仍可访问；当检测到网络恢复时，自动将未同步的数据通过fetch发送至服务器，并更新每条记录的同步状态；同时在UI中展示“未同步”提示，提升用户体验。核心是将本地数据库作为主数据源，网络仅用于后台同步，从而保证应用在离线环境下的可用性与数据一致性。
要实现一个离线优先的Web应用，IndexedDB是关键工具之一。它允许你在浏览器中存储大量结构化数据，包括文件和二进制大对象（Blob），支持在无网络环境下正常运行。核心思路是：先从本地数据库读取数据，再在后台同步到服务器。
初始化IndexedDB并创建数据表
应用启动时，需要打开或创建一个IndexedDB数据库，并定义数据仓库（object store）。每个仓库相当于一张表，用于存放特定类型的数据，比如用户笔记、任务列表等。
示例代码：
let db;
const DB_NAME = 'OfflineAppDB';
const VERSION = 1;
const STORE_NAME = 'notes';
function openDatabase() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, VERSION);
request.onerror = () => reject(request.error);
request.onsuccess = () => {
db = request.result;
resolve(db);
};
request.onupgradeneeded = (event) => {
db = event.target.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
}
};
});
}
实现离线数据的增删改查
封装CRUD操作，让前端代码无需关心当前是否联网。所有操作都先作用于本地IndexedDB。
例如添加一条记录：
function addNote(noteText) {
return new Promise((resolve, reject) => {
const transaction = db.transaction([STORE_NAME], 'readwrite');
const store = transaction.objectStore(STORE_NAME);
const note = { text: noteText, createdAt: Date.now(), synced: false };
const request = store.add(note);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
读取数据时，直接从本地获取：
function getAllNotes() {
return new Promise((resolve, reject) => {
const transaction = db.transaction([STORE_NAME], 'readonly');
const store = transaction.objectStore(STORE_NAME);
const request = store.getAll();
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
网络恢复后自动同步到服务器
监听网络状态变化，在重新联网时将未同步的数据发送到后端。
可以标记每条记录的 synced 字段，表示是否已同步。
实现同步逻辑：
function syncToServer() {
if (!navigator.onLine) return;
getAllNotes().then(notes => {
const unsynced = notes.filter(n => !n.synced);
unsynced.forEach(note => {
fetch('/api/notes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: note.text })
})
.then(res => res.json())
.then(serverNote => {
// 标记为已同步
updateSyncStatus(note.id, true);
})
.catch(err => console.warn('同步失败，稍后重试', err));
});
});
}
// 更新本地记录的同步状态
function updateSyncStatus(id, synced) {
const transaction = db.transaction([STORE_NAME], 'readwrite');
const store = transaction.objectStore(STORE_NAME);
const getRequest = store.get(id);
getRequest.onsuccess = () => {
const data = getRequest.result;
data.synced = synced;
store.put(data);
};
}
在页面加载或网络恢复时调用 syncToServer()。
优化用户体验：显示同步状态
用户应知道哪些数据尚未上传。可以在UI中标注“未同步”状态，比如显示一个小云朵图标或“本地保存”提示。
从getAllNotes返回的数据中检查synced字段，动态渲染状态。
基本上就这些。通过IndexedDB缓存数据、优先读取本地内容、后台异步同步，就能构建出真正离线优先的应用。关键是把本地存储当作主数据源，网络只是辅助通道。
