HTML5系列（8）-- 离线应用指南

前端技术探索系列：HTML5 离线应用指南 🌐

致读者：构建可靠的离线体验 👋

前端开发者们，

在现代 Web 开发中，离线应用已成为提升用户体验的重要组成部分。今天，我们将探索 HTML5 提供的离线技术，包括应用缓存、Service Worker 和离线存储。

应用缓存基础 🚀

manifest 文件

CACHE MANIFEST
# 版本号
# v1.0.0CACHE:
# 缓存的文件列表
/index.html
/styles.css
/scripts.js
/images/logo.pngNETWORK:
# 需要在线访问的资源
/api/FALLBACK:
# 离线时的替代资源
/ /offline.html

缓存状态与更新机制

window.addEventListener('load', () => {const appCache = window.applicationCache;appCache.addEventListener('cached', () => {console.log('所有资源已缓存');});appCache.addEventListener('updateready', () => {if (appCache.status === window.applicationCache.UPDATEREADY) {// 更新缓存并重新加载页面appCache.swapCache();window.location.reload();}});appCache.addEventListener('error', () => {console.error('缓存更新失败');});
});

Service Worker 深入解析 🔧

离线拦截与缓存策略

// 注册 Service Worker
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(registration => {console.log('Service Worker 注册成功:', registration);}).catch(error => {console.error('Service Worker 注册失败:', error);});
}// sw.js 文件
self.addEventListener('install', event => {event.waitUntil(caches.open('v1').then(cache => {return cache.addAll(['/','/index.html','/styles.css','/scripts.js','/images/logo.png']);}));
});self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}));
});

后台同步

self.addEventListener('sync', event => {if (event.tag === 'sync-data') {event.waitUntil(syncData());}
});function syncData() {// 执行数据同步逻辑return fetch('/sync', {method: 'POST',body: JSON.stringify({ /* 数据 */ })}).then(response => {if (!response.ok) {throw new Error('同步失败');}return response.json();});
}

离线存储技术 📦

IndexedDB 数据存储

// 打开数据库
const request = indexedDB.open('myDatabase', 1);request.onupgradeneeded = event => {const db = event.target.result;const objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });objectStore.createIndex('title', 'title', { unique: false });
};request.onsuccess = event => {const db = event.target.result;const transaction = db.transaction(['notes'], 'readwrite');const objectStore = transaction.objectStore('notes');// 添加数据const note = { title: '离线笔记', content: '这是一个离线存储的示例。' };const addRequest = objectStore.add(note);addRequest.onsuccess = () => {console.log('笔记已添加');};
};request.onerror = event => {console.error('数据库打开失败:', event.target.errorCode);
};

数据同步策略

function syncIndexedDB() {// 获取所有数据并同步到服务器const request = indexedDB.open('myDatabase');request.onsuccess = event => {const db = event.target.result;const transaction = db.transaction(['notes'], 'readonly');const objectStore = transaction.objectStore('notes');objectStore.getAll().onsuccess = event => {const notes = event.target.result;fetch('/sync-notes', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(notes)}).then(response => {if (!response.ok) {throw new Error('同步失败');}console.log('数据同步成功');}).catch(error => {console.error('同步错误:', error);});};};
}

实践项目：离线 Web 应用 🛠️

项目概述

我们将创建一个简单的离线笔记应用，用户可以在没有网络连接的情况下查看和编辑笔记。应用将使用 Service Worker 和 IndexedDB 来实现离线功能。

项目实现

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>离线笔记应用</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>离线笔记</h1><form id="note-form"><input type="text" id="note-title" placeholder="笔记标题" required><textarea id="note-content" placeholder="笔记内容" required></textarea><button type="submit">保存笔记</button></form><ul id="notes-list"></ul><script src="scripts.js"></script>
</body>
</html>

// scripts.js
document.getElementById('note-form').addEventListener('submit', event => {event.preventDefault();const title = document.getElementById('note-title').value;const content = document.getElementById('note-content').value;saveNote({ title, content });
});function saveNote(note) {const request = indexedDB.open('myDatabase');request.onsuccess = event => {const db = event.target.result;const transaction = db.transaction(['notes'], 'readwrite');const objectStore = transaction.objectStore('notes');objectStore.add(note).onsuccess = () => {console.log('笔记已保存');displayNotes();};};
}function displayNotes() {const request = indexedDB.open('myDatabase');request.onsuccess = event => {const db = event.target.result;const transaction = db.transaction(['notes'], 'readonly');const objectStore = transaction.objectStore('notes');objectStore.getAll().onsuccess = event => {const notes = event.target.result;const notesList = document.getElementById('notes-list');notesList.innerHTML = notes.map(note => `<li>${note.title}: ${note.content}</li>`).join('');};};
}// 初始化显示笔记
displayNotes();