什么是 IOS 的渐进式 Web 应用程序解决方案

What is progressive web app solution for IOS

我想知道 IOS 设备的渐进式网络应用解决方案是什么,因为它们的默认浏览器 SAFARI 尚不支持渐进式网络应用。 那么 IOS 同行的备选方案是什么?

请注意 "Browsers that support Progressive Web Apps" 不是一个真正的术语,PWA 本身是网络应用程序可以为用户提供的一组功能。所以这不仅仅是关于 Service Worker 和 App Manifest。

查看:Baseline PWA Checklist

创建此答案时,您可以在 iOS/Safari 上实现 PWA:

  • 网站通过 HTTPS 提供服务 ✅
  • 页面在平板电脑和移动设备上响应迅速 ✅
  • 开始 URL(至少)在离线时加载
  • 为添加到主屏幕提供的元数据✅❗️
  • 即使是 3G,首次加载也很快 ✅
  • 网站作品cross-browser ✅
  • 页面转换不会像在网络上阻塞一样 ✅
  • 每一页都有一个URL ✅

如您所见,几乎一切正常,即使您的页面无法在 iOS/Safari 上离线工作,"upgrading" 将您的 Web 应用程序转换为 PWA 仍然有巨大的好处。

您真正想要的不是 "Progressive Web Apps" 的花哨标题,而是一个能够为用户提供良好体验和功能的优秀 Web 应用程序。这是一个旅程,你可以通过每个小部分来完成它,这就是为什么它被称为"Progressive"。

关于元标记中名为 apple-mobile-web-app-capable 的 "Add to Home screen: Safari has its own spec for " 主屏幕图标的注意事项。Web App Manifest Generator 使用此元标记后备 iOS标签.

编辑 3:

服务人员已于 2018 年 3 月 30 日在 iOS 的 Safari 中发货!

编辑 2:

一位名叫 Ricky Mondello 的 Apple 开发人员于 2018 年 1 月 24 日发布了此推文:

https://twitter.com/rmondello/status/956256845311590400

"iOS 11.3 and macOS 10.13.4 include Service Workers — a powerful specification that allows background scripts to power offline web applications. iOS 11.3 also consults Web App Manifest when adding web apps to the home screen."

太棒了!

还没有推送通知的消息,但仍然是惊人的消息。

编辑:

我写过一篇骂苹果的文章题目:

https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676

它被发布到 hacker news 并在 Twitter 上获得了一些良好的曝光率。一周后,他们开始对其进行开发。所以 - 请继续关注,它似乎终于要上路了!


原始答案:

"So it's not just only about Service Worker and App Manifest."

在我看来,这正是 PWA 的真正意义所在 - service worker。这就是让您可以做 PWA 使之成为可能的所有令人敬畏的事情的原因。基线已经可以实现很长时间了,虽然 google 在技术上将它们确立为基线 class 化,但这些东西并不是真正使 PWA 成为现实的东西。否则它只是我书中的一个常规响应式 Web 应用程序。

由于 Apple 拒绝支持它们(因为它们会损失应用商店的钱),因此您仍然无法使用移动 safari 执行的操作列表:

  • 创建应用加载屏幕
  • 使用推送通知
  • 添加离线支持
  • 创建初始应用程序UI 以立即加载
  • 通过浏览器引导对话框提示安装到主屏幕

接受的答案在这里确实描绘了错误的画面。我已经把移动 safari 中的苹果 'native' 之类的体验推到了极限,但仍然很糟糕。我在移动版 safari 的全屏模式中遇到过很多问题,而 Apple 根本不关心这些问题。它被视为第二个 class 公民,因为它不像应用商店那样产生收益。

您会注意到,如果您将 Twitter 的全新精彩 react/redux-based 移动网站添加到 iOS 上的主屏幕,它不会以全屏模式打开。我怀疑这与我发现的原因相同 - 大量错误,Apple 团队中没有人在处理这些错误。

Web 应用程序清单中曾经在 iOS 全屏模式下可用的加载屏幕神秘地停止工作,Apple 的论坛中没有任何关于该主题帖子的评论。而且不得不告诉用户,"Oh hey, just click share, then slide over to 'Add to Home Screen" 是一种糟糕的处理方式。

这是一个令人悲伤的事态。当前接受的答案中的列表实际上应该称为 "Baseline Responsive Web App List".

然后在这里回答这个问题 - 不,别无选择,您也无能为力。你必须玩苹果的游戏,支付 100 美元才能进入应用商店,学习一门完全不同且更复杂的编程语言,并保持完全独立的代码库。

我刚刚花了 6 个月的时间为一个客户项目学习 React Native,它非常棒。我会极力推荐它。您可以使用 JavaScript 创建真正的原生应用,并在 iOS 和 Android 之间共享您的代码库。

需要说明的是,我并不反对苹果。我使用 iPhone 并在 Mac 上开发。但是他们的商业策略的这一方面肯定是一种耻辱。