跨平台前端地图
Web、桌面、移动；desktop-apps 节点。
25 分钟
跨平台前端地图
同一套 Web 技术 可以跑在浏览器、桌面壳、手机壳里——差别在于 运行时、分发方式与系统 API 权限。本 track 覆盖 frontend 路线图的 PWA、桌面应用、移动混合 节点，帮你在「纯 Web」与「接近原生」之间做理性选型。
学习目标
- 区分 Web 应用、PWA、Electron/Tauri 桌面、移动混合四类形态
- 说清各形态在分发、更新、离线、系统能力上的 trade-off
- 对照 /roadmaps/frontend 的 desktop-apps、mobile-apps、pwas 节点
四类形态一览
| 形态 | 技术核心 | 分发 | 典型场景 |
|---|---|---|---|
| Web | HTML/CSS/JS | URL / 托管 | 官网、后台、文档站 |
| PWA | Web + Manifest + SW | 仍走 URL，可「安装」 | 离线阅读、轻量工具 |
| 桌面壳 | Web UI + 原生壳 | 安装包 / 商店 | IDE 插件宿主、内部工具 |
| 移动混合 | Web 或跨平台 UI | App Store / APK | 表单、内容、B 端 App |
没有银弹：PWA 不能替代所有原生能力；Electron 也不是所有桌面软件的最优解。
与前置 track 的分工
| 你已会 | 本 track 补什么 |
|---|---|
| html-css-essentials 结构与响应式 | 把页面「装进」桌面/主屏 |
| react-essentials 组件化 UI | 同一套 React 可进 Electron/Tauri |
| frontend-toolchain-essentials 打包部署 | 桌面/移动多一层 壳与签名 |
| http-protocol-essentials 请求缓存 | PWA 离线策略与 HTTP 缓存衔接 |
选型三问
- 必须离线吗？ 是 → 优先 PWA 或本地壳；否 → 纯 Web + CDN 往往更简单。
- 要深度系统 API 吗？（文件系统、托盘、蓝牙）→ 桌面壳或原生；Web API 够用则 PWA。
- 团队栈是什么？ 已深度 React → Electron/Tauri/Ionic；愿意学 Dart → Flutter。
CodeRoadMap platform 视角
本站 platform 以 Next.js Web 为主；路线图 desktop-apps 节点指向 Electron/Tauri 等——本 track 帮你读懂「若要把 tracks 页做成桌面客户端」需要哪些额外层，而不是重复 nextjs-essentials 的路由与 RSC 细节。