跳到正文
工具产品 V2 · 已部署

把个人定投清单做成可离线运行的手机 PWA

从可离线运行的手机 PWA,继续迭代成每天只需更新「破界行动」、训练与日记 3 个事实、自动汇总并一键生成图片的个人状态工具。

2026 年 10 月版手机预览界面示例:行动档案与 PNG 导出入口,展示默认数据
公开工具界面示例
这篇记录结果、证据与限制

问题与假设

定投清单网页已经能够快速生成图片,实际使用耗时很低,也不需要额外处理。但我仍要先打开网址,它在使用感受上更像一个网页工具,而不是每天可以直接调用的轻量应用。

这一阶段要检验的不是“能否做出更多功能”,而是一个更具体的假设:如果把现有编辑器安装到手机桌面,并统一启动路径与离线缓存,它就能以独立窗口运行,在断网时继续完成核心任务。

约束与关键决策

这次迭代主动保留了三条约束:不增加账号、不增加云同步、不把它扩张成通用习惯追踪器。产品仍然只围绕一个高频任务:在手机上填写当天信息并导出公开清单。

关键决策是统一 PWA 的安装入口、启动地址和离线缓存路径,同时让本地测试服务器模拟 Cloudflare Pages 的路由规范化行为。这样,测试面对的是接近正式环境的路径,而不是一个更容易通过的理想环境。

本阶段产出与验证

  • 可以安装到手机桌面的 PWA;
  • 点击图标后直接进入清单工作区,以无地址栏的独立窗口运行;默认先进入“填写”,更新当天信息后切至“预览”;
  • 表单内容自动保存在当前浏览器;
  • 实时生成 1080 × 1536 清单预览;
  • 支持 PNG 下载、JSON 备份和离线使用。

你可以在线打开编辑器 ,也可以在 GitHub 仓库 查看源码、测试和使用说明。

V1 先用自动化检查启动入口、独立显示模式、自动保存、备份恢复、图片尺寸和离线下载;随后在真实 Android 手机上逐项验收:

REAL DEVICE ACCEPTANCE V1 · 真实 Android 手机 · 5 / 5 通过
  1. 桌面图标能够启动通过
  2. 启动后没有浏览器地址栏通过
  3. 直接进入编辑器通过
  4. 关闭后数据仍然保留通过
  5. 断网后能够填写并下载图片先失败,修复后通过

第五项第一次测试失败:应用在断网冷启动时显示 ERR_FAILED。本地测试此前却是通过的,这说明测试环境没有复现正式部署环境。

排查后发现,Cloudflare Pages 会把 /editor.html 规范化跳转到 /editor,而旧离线缓存与安装入口使用了不同的路由。修复时统一了启动和缓存路径,并把本地测试服务器改为模拟 Cloudflare Pages 路由。随后,本地、正式域名自动测试以及同一台手机复验全部通过。

后续生命:V2 把“填写清单”压缩成 3 个事实

V1 解决的是“能不能像一个轻量 App 一样安装、离线运行和导出图片”。继续使用后,新的问题变得更具体:如果每天还要输入太多字段,工具本身就会开始抢占注意力。

因此 V2 没有继续增加功能,而是反过来做减法,把日常操作收敛到三个事实:

  • 「破界行动」分钟(高质量阅读与批判性思维训练);
  • 今日训练状态;
  • 日记是否完成。

其中「破界行动」从键盘输入改成了 0–180 分钟、每 5 分钟一档的滑块,90 分钟作为当前目标刻度。滑动时数值、周统计和公开 PNG 会一起更新;训练与日记继续用状态选择。

周度信息不再要求重复填写:系统自动汇总本周「破界行动」时长和力量训练次数。阶段、当前阅读、投资状态和本周交付物仍然保留,但被降为低频设置。

这次迭代也保留了原来的边界:

  • 不增加账号;
  • 不增加云同步;
  • 不变成完整的健康数据库;
  • 不公开血糖、症状、睡眠原始记录等私人数据;
  • 继续以浏览器本地存储和手动备份为主。

部署方式也没有为了“工程化”而复杂化。Checklist 继续使用 Cloudflare Pages Direct Upload,由本机执行一条部署命令;GitHub Actions 只负责代码验证,不额外维护 Cloudflare Secrets。

目前它开始承担一个新的角色:不再只是“个人定投清单”,而是作息重构实验的低摩擦记录与公开输出层。 复杂判断留在博客和实验复盘里,Checklist 只负责输入今天发生的事实,然后把状态计算和图片生成交给系统。

2026-10-05:让公开案例跟上当前版本

这次发布把清单界面与博客统一为暖色纸张和漫画线条,也把默认入口改为“填写”。先更新当天三个事实,再切到“预览”查看行动档案,最后下载图片。案例顶部截图来自新版正式站的默认数据,只用来展示界面。

我在正式域名重新检查了填写、自动保存、JSON 备份恢复、1080 × 1536 PNG,以及离线填写和下载。博客的跨站测试也从案例中的成品链接进入工作区,检查填写、重新加载后保留数据、切换预览和实际下载。这些检查确认了本次发布的浏览器路径;上面的真实 Android 验收属于 V1,长期效果仍要回到实际使用记录里判断。

反证、限制与边界

  • 数据默认只存在当前浏览器的本地存储中;
  • 清理站点数据或卸载浏览器可能造成数据丢失,需要主动导出备份;
  • 第一次安装和获取新版本需要网络;
  • 当前字段首先服务于我自己的定投清单,并不是一款通用习惯追踪器;
  • 本轮证明了技术可用性,没有把短期体验夸大为长期效率提升。

复盘与下一步

这次最有价值的结果不是“所有测试最终通过”,而是手机上的真实失败暴露了自动化测试的盲区。测试只有覆盖真实部署环境和真实使用路径时,才有资格成为证据。

后续迭代继续遵循一个简单规则:没有真实失败或明确需求,就不为了显得完整而增加功能。

结果、证据与限制

正文记录了过程;这里集中放可以核对的结果和仍未解决的部分。

阶段结果

V1 完成可安装与离线使用;V2 将日常输入收敛为「破界行动」分钟、训练状态、日记状态 3 个事实,自动汇总周进度并一键下载 1080 × 1536 PNG。

验证证据

V1 在真实 Android 手机上完成 5 项验收;2026-10-05 在正式域名通过新版浏览器检查,覆盖填写、自动保存、JSON 备份恢复、1080 × 1536 PNG 与离线使用。

当前限制

数据只保存在当前浏览器,不自动跨设备同步;首次安装和获取更新仍需要联网。

下一步判断

进入真实使用:用它记录作息重构实验中的「破界行动」、训练与日记状态;只有再次出现明确摩擦时才增加功能。

当时怎么判断
问题

网页生成器虽然操作很快,但仍需先打开网址;断网冷启动也没有被真实验证。

假设

如果将编辑器安装为 PWA,并让启动地址与缓存路由保持一致,就能像轻量 App 一样独立完成核心任务。

约束

不增加账号、云同步和复杂配置;继续保持单页、低操作成本与本地数据边界。

关键决策

统一安装入口与 Cloudflare 路由,并让自动化测试模拟正式部署环境,再用真实手机复验。

这件作品后来发生了什么

这里只记录发布以后真实带回的反馈、认知与复用,不补写预期。

后来带回了什么

  1. 新版默认先进入填写,切到预览后查看行动档案;界面与博客统一采用暖色纸张和漫画线条。正式域名已验证输入、自动保存、备份恢复和离线图片下载,案例截图与跨站测试也同步到这次发布。长期使用效果继续由实际记录检验。

  2. 持续使用后发现每日输入字段过多会开始抢占注意力,因此 V2 没有继续加功能,而是把日常输入收敛为「破界行动」分钟、训练状态、日记状态 3 个事实,并自动汇总周进度;「破界行动」是高质量阅读与批判性思维训练的内部代号,这次真实使用反馈直接改变了产品设计。

后来用在了哪里

  • 作息重构实验 V1

    复用原有 PWA 的安装、离线、本地存储与 PNG 生成能力,把它改造成作息重构实验的低摩擦日常记录与公开输出层,避免重新开发一套记录工具。

  • 《我不想再把个人博客做成作品陈列柜》

    将 V1 真实手机断网失败、修复与复验过程重新作为文章中的核心案例,用过去已经验证过的证据支撑新的博客方法论,而不是重新寻找一个示例。

读到这里,聊两句?

有共鸣、有疑问,或者觉得哪句不太对,都欢迎告诉我。馒头经得起揉。

无需注册;昵称和留言会公开,邮箱可不填。评论审核后显示。打开时会连接本站评论服务。

把博客添加到主屏幕 / 桌面

以独立应用窗口打开博客;已浏览的页面可离线阅读,留言需要联网。

FOLLOW MANTOU

关注馒头