We're sunsetting PodQuest on 2025-07-28. Thank you for your support!
Export Podcast Subscriptions
cover of episode EP90 Podwise App 上线啦！从网页到App，我们都经历了什么？

EP90 Podwise App 上线啦！从网页到App，我们都经历了什么？

2025/1/13
logo of podcast 硬地骇客

硬地骇客
AI Deep Dive AI Insights AI Chapters Transcript
People
S
Sato
一
一笑
龟
龟龟
Topics
Sato: 我是Sato，参与了Podwise App从网页到App的整个开发过程。最初Podwise定位于桌面端，但考虑到移动端的应用场景，我们采用了响应式设计，这使得我们能够在同一个代码库中同时支持桌面端和移动端。在开发过程中，我们遇到了很多挑战，例如如何平衡桌面端和移动端的不同需求，以及如何选择合适的技术栈。最终，我们选择了Next.js和Capacitor的组合，虽然这个组合也带来了一些额外的挑战，但总体来说，它帮助我们高效地完成了App的开发。 在App Store审核方面，我们也遇到了一些意想不到的困难。审核人员认为我们应用提供的功能并不应该强制用户登录，这让我们不得不重新调整应用的逻辑，并向审核人员解释我们的设计理念。这个过程耗费了大量的时间和精力，但最终我们还是成功地通过了审核。 未来，我们将继续完善Podwise App的功能，并根据用户的反馈不断改进。我们也计划推出安卓版本，并探索更多与设备本身能力集成的可能性，例如Apple的AI能力。 一笑: 我是一笑，主要负责Podwise App的技术选型和开发。在技术选型方面，我们面临着如何平衡成本、性能和跨平台兼容性的问题。最终，我们选择了Web技术栈，并使用Capacitor框架将Web应用封装成App。这个选择使得我们能够最大限度地复用Web端的代码，降低了开发成本。 然而，Next.js和Capacitor的组合也带来了一些挑战。Next.js侧重于服务端渲染，这与Capacitor的纯静态页面要求存在冲突。为了解决这个问题，我们不得不对代码进行大量的修改，并做了两个工程，部分代码有差异。此外，集成原生能力，例如推送通知、支付和文件系统访问，也需要花费大量的时间和精力。 在开发过程中，我们也遇到了很多意想不到的问题，例如跨域问题、WebView的限制等等。这些问题都需要我们自己去寻找解决方案，并进行大量的调试和测试。总的来说，这个过程非常复杂，但最终我们还是成功地完成了Podwise App的开发。 龟龟: 我是龟龟，主要负责Podwise App的设计和用户体验。在设计方面，我们最初是从桌面端开始设计的，然后逐步适配到移动端。然而，移动端的设计比桌面端更复杂，需要更精细的规划和调整。我们花了大量的时间来优化移动端的交互和用户体验，以确保用户能够轻松地找到所需的内容和功能。 响应式设计虽然能够帮助我们同时支持桌面端和移动端，但它也带来了一些挑战。我们需要仔细权衡桌面端和移动端的不同需求，并确保设计能够满足两端的不同使用习惯。在实际开发过程中，我们经常需要反向调整桌面端结构以适应移动端交互。 在App Store审核方面，我们也遇到了一些问题。审核人员认为我们应用提供的功能并不应该强制用户登录，这让我们不得不重新调整应用的逻辑，并向审核人员解释我们的设计理念。这个过程耗费了大量的时间和精力，但最终我们还是成功地通过了审核。

Deep Dive

Key Insights

为什么 Podwise 选择从网页版转向开发独立的移动端 App？

Podwise 选择开发独立移动端 App 主要有两方面原因：一是用户习惯，大多数用户更倾向于在 App Store 中搜索应用；二是技术限制，Web 版无法实现推送通知、离线存储等功能，且无法接入 App Store 的内购系统。

Podwise 在技术选型时为什么选择了 Web 技术栈和 Capacitor？

Podwise 选择 Web 技术栈和 Capacitor 主要是因为团队已经通过响应式设计支持了移动端，沿用 Web 技术栈成本最低且跨平台。虽然 Web 技术栈在性能和体验上不如原生方案，但 Capacitor 提供了完整的生态支持，能够满足大部分需求。

Podwise 在将 Web 应用封装成 App 时遇到了哪些主要挑战？

主要挑战包括将 Next.js 的 SSR（服务端渲染）应用改造成纯静态应用，适配原生能力如推送通知、文件系统和支付系统，以及处理跨平台兼容性问题。此外，由于 Next.js 和 Capacitor 的组合较为罕见，很多问题在网上找不到解决方案，增加了开发难度。

Podwise 如何处理跨平台的支付系统兼容性问题？

Podwise 通过抽象支付流程，分别实现 Apple Pay、Google Pay 和 Stripe 的支付逻辑，并将所有订阅状态统一到自己的订阅记录中。此外，还处理了退款、取消订阅等细节问题，确保用户在不同平台的订阅状态一致。

Podwise 在 App Store 上架审核过程中遇到了哪些问题？

Podwise 在 App Store 上架审核时多次被拒，主要原因是审核人员认为应用不应强制用户登录以收集隐私信息。团队通过解释应用已有大量 Web 版存量用户，并修改部分功能展示逻辑，最终说服审核人员通过审核。

Podwise 未来的移动端规划是什么？

Podwise 的移动端规划主要跟随 Web 版功能更新，如即将上线的中文翻译功能。此外，团队还计划优化动态广告探测能力，并探索与设备原生 AI 能力的集成，以提供更轻量的功能体验。

Podwise 的安卓版本何时上线？

Podwise 的安卓版本已经在开发中，团队目前正在调试 Google Play Store 的订阅系统和真机体验。预计在解决相关问题后，安卓版本将很快上线。

Chapters
本期节目讨论了 Podwise App 从网页到 App 的转变，以及响应式设计的应用。讨论了响应式设计的原则，从桌面端到移动端的适配，以及为什么选择响应式设计。
  • Podwise 最初定位偏向桌面端，但移动端也需要考虑
  • 响应式设计是必然选择，除非有充足的人员
  • 响应式设计原则：从桌面端到移动端适配，移动端设计更复杂

Shownotes Transcript

从网页到 App，看似简单的转变背后隐藏着哪些挑战？Next.js 和 Capacitor 的组合是完美的解决方案吗？App Store 审核究竟有多难？本期节目为你揭秘 Podwise App 上架背后的故事，探索 Web 技术栈开发 App 的“奇妙”旅程，尽力帮你避开一些“坑”吧。

更多内容信息和时间线参考下文的硬地笔记，欢迎收听本期节目。

另外，现在加入「硬地骇客」会员服务，即可在会员专属的微信群与其他朋友一起畅所欲言，成为会员也是对我们持续更新最大的鼓励！ ## 本期赞助

Podwise.ai - Podcast knowledge at 10x speed 🚀)

Apple Store 下载👉🏻 https://apps.apple.com) ## 硬地笔记

00:00:04 Podwise 苹果商店上架及响应式设计初衷

00:03:06 响应式设计原则：从桌面端到移动端？

00:06:37 开发独立 App 的原因

00:09:01 技术选型：Web 技术栈与 Capacitor 的选择

00:13:00 将 Web 应用封装成 App 的过程与挑战

00:17:46 支付系统整合与跨平台兼容

00:22:27 Capacitor 的使用及原生能力集成

00:23:39 工程管理：代码仓库和构建流程

00:33:33 App Store 上架审核与经验分享

00:40:21 未来规划与安卓版本上线计划

00:43:43 节目结语

欢迎关注我们