Readest 网页版离线阅读功能完整指南断网也能畅读电子书【免费下载链接】readestReadest is a modern, feature-rich ebook reader designed for avid readers offering seamless cross-platform access, powerful tools, and an intuitive interface to elevate your reading experience.项目地址: https://gitcode.com/gh_mirrors/re/readestReadest 是一款支持 Web、桌面、移动端的现代电子书阅读器它的网页版内置离线能力基于 Service Worker 和浏览器本地存储把读过的页面、书籍文件留在设备上断网时继续流畅翻页恢复联网后再自动刷新内容。通勤、飞行、偏远地区出差任何网络不稳定的读者都会用得上。断网之后Readest 网页版还能做什么离线能力解决的不是打开网站这一件事而是三件具体的事继续读已经打开的书。网页版把导入的书籍内容存进浏览器的 IndexedDB翻页渲染时优先读本地副本而不是每次都从服务器拉文件。地铁里信号断了几分钟阅读不会白屏等待。书架和阅读进度照常可用。已加载的页面走本地缓存断网时切换书籍、翻回上一章这类操作基本无感。联网后自动追上进度。Readest 的同步服务src/services/sync/会在网络恢复后同步阅读状态你在离线期间读到的位置换台设备登录也能接上。对普通用户来说体感就是网络断了阅读器没断。为什么用 Service Worker Serwist 实现离线阅读的关键矛盾是网页应用默认不联网就没有内容但读者要的是本地有数据就能读。Readest 的解法分两层Service Worker 拦截请求。它运行在浏览器后台能截获页面向服务器发起的每次请求决定走网络还是走缓存。这是所有 PWA 离线能力的地基。浏览器本地存储持久化数据。书籍文件、元数据存在 IndexedDB 里见 webAppService.ts 中封装的indexedDBFileSystem容量远大于普通 Cookie 缓存重启浏览器后依然保留。具体到框架选型Readest 用SerwistWorkbox 的下一代缓存库接入 Next.js而不是手写 Service Worker。原因是 Next.js 项目里构建产物路径由框架生成手写缓存清单很容易漏资源Serwist 能在构建时自动生成 precache 清单页面代码更新后旧缓存也会跟着失效。这个方案还有一个刻意的取舍离线能力只在 Web 生产构建中启用。桌面端Tauri和移动端本身就是本地应用书籍文件就在设备上走 Service Worker 缓存反而多此一举所以在 next.config.mjs 里用开关直接关掉const pwaDisabled isDev || appPlatform ! web; const withPWA pwaDisabled ? (config) config : withSerwistInit({ swSrc: src/sw.ts, swDest: public/sw.js, cacheOnNavigation: true, reloadOnOnline: true, });拆解要点pwaDisabled开发模式或桌面/移动构建时跳过 Service Worker避免干扰调试cacheOnNavigation: true页面导航本身就进缓存SPA 路由切换离线也能命中reloadOnOnline: true检测到网络恢复后自动重新加载页面拿到最新内容关键落地细节缓存策略是核心Service Worker 建好只是骨架怎么决定哪些请求走网络、哪些走缓存才是离线的成败关键。全部策略集中在 src/sw.ts核心是三段差异化配置runtimeCaching: [ // 核心路由 /library、/reader网络优先3 秒超时回退缓存 { matcher: ({ url, request }) [/library, /reader].some((r) url.pathname.startsWith(r)) request.mode navigate, handler: new NetworkFirst({ cacheName: client-pages, networkTimeoutSeconds: 3 }), }, // 字体等静态资源缓存优先一年有效 { matcher: isFontRequest, handler: new CacheFirst({ cacheName: fonts-cache }) }, ]三种请求三种待遇每类都对应一个明确的理由资源类型策略为什么/library、/reader页面NetworkFirst3 秒超时页面要尽量新鲜但网络慢时不能卡死超时立刻读缓存字体等静态资源CacheFirst有效期 2 年内容极少变化优先本地读取首屏速度最快其他外部资源NetworkFirst通用兜底与页面保持一致的取舍另外两个值得注意的细节兜底离线页。所有document类型请求即用户直接访问的页面失败时Serwist 会回退到/offline路由由 离线页面 展示你已断网的提示而不是浏览器默认的无法访问页面。缓存不会无限膨胀。每类缓存都挂了ExpirationPlugin限定条目数和有效期页面缓存 128 条、字体 200 条、外部资源 512 条超出自动淘汰避免把用户浏览器磁盘塞满。普通用户怎么用好离线阅读先联网喂一遍缓存。离线能力是读过的才留得住。想离线读某本书先在网络好的时候打开它、把前后章节翻一遍缓存命中之后断网才丝滑。核心场景优先选 Web 版。离线 Service Worker 只在网页构建中启用如果你主要在网络不稳定的环境阅读用浏览器版 Readest 比装个会联网同步的桌面版更稳。断网后别急着刷新页面。reloadOnOnline会在网络恢复时自动处理期间手动刷新反而可能触发一次失败请求等页面自己恢复正常即可。注意浏览器存储清理。书籍内容存在 IndexedDB 里手动清除网站数据会连带删掉离线缓存下次需要重新联网加载。小结Readest 用 Service Worker Serwist IndexedDB 的组合把网页阅读器从依赖网络变成本地优先、联网刷新书籍文件落本地存储请求层面按资源类型分配缓存策略离线兜底页保证断网时体验不崩。想深入实现细节可以看 架构文档 中 Service worker and offline 一节和 sw.ts 源码。【免费下载链接】readestReadest is a modern, feature-rich ebook reader designed for avid readers offering seamless cross-platform access, powerful tools, and an intuitive interface to elevate your reading experience.项目地址: https://gitcode.com/gh_mirrors/re/readest创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考