# 用 WorkBuddy 半小时搭建个人生活工作台 PWA：日程、背单词、练琴一站搞定

> 本文记录了使用腾讯 WorkBuddy 从零搭建一个移动端个人工作台的完整过程，包含 PWA 离线缓存实践和一个 Service Worker 缓存死锁问题的排查修复。

## 一、为什么想做这个

作为一个正在备考六级、同时练钢琴的学生，手机上装了一堆 App：日历、待办、背单词、计时器……来回切换很烦。一直想做一个属于自己的个人工作台，把日程管理、六级备考、练琴记录整合到一起。

但问题是我前端水平一般，从零写一个完整的 Web App 还是有点吃力。这次试着用 WorkBuddy 来做，没想到整个过程非常顺畅。

## 二、最终效果

最终产出了一个 PWA 应用，可以安装到手机桌面，像原生 App 一样使用，支持离线访问。主要功能包括：

**五个底部 Tab 页：**

| Tab | 功能 |
|-----|------|
| 🏠 首页 | 今日日程管理、打卡统计（待办数、背词量、练琴时长、连续打卡天数） |
| 📝 背单词 | 内置 100 个六级核心词汇，闪卡翻转 + 左右滑动切换，支持标记"已掌握" |
| 📄 刷题 | 8 道六级真题练习（阅读 3 篇 + 翻译 3 题 + 写作 2 题），点击查看答案和解析 |
| 🎬 短剧 | 9 部豆瓣高分英语短剧推荐，标注难度和适合人群 |
| 🎯 计划 | 练琴计时器、曲目管理、生活目标进度条 |

所有数据通过 `localStorage` 本地存储，不需要后端服务器。部署到 CloudStudio 后，手机直接访问链接就能用。

## 三、搭建过程

### 3.1 提需求

整个过程就是跟 WorkBuddy 说自然语言。我的第一句话大概是这样的：

> "帮我做一个移动端友好的个人生活工作台，包含日程管理、英语学习、练琴计时功能，要好看，可以安装到手机桌面。"

WorkBuddy 自动拆解了任务：设计 UI、写 HTML/CSS/JS、添加 PWA 配置、生成图标、部署上线。整个过程我只需要在关键节点做选择和确认。

### 3.2 核心代码结构

整个应用是单文件 HTML，没有用任何框架，纯原生 JS + CSS：

```
dashboard/
├── index.html       # 主应用（HTML + CSS + JS 全在一个文件）
├── sw.js            # Service Worker（离线缓存）
├── manifest.json    # PWA 配置
├── icon-192.png     # 桌面图标
├── icon-512.png     # 高清图标
└── qr.html          # 二维码页面（方便手机扫码访问）
```

### 3.3 数据持久化

用 `localStorage` 做本地存储，不需要后端：

```javascript
var STORAGE_KEY = 'my_dashboard_v2_data';

function loadData() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || getDefaults();
  } catch(e) {
    return getDefaults();
  }
}

function saveData(data) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
```

存储的数据结构包含：日程列表、练琴曲目、生活目标、连续打卡天数、词汇学习进度、已掌握的单词等。每次操作后自动保存，刷新页面不丢数据。

### 3.4 闪卡交互

背单词模块的闪卡支持点击翻转和左右滑动切换，移动端体验比较好：

```javascript
// 点击翻转
function flipCard() {
  isFlipped = !isFlipped;
  var fc = document.getElementById('flashcard');
  if (isFlipped) {
    fc.style.transform = 'rotateY(180deg)';
    // 翻转后显示释义
  } else {
    fc.style.transform = 'rotateY(0deg)';
    // 翻回显示单词
  }
}

// 触摸滑动切换
document.getElementById('flashcard').addEventListener('touchend', function(e) {
  var diff = e.changedTouches[0].clientX - touchStartX;
  if (Math.abs(diff) > 50) {
    if (diff > 0) prevWord();
    else nextWord();
  }
});
```

### 3.5 PWA 配置

通过 `manifest.json` 让应用可以安装到桌面：

```json
{
  "name": "我的工作台",
  "short_name": "工作台",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#F9F6F2",
  "theme_color": "#E07B6C",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}
```

### 3.6 部署

WorkBuddy 自带 CloudStudio 部署能力，一键把本地文件部署到云端，生成一个可访问的 URL。手机扫码就能打开，不需要自己配服务器。

## 四、踩坑：Service Worker 缓存死锁

这是整个过程中最有价值的一个坑，值得单独拿出来说。

### 4.1 问题现象

应用部署成功后，我在手机上打开链接，一切正常。但后来做了功能升级（加了背单词、刷题等模块），重新部署后发现——**手机上还是显示旧版本，怎么刷新都没用。**

### 4.2 原因分析

第一版 Service Worker 用的是 **cache-first（缓存优先）** 策略：

```javascript
// 问题代码
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request);  // 先查缓存，缓存没有才请求网络
    })
  );
});
```

这个策略的问题在于：**它会拦截所有请求，包括 `sw.js` 自身的更新检查。**

浏览器定期检查 `sw.js` 是否有更新，但由于 cache-first 策略，这个检查请求也被旧 Service Worker 拦截了，直接返回了缓存的旧版 `sw.js`。浏览器一看"没变化"，就不会安装新的 Service Worker。

**形成了死锁**：旧 SW 拦截更新检查 → 浏览器认为没更新 → 旧 SW 继续服务 → 继续拦截……

### 4.3 解决方案

修复分两步：

**第一步：改 Service Worker 策略**

HTML 请求走 **network-first**（先查网络），静态资源保持 **cache-first**（离线可用）：

```javascript
self.addEventListener('fetch', function(e) {
  // HTML 请求走 network-first，确保总是拿到最新内容
  if (e.request.mode === 'navigate' || e.request.destination === 'document') {
    e.respondWith(
      fetch(e.request)
        .then(function(response) {
          var cloned = response.clone();
          caches.open(CACHE).then(function(cache) {
            cache.put(e.request, cloned);
          });
          return response;
        })
        .catch(function() {
          return caches.match(e.request);
        })
    );
    return;
  }
  // 静态资源走 cache-first，离线也能用
  e.respondWith(
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request);
    })
  );
});
```

**第二步：注册时禁用 SW 自身的缓存**

```javascript
// 加上 updateViaCache: 'none'，确保浏览器检查 sw.js 时绕过缓存
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js', { updateViaCache: 'none' });
}
```

**第三步：激活时清理旧缓存**

```javascript
self.addEventListener('activate', function(e) {
  e.waitUntil(
    caches.keys().then(function(keys) {
      return Promise.all(
        keys
          .filter(function(k) { return k !== CACHE; })
          .map(function(k) { return caches.delete(k); })
      );
    }).then(function() {
      return self.clients.claim();
    })
  );
});
```

改完 `CACHE` 版本号（如 `workbench-v2` → `workbench-v3`），所有客户端下次打开就会自动拉取新版并清理旧缓存。

### 4.4 已经卡住的用户怎么办

如果你的用户已经遇到了缓存死锁（旧 SW 拦截了一切），光改服务器代码是推不进去的。需要用户手动清理一次：

- **iOS**：设置 → Safari → 高级 → 网站数据 → 搜索域名 → 删除
- **Android**：浏览器设置 → 清除网站数据
- **PWA 已安装到桌面**：先删除桌面图标，清完数据后重新打开链接安装

## 五、总结

### 做了什么

- 用 WorkBuddy 从零搭建了一个 PWA 个人工作台
- 功能：日程管理、六级词汇闪卡、真题练习、短剧推荐、练琴计时器、目标追踪
- 纯前端实现，`localStorage` 存储，无需后端
- 部署到 CloudStudio，手机可安装到桌面

### 踩了什么坑

- PWA Service Worker 的 cache-first 策略会导致更新无法推送
- 需要用 network-first + `updateViaCache: 'none'` + 版本化缓存来解决
- 已经卡住的用户需要手动清一次网站数据

### 关于 WorkBuddy 的使用感受

整个过程比较顺畅的地方：
- 用自然语言描述需求就能生成完整的可运行代码
- 一键部署到云端，手机直接能访问
- 遇到缓存问题时，描述清楚现象它就能定位到 Service Worker 策略问题

需要注意的地方：
- 复杂任务消耗积分比较快，免费额度 500 积分可能不够用
- 生成代码后最好自己过一遍逻辑，特别是缓存策略这类容易出坑的地方

---

以上就是我这次用 WorkBuddy 搭建个人工作台的完整记录，希望对想用 WorkBuddy 做 PWA 应用的同学有帮助。


本文记录了使用腾讯 WorkBuddy 从零搭建一个移动端个人工作台的完整过程，包含 PWA 离线缓存实践和一个 Service Worker 缓存死锁问题的排查修复。

重生之———我在WorkBuddy当程序员

使用WorkBuddy生成一个专属于自己的工作台，以及遇到温度

前端

开发工具

客户端

用WorkBuddy半小时搭建个人生活工作台PWA，集成日程管理、六级背单词、练琴计时等功能，纯前端localStorage存储，一键部署CloudStudio。文章详细记录ServiceWorker缓存死锁问题及network-first策略修复方案，适合想快速构建移动端PWA应用的开发者参考。

数据结构

代码解释

服务器

WorkBuddy 

Android

JSON

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

2026上云采购 | AI焕新·智启新局

databuddy

热销域名限时优惠，新客首年免费！


domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

重生之———我在WorkBuddy当程序员-腾讯云开发者社区-腾讯云

重生之———我在WorkBuddy当程序员

重生之———我在WorkBuddy当程序员

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐