ReminderApp

基于 Blazor WebAssembly PWA 的移动端提醒事项应用。数据保存在浏览器本地，无需购买服务器即可部署到免费静态托管平台。

功能

• 增删改查提醒事项（内容、提醒时间、最晚完成时间）
• 标记事项为完成
• 已完成事项不可删除
• 新增事项或修改最晚完成时间时发送通知
• 到达提醒时间时发送通知
• 支持安装到手机主屏幕（PWA）

本地运行

cd ReminderApp
dotnet run

浏览器访问 http://localhost:5xxx（端口见终端输出）。

发布

cd ReminderApp
dotnet publish -c Release

发布产物位于 ReminderApp/bin/Release/net10.0/publish/wwwroot，将该目录内容上传到静态托管即可。

GitHub Pages 自动部署（推荐）

项目已配置 GitHub Actions，推送到 main 分支后会自动构建并发布。

第一次配置（只需做一次）

1. 在 GitHub 创建仓库

1. 打开 GitHub 新建仓库
2. 仓库名例如 Reminder（可自定义）
3. 选择 Public（GitHub Pages 免费版需要公开仓库）
4. 不要勾选 "Add a README"（本地已有代码）
5. 点击 Create repository

2. 将本地代码推送到 GitHub

在项目根目录 d:\1-Study\Reminder 打开终端，依次执行（把 你的用户名 换成你的 GitHub 用户名）：

git init
git add .
git commit -m "Initial commit: Reminder PWA app"
git branch -M main
git remote add origin https://github.com/你的用户名/Reminder.git
git push -u origin main

3. 启用 GitHub Pages

1. 打开 GitHub 仓库页面
2. 进入 Settings → Pages
3. 在 Build and deployment 中：
   • Source 选择 GitHub Actions（不是 Deploy from a branch）
4. 保存即可，无需其他配置

4. 等待部署完成

1. 进入仓库的 Actions 标签页
2. 看到 "Deploy to GitHub Pages" 工作流显示绿色 ✓ 即表示成功
3. 回到 Settings → Pages，页面顶部会显示访问地址

访问地址格式：

仓库类型	地址示例
普通仓库 Reminder	https://你的用户名.github.io/Reminder/
用户主页仓库 你的用户名.github.io	https://你的用户名.github.io/

日常使用

每次修改代码后，只需：

git add .
git commit -m "描述你的修改"
git push

推送后 GitHub Actions 会自动重新部署，通常 1～3 分钟生效。

也可以手动触发：仓库 Actions → 选择 Deploy to GitHub Pages → Run workflow。

手机端使用

1. 用手机浏览器打开上述 GitHub Pages 地址
2. 点击右上角 开启通知，允许浏览器通知权限
3. 点击浏览器菜单 → 添加到主屏幕 / 安装应用
4. 从桌面图标打开，即可像 App 一样使用

注意：GitHub Pages 使用 HTTPS，通知功能可以正常工作。数据保存在手机浏览器本地，换设备不会同步。

部署失败排查

现象	解决方法
Actions 报 .NET 版本错误	确认 workflow 中使用 10.0.x，或本地改为 net8.0
页面空白	检查 Pages 是否设为 GitHub Actions 源；确认 Actions 已成功
404 找不到资源	确认访问地址包含仓库名路径，如 /Reminder/
通知不弹出	需 HTTPS + 用户授权；iOS 需先「添加到主屏幕」

---

其他免费部署方式

Azure Static Web Apps（免费层）

1. 在 Azure 创建 Static Web App
2. 构建命令：dotnet publish ReminderApp/ReminderApp.csproj -c Release -o output
3. 输出目录：output/wwwroot

Cloudflare Pages / Netlify

直接上传 publish/wwwroot 目录，无需后端配置。

手机使用建议

1. 用手机浏览器打开部署后的地址
2. 点击「开启通知」并允许通知权限
3. 在浏览器菜单中选择「添加到主屏幕」
4. 从主屏幕图标打开，体验接近原生 App

数据存储

• 使用 SQLite（浏览器端 sql.js WASM 引擎）
• 数据库文件持久化在浏览器 IndexedDB 中
• 首次启动会自动将旧版 localStorage 数据迁移到 SQLite
• 清除浏览器网站数据会丢失所有事项

通知说明

• 通知依赖浏览器 Notification API，需用户授权
• 定时提醒在页面打开时最可靠；安装为 PWA 后，部分浏览器可在后台推送

技术栈

• .NET 10 + Blazor WebAssembly
• SQLite（sql.js 浏览器 WASM）
• PWA（Service Worker + Web Manifest）
• 浏览器通知（Notification API）