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

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

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))
  );
});

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');
      }
    }
  });
};

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;
};

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());
};

<input type="text" id="searchInput" placeholder="搜索内容...">
<div id="results"></div>

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 =>
    `<div><h3>${item.title}</h3><p>${item.content}</p></div>`
  ).join('');
});

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

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

{
  "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"
    }
  ]
}

<link rel="manifest" href="/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1">