如何构建一个使用 IndexedDB 作为后端、支持离线搜索的渐进式 Web 应用？

答案：构建PWA需注册服务Worker缓存资源，使用IndexedDB存储数据并实现离线搜索，通过idb库简化数据库操作，前端绑定搜索输入实时查询本地数据，结合Web App Manifest实现可安装性，最终达成离线优先的渐进式应用体验。

注册服务 Worker 并启用离线访问

要让应用在无网络时仍可运行，必须注册服务 Worker 并缓存核心资源。

在主页面中注册服务 Worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.error('SW registration failed:', err));
}

创建 sw.js 文件，缓存 HTML、CSS、JS 和静态资源：

const CACHE_NAME = 'pwa-search-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/idb.js' // 封装 IndexedDB 操作的库
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

使用 IndexedDB 存储数据并实现本地搜索

IndexedDB 是异步、事务型的客户端数据库，适合存储大量结构化数据。

推荐使用 idb 库简化操作。先通过 npm 安装或直接引入脚本。

初始化数据库并写入数据：

import { openDB } from 'idb';

const initDB = async () => {
  return openDB('SearchApp', 1, {
    upgrade(db) {
      if (!db.objectStoreNames.contains('items')) {
        const store = db.createObjectStore('items', { keyPath: 'id' });
        store.createIndex('title', 'title');
        store.createIndex('content', 'content');
      }
    }
  });
};

从远程 API 预加载数据并存入 IndexedDB（可在首次加载时执行）：

const loadAndStoreData = async () => {
  const db = await initDB();
  const res = await fetch('/api/data'); // 假设这是你的数据源
  const items = await res.json();

  const tx = db.transaction('items', 'readwrite');
  items.forEach(item => tx.store.put(item));
  await tx.done;
};

实现离线搜索功能：

唱鸭

音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

下载

const searchLocal = async (query) => {
  const db = await initDB();
  const titleIndex = db.transaction('items').objectStore('items').index('title');
  const contentIndex = db.transaction('items').objectStore('items').index('content');

  const titleResults = await titleIndex.getAll(IDBKeyRange.bound(
    query.toLowerCase(), query.toUpperCase() + '\uffff'
  ));

  const contentResults = await contentIndex.getAll(IDBKeyRange.bound(
    query.toLowerCase(), query.toUpperCase() + '\uffff'
  ));

  // 合并结果并去重
  const map = new Map();
  [...titleResults, ...contentResults].forEach(item => {
    map.set(item.id, item);
  });

  return Array.from(map.values());
};

前端集成搜索界面与状态提示

提供输入框并绑定搜索逻辑：

添加事件监听：

document.getElementById('searchInput').addEventListener('input', async (e) => {
  const query = e.target.value.trim();
  if (query.length < 2) {
    document.getElementById('results').innerHTML = '';
    return;
  }

  const results = await searchLocal(query);
  const resultsEl = document.getElementById('results');
  resultsEl.innerHTML = results.map(item =>
    `
${item.title}
${item.content}
`
  ).join('');
});

可加入网络状态检测，提示用户当前是否处于离线模式：

window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);

function updateStatus() {
  console.log(navigator.onLine ? '在线' : '离线');
  // 可更新 UI 显示“当前为离线模式”
}

添加 Web App Manifest 使其可安装

创建 manifest.json 使浏览器识别为 PWA：

{
  "name": "离线搜索应用",
  "short_name": "SearchApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

并在 HTML 中引用：