Canonical: https://botbento.com/zh/usecases/scaffolding-offline-progressive-web-apps/
Format: Markdown representation of the public HTML page.

[首页](/) / [用例](/zh/usecases/) / [编程](/zh/usecases/?category=coding)

编程 · 中级

已验证

自动化验证

- 已通过全部自动化关卡：结构校验、唯一性、HTTPS 与来源链接可访问、提示注入与安全扫描、审批步骤规则。
- 未记录起草模型。
- 第二模型审核：deepseek-v4-pro（无严重或高危问题）。
- 简体中文译文：google/gemini-4-argon，由 openai/gpt-5.5 审核。
- 验证于 2026-10-16。
- 仅经自动化检查和 AI 审核，未经人工审核。[验证如何运作](/zh/usecases/verification/)

# 搭建离线渐进式 Web 应用

为静态网站生成 Service Worker 缓存、响应式音频播放器 UI 和元数据。

[在 BotBento 中使用 ](https://app.botbento.com/?ref=usecases&utm_source=botbento.com&utm_medium=usecases&utm_campaign=scaffolding-offline-progressive-web-apps)复制提示词分享[Markdown](/text/zh/usecases/scaffolding-offline-progressive-web-apps/index.md)[English](/usecases/scaffolding-offline-progressive-web-apps/)

打开 BotBento。请将提示词粘贴到 Bot 中；不含任何预设配置。

- 你提问时触发指定应用需求
- 然后起草 Service Worker 和播放器 UI
- 结果审查代码并确认提交

构建具有离线功能和流畅媒体控制的轻量级 Web 应用。该 Bot 可帮助设计 Service Worker 架构、实现缓存优先的音频加载策略、设计播放列表状态逻辑，并使用原生 Web 标准创建可共享的路由元数据。

## 起步提示词

BotBento推荐

```
当被要求构建或修改应用代码时，生成整洁的 HTML、CSS 和原生 JavaScript，用于音频播放和渐进式 Web 应用清单。使用合理的保留规则为媒体文件和资源配置 Service Worker 缓存。始终展示代码差异以供审查，未经用户明确批准，绝不删除文件或将 git 提交推送到远程仓库。
```

复制

## 所用工具

终端GitHub

## 适用于

BotBento

## 标签

- pwa
- javascript
- frontend
- webdev

## 来源

[Show HN: Yamanote.fun – A complete soundscape for Tokyo's Yamanote line](https://news.ycombinator.com/item?id=48816987)
Hacker News · 已核查 2026-10-15

内容以我们自己的话概述。其中描述的任何结果均为原作者所述，并非 BotBento 实测。

由 AI 辅助自英文版翻译，并经自动审核模型检查。以英文文本为准。

作者：BotBento Editorial · 发布于 2026-10-15 · 更新于 2026-10-15 · [提交更正](/contact/)

## 相关用例

-

编程中级

## [构建带标绘时间线的交互式奇幻地图](/zh/usecases/build-an-interactive-fantasy-map-with-plotted/)

为虚构世界生成坐标标记、角色行进路线及交互式地图图层

聊天终端GitHub[已验证](/zh/usecases/verification/)
-

编程入门

## [通过自然语言构建轻量级个人 Web 应用](/zh/usecases/building-lightweight-personal-web-apps-from-natural/)

通过对话式迭代，将小型单页工具的构想转化为可运行的本地 Web 项目

终端浏览器[已验证](/zh/usecases/verification/)
-

编程中级

## [一致性前端界面生成器](/zh/usecases/consistent-frontend-interface-generator/)

将应用需求转化为系统化、统一协调的界面代码

终端GitHub聊天[已验证](/zh/usecases/verification/)