PWA离线搜索实现：IndexedDB搭建教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《PWA离线搜索实现：IndexedDB后端搭建指南》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

答案：构建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;
};

实现离线搜索功能：

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 
    `<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 显示“当前为离线模式”
}

添加 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 中引用：

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

好了，本文到此结束，带大家了解了《PWA离线搜索实现：IndexedDB搭建教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！