五年级英语小探险家

OFFLINE ENGLISH LEARNING PWA · GRADE 5
← 返回英语助手 v197 PWA 离线优先 0 第三方依赖

一个为离线而生的五年级英语 PWA

单文件、零依赖、可安装到手机桌面的离线学习应用。从词库、语音、复习算法到缓存策略,整套工程都在本地闭环运行——无账号、无联网上报、无后端服务器。

1

系统分层架构

表现层 单文件 PWA · 响应式 UI · 三档主题引擎(浅色 / 深色 / 护眼 + 跟随系统) 核心引擎 SRS 复习 · 单元测试 · 趣味闯关 · 单词游戏 · 双维度弱项诊断 数据层 localStorage 状态机 · 错题本 · 进度趋势 · 成就系统 资源层 Service Worker 离线缓存 · 671 个预录音频 · 人教 PEP 词库
2

关键技术与算法

🧠 SRS 难度自适应复习

手写 SM-2 风格难度系数 ease(默认 2.5,限幅 1.3~2.8):答对 +0.15、答错 -0.2,间隔按 easeIdx 在 [1,2,4,7,15,30] 天里偏移——越难的词跳得越慢、越简单的拉得越远。

// 间隔天数(天)

EASE_DEF = 2.5  // 限幅 1.3~2.8

if 答对: ease += 0.15
if 答错: ease -= 0.2

due = today + INTERVALS[easeIdx(stage, ease)]

⚡ SW 缓存失效策略

安装即接管页面,资源更新后自动刷新,根治 PWA「常驻不重启」老问题。

install → skipWaiting()

update  → controllerchange

        → location.reload()

🔊 TTS 降级方案

设备缺失语音引擎时,用 edge-tts 预录本地音频优先播放,失败则静默降级。

speak(text):

  if AUDIO_MAP[text]:

      play(local_mp3)

  else: webTTS(text)

🎯 双维度弱项诊断

按单元统计错次(热力色阶)+ 掌握度(进度条),精准定位薄弱环节。

weakByUnit[unit] = {

  sel, spell, sent   // 错题计数

}

master = solved / total // 进度条
3

工程指标

341
核心词汇
671
预录音频
9.5MB
音频总量
0
第三方依赖
100%
离线可用
196
迭代版本
4

技术栈

前端 · 原生 HTML / CSS / JavaScript(零框架) 存储 · localStorage 状态机 离线 · Service Worker(Cache-First) 语音 · edge-tts 预录 + Web Speech API 降级 部署 · GitHub Pages(静态托管) 可安装 · Web App Manifest + PWA
5

技术难点与解决方案

真实开发中被「卡住」过、并逐一破解的工程问题——每一个都来自真机实测。

🔇 设备级 TTS 整体缺失

难点一加 Ace 5 Pro / ColorOS 16 的 Web Speech API 朗读整台设备不可用(系统级语音引擎缺失,非浏览器问题),QQ 浏览器与系统浏览器均无法出声。
方案用 edge-tts(en-US-AriaNeural)批量预录 671 个 mp3(341 词 + 341 例句 + 句型,共 9.5MB),建立 AUDIO_MAP 内嵌;speak() 优先播本地音频,无则降级 web TTS,彻底摆脱运行时 TTS 依赖。
speak(text):

  if AUDIO_MAP[text]: play(local_mp3)

  else: webTTS(text)

🔄 PWA 常驻不重启,更新到不了

难点手机 PWA 长期驻留内存,Service Worker 不接管新版本,旧缓存一直生效,用户永远看不到更新。
方案install 阶段 try/catch 后必执行 skipWaiting() 抢接管;注册后监听 controllerchangesaveState()location.reload();页面可见时(visibilitychange)主动 reg.update() 查新。双保险根治缓存陈旧。
install → skipWaiting()   // 必执行

update  → controllerchange

        → saveState(); location.reload()

📦 671 音频的离线 + 国内可访问

难点671 个音频共 9.5MB,既要离线可听又不能拖慢首屏;且 Vercel / Cloudflare 子域在国内被 DNS 污染,无法直连。
方案SW 对 /audio/ 走 cache-first 永久离线;仅 install 预缓存壳资源(index / sw / icon),音频按需 fetch 时缓存;部署锁定 GitHub Pages(*.github.io 国内可直连)。

🎯 弱项诊断:从「有错」到「知道错在哪」

难点仅统计错题总数无法指导复习,孩子不知道该练哪个单元、哪种题型。
方案weakByUnit[unit] = {sel, spell, sent} 三维计数;进度页双维度热力图(色=错次、蓝条=掌握度);首页推荐「去练某单元某题型」,单元测试与闯关两路错题同源汇聚。
weakByUnit[unit] = {

  sel, spell, sent   // 错次计数

}

// 色阶: 错次→红 ; 蓝条: 掌握度

🗂️ 零依赖下的可维护词库

难点单文件 + 零依赖,341 词手维护易错、易漏音标,且音频与词表易失同步。
方案本地 Python 工具链(rebuild / expand / validate)管词库,脚本式校验词数一致;AUDIO_MAP 由脚本生成,保证与词库同源同步,改词后一键重生成音频。
6

版本演进

时间线排序
五年级英语小探险家 · 单文件离线 PWA · 数据全部存于本机浏览器,无账号、无联网上报
版本 v197 · 缓存 eng5-v258 · 更新于 2026-09-16
← 返回英语助手