PWA前端独立开发

用 PWA 低成本构建个人应用：我的实践与思考

为什么 PWA 是独立开发者最低成本的应用分发方式，以及我在开发中积累的实践经验。

约 2 分钟

独立开发者在「做一个应用」这件事上，最大的成本往往不是写代码，而是分发：上架商店要审核、要资质、要分成；维护原生应用要学多套技术栈。PWA 用一套 Web 技术，几乎零成本地解决了这些问题。

为什么选 PWA

  • 免安装：浏览器打开即用，不需要应用商店
  • 可离线：Service Worker 缓存后，断网也能用
  • 可安装：添加到主屏幕，有独立的图标和启动画面
  • 跨平台：Windows / macOS / iOS / Android 通吃

对个人工具型应用来说，这四点几乎是完美匹配：用户用完即走，不需要下载几百 MB 的安装包。

我的技术组合

前端：原生 HTML + CSS + JS（或轻量框架）
存储：IndexedDB（离线数据）
缓存：Service Worker 运行时缓存
构建：Vite / 直接静态部署
托管：Cloudflare Pages（免费）

没有后端？对个人工具完全可以。数据存在本地 IndexedDB，配合导入导出功能，用户的信任成本反而更低——数据掌握在用户自己手里。

三个容易踩的坑

  1. 缓存更新策略：SW 缓存太激进会卡住新版。我的做法是「网络优先 + 失败回退缓存」，并给 SW 加版本号。
  2. iOS 的坑：iOS 的 Safari 对 PWA 支持最好，但 iOS 16 之前不支持 push 通知；standalone 模式下地址栏消失，要注意顶部安全区（viewport-fit=cover + env(safe-area-inset-top)）。
  3. 别把 manifest 当摆设：图标、主题色、启动页这些细节决定了用户愿不愿意「添加到主屏」。

什么时候不适合 PWA

  • 需要强系统能力（蓝牙、后台任务、深度文件系统）→ 考虑 Capacitor 等混合方案
  • 重度付费 → 支付渠道仍是短板
  • 需要复杂多人实时协作 → 需要考虑后端与同步方案

一点感想

PWA 不适合做「大而全」的旗舰应用，但非常适合一个人安静地解决一个小问题。它让「做一个有用的东西」这件事的门槛，降到了每个开发者都够得着的地方。