健身PWA：无需应用商店的App开发 | 2025指南

关于在没有应用商店的情况下构建应用的真相

你不需要Apple或Google的许可就能发布专业的移动应用。我和我的运动教练朋友一起构建了WorkoutGen - 一个生成个性化健身房力量训练计划的训练生成器 - 作为渐进式Web应用,它在所有设备上无缝运行,无需接触App Store或Google Play。

本文分享我构建和部署生产环境PWA的真实经验,包括经济优势(每位客户多~25%的收入)、技术挑战(尤其是Safari的视频播放bug)以及我实施的采用策略。现实比营销炒作更微妙,但机会是真实存在的。

什么造就了一个优秀的健身PWA?

一个专业的训练PWA必须提供(WorkoutGen实现了所有这些):

• 离线优先架构 - 无需互联网即可访问训练
• 类原生性能 - 流畅的动画、即时响应
• 媒体处理 - 在所有平台上运行的锻炼视频或GIF
• 安装提示 - 为不熟悉PWA的用户提供清晰的引导
• 支付集成 - 直接Lemon Squeezy计费(0%平台费用 vs 30%商店抽成)
• 跨平台一致性 - iOS、Android、桌面上的相同体验

为什么我选择PWA而不是原生应用

经济效益令人信服

传统应用商店:

• 所有交易收取30%佣金(Apple、Google)
• 年度开发者费用($99-$299)
• 强制应用内购买系统
• 订阅的收入分成(第1年:30%,第2年+:19%)

PWA + 直接Lemon Squeezy:

• 0%平台佣金
• 5%+50¢ Lemon Squeezy处理费
• 完全控制计费逻辑
• 即时支付更新(无需24-48小时App Store延迟)

对于$10/月的订阅,你通过应用商店保留**$7.00** vs 通过Lemon Squeezy保留约$9.00。这是每位客户多~25%的收入。

开发现实

跨平台解决方案怎么样?

在全面投入PWA之前,我评估了主要的跨平台替代方案:

React Native / Flutter: 承诺"一次编写,到处运行",但仍然需要:

• iOS和Android的独立构建管道
• 原生功能的平台特定代码
• 应用商店提交和审批延迟
• 40-60MB+的应用下载
• 学习Dart(对于Flutter) - 一种比JavaScript生态系统更小的新语言

Capacitor(混合包装器): 对访问原生API有用,但增加了复杂性:

• 仅包装器就有15MB的开销
• 仍需应用商店批准才能分发
• 失去纯Web应用的即时更新优势
• 最好用作可选增强,而非必需

PWA + Capacitor(我的选择): 我首先将WorkoutGen构建为纯PWA,稍后添加可选的Capacitor包装器用于原生功能。这提供:

• 核心体验通过Web在任何地方工作(无需商店)
• 原生应用包装器可用于App Store发现
• 单一代码库,带有条件原生增强
• 即时部署Web更新,需要时更新原生

技术挑战(和解决方案)

iOS视频播放:多年的Safari Bug

永不消失的问题:

iOS上的Safari存在持续存在、未修复的视频播放bug,困扰PWA开发者多年。这不是推测 - 它记录在WebKit自己的bug跟踪器中:

最近的问题:

• iOS 26 (2025): 关闭并重新打开PWA后视频冻结在第一帧(WebKit Bug #300990)
• iOS 15-18 (持续中): getUserMedia()视频流偶尔在PWA中显示黑屏(WebKit Bug #252465,2023年2月报告,标记为"已修复"但仍在发生)

历史模式:

• Bug #232076 (2021): 来自blob URL的视频为2MB视频消耗200-300MB内存,需要10+秒才能开始播放。在iOS 15中经过数月调查后修复。
• Bug #198277 (2019-2022): PWA被置于后台时音频停止播放。花了3年才修复(最终在iOS 15.4解决,2022年2月)。
• Stack Overflow报告: 从/public/目录提供的视频在Safari上页面刷新或PWA安装后无法加载(iOS和macOS)。解决方法:在外部CDN上托管视频。

模式很清楚:Safari PWA中的视频/媒体bug被报告,有时标记为"已修复",然后在新的iOS版本中重新出现。

我的解决策略:

对于WorkoutGen,我实施了多个后备方法:

1. 在所有视频元素上使用crossorigin="anonymous"属性
2. 添加playsInline、muted和autoPlay以兼容iOS
3. 预加载视频元数据以减少加载问题
4. 监控iOS版本特定的bug并适应(iOS 26的单独视频)
5. 设计UX时假设视频可能失败 - 提供文本说明作为备份

令人沮丧的现实: 像#198277这样的bug花了3年才修复,而像getUserMedia()视频播放(#252465)这样据称"已解决"的问题继续出现在新的iOS版本中。Apple的PWA支持显然比原生应用API的优先级低,修复需要"底层平台级别的更改",而不是快速的WebKit补丁。

iOS上没有原生安装事件

问题: Safari不触发beforeinstallprompt事件,导致无法:

• 以编程方式显示原生安装提示
• 检测用户在页面加载前是否已安装你的PWA
• 在没有手动用户操作的情况下跟踪安装成功

我的解决方案:视频教程覆层

由于iOS用户无法获得自动安装提示,我构建了自定义引导流程:

// WorkoutGen的检测逻辑
const isPWAInstalled = () => {
  // iOS检测
  if (window.navigator.standalone) return true

  // Android/Desktop
  if (window.matchMedia("(display-mode: standalone)").matches) return true

  return false
}

// 为没有beforeinstallprompt的浏览器显示教程
const browserInfo = detectBrowser()
if (!browserInfo.canInstallPWA && !isPWAInstalled()) {
  showVideoTutorial() // 带安装说明的自定义教程
}

WorkoutGen显示简短的视频教程,向用户展示如何在iOS上点击"分享→添加到主屏幕"。视频是上下文相关的 - iOS 26与早期版本、Safari与iOS上的Chrome有不同的说明。

这项UX投资至关重要:没有原生安装提示,iOS上的PWA采用完全依赖于用户教育。

Service Worker缓存策略

离线训练需要激进的缓存。WorkoutGen使用Vite PWA Plugin和Workbox:

// 来自apps/frontend/vite.config.ts的真实配置
VitePWA({
  registerType: "prompt",
  workbox: {
    globPatterns: ["**/*.{js,css,html,ico,png,svg,woff,woff2}"],
    globIgnores: ["**/*.mp4", "**/*.webm", "**/*.gif", "**/*.jpg", "**/*.jpeg", "**/*.webp"],
    maximumFileSizeToCacheInBytes: 40 * 1024 * 1024,
    cleanupOutdatedCaches: true,
    navigateFallback: null,
  },
})

关键决策:

• 缓存静态资源(JS、CSS、字体)以实现即时加载
• 从预缓存中排除大型媒体 - 通过CDN按需获取
• 40MB缓存限制以避免iOS上的存储配额问题(Safari限制为50MB)
• registerType: 'prompt'让用户控制何时更新
• 使用CacheFirst策略对锻炼媒体进行运行时缓存

这使WorkoutGen具有完整的离线功能,同时保持在iOS存储限制内。

PWA让我失望的地方(以及为什么我仍然看好)

浏览器对安装功能的支持有限

Safari (iOS): 没有beforeinstallprompt事件,没有自动安装UI,没有安装横幅。用户必须手动通过分享菜单→"添加到主屏幕"导航 - 一个大多数人不知道存在的4次点击过程。

Firefox (桌面): PWA安装支持不一致。某些版本支持,其他版本不支持。安装按钮出现不可预测。

Chrome/Edge (Android): 这些与原生安装提示完美配合,但当你考虑iOS市场份额时,它们在全球是少数。

解决方法?为每个浏览器构建自定义安装UX。对于WorkoutGen,我实施了:

• 显示iOS安装步骤的视频教程
• 浏览器检测以显示相关说明
• 触发上下文指南的自定义"添加到主屏幕"按钮
• iOS 26与早期版本的不同流程

这增加了开发开销,但与维护单独的原生代码库相比是可管理的。

大多数用户不知道PWA存在

这是更大的挑战。当你告诉某人"安装这个应用"时,他们期望去应用商店。解释"实际上,点击浏览器中的这个按钮"会造成摩擦。

我发现两种策略有效:

1. 不要称它为PWA - 只说"添加到主屏幕以获得完整体验"
2. 展示,不要告诉 - 使用演示安装过程的视频教程

用户教育是真正的工作,但为了避免30%的平台费用并获得即时部署,这是值得的。

为什么尽管有这些限制我仍然看好

事情是这样的:PWA对于特定类别的应用被严重低估。

对于SaaS产品、内容平台和像WorkoutGen这样的工具:

• ✅ 从第一天起就向所有平台发布(iOS、Android、桌面、Web)
• ✅ 全屏、离线功能体验,无需应用商店
• ✅ 即时更新,无需审核延迟
• ✅ 保留约90%的收入而不是70%(Lemon Squeezy费用5%+50¢ vs 应用商店抽成30%)
• ✅ 与用户的直接关系(无平台中介)

是的,Safari支持令人沮丧。是的,用户意识很低。但这些是可解决的UX问题,而不是根本的技术限制。核心技术运行得很好 - 它只是未被充分利用,因为大多数开发者默认选择原生应用,而不认真评估PWA。

AI/ChatGPT用于训练计划怎么样?

ChatGPT可以生成训练计划,但对于严肃的训练来说不够:

• 没有锻炼视频库 - ChatGPT可以描述锻炼,但不能向你展示正确的形式。WorkoutGen包含一个定制构建的视频数据库,涵盖每个主要力量训练锻炼,配有专业演示。
• 结构化进阶 - 没有每周渐进超负荷、周期化或减载周的跟踪
• 离线访问 - 每次查询都需要互联网(在信号差的健身房无法使用)
• 个性化记忆 - 除非你手动维护对话历史,否则会话之间会丢失上下文
• 没有执行界面 - 你得到一个文本计划,但没有训练播放器来指导你完成组、休息时间和锻炼顺序

构建WorkoutGen的锻炼视频数据库花了数月的工作 - 拍摄、编辑、压缩和优化移动播放。这是AI无法提供的,因为它纯粹在文本中操作。结构化算法+视觉演示+离线访问的组合是PWA相对于对话式AI的优势所在。

YouTube用于训练教程怎么样?

YouTube非常适合学习锻炼,但对于实际训练来说很糟糕:

• 没有训练结构 - 你拼凑6个不同的视频
• 广告打断组 - 在训练中途扼杀势头
• 没有进度跟踪 - 无法记录次数、重量或改进
• 需要互联网 - 在信号差的健身房无法使用

PWA给你两全其美:结构化训练系统内的精选视频内容。

我的诚实建议

对于构建健身/生产力/SaaS应用的开发者:

• 从PWA开始,除非你绝对需要原生API(HealthKit、ARKit、后台应用刷新)
• 使用React 19 + Vite 7 + Vite PWA Plugin + Workbox以获得最佳开发者体验
• 稍后仅在需要应用商店存在的可选原生包装器时添加Capacitor
• 在整个开发过程中在真实iOS设备上测试 - Safari的PWA bug会让你惊讶
• 为自定义安装UX预留时间(视频教程、浏览器检测、上下文提示)

对于企业家和自筹资金创始人:

• MVP优先使用PWA - 用单一代码库在几周而不是几个月内向所有平台发布
• 经济学偏向PWA - 保留~90%的收入(Lemon Squeezy 5%+50¢) vs 70%(应用商店30%)
• 即时迭代 - 在几秒钟内部署更新,无需商店审核延迟
• 应用商店可选 - 如果需要,稍后添加原生包装器以供发现,但核心产品通过Web在任何地方工作
• 仅在$10K+ MRR后考虑原生应用以证明开销合理

对于用户:

• 试用WorkoutGen PWA: my.workoutgen.app
• 通过浏览器菜单安装:点击分享→"添加到主屏幕"(iOS)或浏览器安装按钮(Android)
• 离线工作,全屏,感觉像原生应用 - 没有50MB+的下载

底线

在将WorkoutGen构建为生产PWA后,以下是我学到的:

好的方面:

• ✅ 每位客户保留~25%更多收入 - Lemon Squeezy 5%+50¢ vs App Store 30%
• ✅ 从一个代码库向所有平台发布 - iOS、Android、桌面、Web同时
• ✅ 即时部署更新 - 无商店审核延迟(小时vs天)
• ✅ 完整的离线功能 - Service Workers缓存用户需要的一切
• ✅ 更快的开发速度 - 无原生构建工具链或平台特定API

挑战:

• ⚠️ Safari PWA支持令人沮丧 - 视频播放bug多年未修复,API有限
• ⚠️ iOS上没有自动安装提示 - 需要自定义UX和用户教育
• ⚠️ 浏览器兼容性各异 - 在Chrome中工作的可能在Safari中崩溃
• ⚠️ 用户意识低 - 大多数人不知道PWA存在
• ⚠️ 没有应用商店发现 - 你需要自然流量或付费获取

结论:

PWA对于特定用例被严重低估:SaaS工具、生产力应用、内容平台,以及像WorkoutGen这样的应用,其中结构化离线访问比应用商店位置更重要。

技术是成熟的、生产就绪的。挑战主要是UX和用户教育 - 可解决的问题,而不是根本限制。如果你正在构建一个可以推动自己流量并希望避免平台费用的应用,PWA提供了原生开发的引人注目的替代方案。

WorkoutGen证明它可以大规模工作。2-3个问题(Safari bug、用户教育)远远被优势所超越:即时部署、零平台费用和真正的跨平台覆盖。

接着阅读的 WorkoutGen 指南

想继续围绕同一目标训练，也可以阅读：

• 如何在 iPhone 和 Android 上安装 WorkoutGen
• 2025年最佳免费健身与锻炼应用：教练诚实排名
• 在哪里可以找到真正适合你日程的免费健身计划

参考资料