1. 开篇：要做一个什么样的应用
功能上是一个app支持音乐，视频，有声书，同一套代码需要覆盖 Android、iOS、Windows、macOS 和普通浏览器，甚至车机。 在前期技术选型中用过uniapp,涉及到需要区分平台时，大多是安卓写一套，ios写一套，这样更像是两端代码柔和到一个项目中，感觉不太好。而且第三方包不太好找，很多还都是云打包(收费)，而我需要一套完全本地编译打包的程序。
2. PWA应用的能力
PWA 不是一个独立运行时，而是 Web 应用加上 Manifest、Service Worker、HTTPS 和一组渐进增强能力。
可安装
- 添加到手机主屏幕或桌面应用列表
- 使用独立窗口运行，隐藏常规浏览器地址栏
- 配置应用名称、图标、主题色、启动地址和屏幕方向
- 支持 Android、iOS、Windows、macOS，但安装入口和体验不同
系统媒体能力
适合音乐、有声书和视频应用：
- 锁屏展示歌曲、封面和作者信息
- 响应播放、暂停、上一首、下一首
- 接入系统媒体控制中心
- 支持画中画、全屏播放等浏览器能力
- 部分浏览器支持后台音频播放
后台播放的稳定性受 iOS、浏览器生命周期和系统省电策略影响，不能达到所有原生播放器的可靠程度。
这些能力平台差异很大。IOS整体体验较好，Android还是用了轻量原生壳，比如：原生实现视频播放相关功能，全屏播放，屏幕常亮，虽然屏幕常亮可以用 navigator.wakeLock.request('screen')设置但总有兼容问题，还有ios兼容问题，如：默认自动播放音频只能无声播放，需要手动点击dom后才能有声播放，我的解决办法是只要点击音乐模块的入口，就播放一段什么都没有的音乐，这样可以实现播放歌曲时自动有声播放。
本地存储
IndexedDB：保存业务数据和较大的 Blob。
Local Storage：保存少量配置
注意：浏览器有权在空间不足时回收数据，因此不能把 PWA 存储当作永久磁盘或唯一数据源。
3. 案例拆解：这个多端 Web 应用怎样落地 PWA
3.1 安装与窗口体验
manifest.webmanifest配置display: standalone、竖屏方向、主题色、192/512 图标和 maskable 图标。- iOS 通过 Safari“添加到主屏幕”，Android Chrome 提供安装提示，桌面浏览器以独立窗口运行。
apple-touch-icon、viewport、状态栏背景和移动端禁缩放等细节决定“像不像 App”。
3.2 Service Worker 与缓存分层
- 预缓存应用壳：
main.html、manifest、图标和默认图片。 - 运行时缓存按资源分类：页面、JS/CSS、字体、图片、其他同源 GET 请求。
- 当前策略以 Cache-First 为主，并在 activate 阶段删除旧版本缓存；设置页/版本更新逻辑支持主动清缓存。
- 版本化发布：Vite 构建输出
v<version>目录，Service Worker 的缓存名携带版本号，减少旧资源与新资源混用。
3.3 数据与媒体离线
- IndexedDB 保存音频 Blob、首页数据、播放进度和有声书轨道缓存；用户主动下载的音频可在离线时播放。
- Media Session API 接入系统媒体控制中心，提升锁屏/后台操作体验，但需按浏览器能力降级。
4. PWA 在多端应用中的主要优点
4.1 研发与交付效率
- 一套业务代码覆盖手机、桌面和浏览器，减少原生多仓库的重复实现。
- URL 可分享、无需应用商店审核，发布链路短，适合快速试错和小团队维护。
- 既可保留 Web SEO/链接传播能力，也可通过安装获得独立窗口入口。
4.2 用户体验收益
- standalone 窗口、启动图标、主题色和媒体会话让 Web 应用更接近轻量原生应用。
- 用户可以先访问再决定安装，不必先下载数十 MB 的安装包。
- 普通 Web、已安装 PWA、能力较弱的旧设备可以共用一套渐进增强方案。
5. 缺点：PWA 并不是“免费原生化”
- iOS 对安装提示、通知、后台执行、存储配额和媒体能力的支持仍受系统版本限制；
- Android 与桌面 Chromium 的能力更完整。
- 在息屏和恢复之间，总会出现些意想不到的bug,视频无法继续播放，后台播放音乐一会就停止等
- PWA 独立窗口仍依赖浏览器内核，启动冷启动、内存占用和复杂动画性能未必达到原生水平
- 播放音乐卡顿，比如来回切换多个应用，或者播放音乐时，来电话了，都会造成卡顿
9. 结尾：放弃PWA方式开发最主要的原因
- 我想让APP有丝滑流程的体验
- 我不希望听音乐时，咔咔咔咔顿~
- 我希望能稳定的后端定时播放（有声书） 😴
- 我希望未来扩展本地资源的播放
10. 放弃PWA，迎接RN
【RN开发的ios应用，丝滑体验，聚合音乐视频有声书-哔哩哔哩】 b23.tv/A51uypj
【RN开发的安卓聚合播放器内置音乐视频有声书-哔哩哔哩】 b23.tv/S6KpSQ5
