文档章节

关于 iOS 上的 PWA 应用,你需要知道些什么?

编辑部的故事
 编辑部的故事
发布于 04/24 14:56
字数 3591
阅读 3020
收藏 22
点赞 2
评论 2

原文Progressive Web Apps on iOS are here

作者Maximiliano Firtman

在 iOS 11.3 版本中,苹果公司悄悄地增加了基于“渐进增强 Web 应用程序”(Progressive Web Apps,PWA)概念的新技术。本文带你看看 PWA 是如何工作的?它的能力和挑战是什么?以及如果你有已发布的 PWA 应用,那么你需要知道些什么。



这就是一个 PWA 应用,它能在 iPad 上全屏展示,并且具有离线功能,它也与 App Store 中的其它本地应用程序一样会出现在 iPad Dock 中

PWA 还没有一个确切的定义,总的来说,它是使用某种不需要打包或签名的 Web 技术创造出来的应用程序,可以离线运行,并且可以在运行的系统中选择性安装,它不论是从外观还是执行效果来看,都与一般应用程序无异。

PWA 应用在大多数平台上都不需要经过 App Store 流程,目前只有 Edge/Windows 10 强制 PAW 应用入驻商店。

也就是说在 iOS 平台上,你可以在没有 App Store 授权的情况下安装 PWA 应用。这可能是苹果公司一直没有向用户介绍这个新功能的原因之一,他们甚至都没有在 Safari 发布这个技术的公告,也许他们不想让用户产生疑惑。



你能指出 Google 地图原生应用和 PWA 版本的区别吗

谁创造了 PWA ?

其实,PWA 并不是苹果创造的,而是 Google 带着 Chrome 团队创造了 PWA 这个名词,但是在那之前这个创意最早却是来源于初代 iPhone 系统的 Safari 上。

2007年,在 WWDC 大会上,乔布斯在“one more thing”中宣布:如何在初代 iPhone 中开发应用?使用 Web 应用的方法。

在 iPhone 系统最初的规划中并没有 App Store,而且在整个 iPhone 设备的第一年,原生 SDK 是用不了的。从苹果公司的角度来看,就算是到现在,PWA 应用都只是“手机主界面上的 Web 应用”,它的图标被称为 WebClip(网页应用快捷方式)。

如果你想具体了解的话,可以看看我去年发布在Fluent会议上的演讲,在10:50处我花一分钟的时间提到了它。

事实上,在11年前,这个创意并没有得到很多重视,苹果公司也没有去更新这个平台。所以10多年过去了,它的很多问题依然没有得到解决。在那之后的几年里,其它平台克隆了这个创意,比如诺基亚 N9 的 MeeGo 浏览器和安卓上的 Chrome 浏览器。

Chrome 促进了 PWA 相关技术的发展并提供了更好的体验。这些技术主要是 Service Workers 和 Web App Manifest 规范,2018年3月30日 iOS 11.3 发布,苹果公司开始在 Chrome、火狐、三星 Internet、UC 和 Opera 等浏览器上支持这两个规范(大多数只在安卓平台)。其它桌面浏览器目前只支持 Service Worker,但是也计划在今年会支持 Web App Manifest。



在07年WWDC上,Steve Jobs通过第一代iPhone发布了PWAs(当时不叫这个名字)

所以 PWA 应用不用通过任何应用商店的质量测试?

确实是这样。但是,PWA 应用只会在浏览器或 Web 平台的安全执行模式下运行。这就意味着你可以“发布”应用商店中不可能批准的应用,比如为公司员工提供的内部应用程序,当然也可以是包含成人内容的应用。但是你无法使用某些原生功能,比如 iPhone X 上的 Face ID 和用于增强现实的 ARKit,这需要等到 Web 平台提供了相应新特性你才能使用。

PWA 应用可以像其它网站一样在 Safari 浏览器上运行,同时也可以像系统中的其它应用一样在 standalone 模式下运行。你可能会想 PWA 应用是否使用了 Web View,对于 Safari 浏览器或安装图标来说并不是的,但是当使用其它浏览器或使用 Facebook 的内部应用浏览器时,PWA 应用就会使用 Web View。

iOS 系统上 PWA 应用可以干什么?

在 iOS 的 Web 平台你可以做到:

  • 地理定位
  • 传感器(磁强计、加速度计、陀螺仪)
  • 相机
  • 音频输出
  • 语音合成(仅连接耳机)
  • Apple Pay
  • WebAssembly、WebRTC、WebGL 等实验特性

相比原生 iOS 应用的限制

  • PWA 应用只能存储50 Mb 的离线数据和文件
  • 如果用户几周不使用某个 PWA 应用,iOS 会释放该应用文件。虽然图标还是会显示在主屏幕上,但是当点击进去,将会重新下载该 PWA 应用
  • 无法使用一些特性,比如蓝牙、序列端口、信标、Touch ID、Face ID、ARKit、高度传感器与电池信息
  • 无法在后台访问执行代码
  • 无法访问隐私信息(联系人、位置),也无法访问本地社交应用
  • 没有应用内支付和许多其它基于苹果的服务
  • 在 iPad 上,无法使用 Side 或 Split Views 与其它应用共享屏幕,PWA 应用始终占用整个屏幕
  • 没有推送通知,没有 icon badge(在应用 icon 上显示小红点)与 Siri 集成



即使你安装了一个带有图标并且名字为 Tinder 的 PWA 应用,Siri 也不能找到它

PWA 应用在安卓上可以做些什么?

  • 在安卓上,你可以存储超过50 Mb 的东西
  • 如果你不使用该应用,安卓不会删除它的文件,但是在手机存储不够时会删除。同时,如果用户安装或使用频繁,PWA 应用可以请求永久存储
  • 为 BLE 设备接入蓝牙
  • 通过 Web 共享访问本地共享对话框
  • 语音识别
  • 后台同步和网页推送通知
  • 通过 Web App Banner 邀请用户安装 PWA 应用
  • 你可以在一定程度上自定义想要的启动画面和方向
  • 使用 WebAPK 和 Chrome,用户只能安装同个 PWA 应用的一个实例
  • 使用 WebAPK 和 Chrome,PWA 应用显示在设置界面中,你还可以看到数据的使用情况;在 iOS 系统中,这些都体现在 Safari 中
  • 使用 WebAPK 和 Chrome,PWA 应用管理着 URL 的用途,如果你得到一个指向 PWA 应用的 URL,它将会在 standalone 模式下打开,而不是在浏览器的窗口中

PWA 应用可以在 iOS 系统上做什么?

  • 用户可以在安装之前更改应用图标的名字
  • 可以在 configuration profile 页面进行配置,这样用户就可以从公司获取 PWA 应用的快捷方式(这一点很好!)。Safari 使用术语 WebClip 来描绘这个特征,然而根据文档来看,似乎并不能读取 Web App Manifest



Configuration Profiles 可以包括 WebClips 或 PWA 图标

没有 App Store,那怎么安装 PWA?

这是 iOS 平台最大的挑战之一,没有来自 Safari 的提醒或者邀请(就像Android 平台的 Web App Banners)。用户必须在 Safari 中以某种方式访问你的 PWA 链接,并手动点击分享图标,然后点击“添加到主屏幕”。没有任何迹象表明你访问的网站是 PWA 应用。



当你访问 Tinder.com,你可以忽略顶部的原生应用 banner 并点击分享,添加到主屏幕。如果你想为用户提供安装教程,务必注意这些按钮会根据系统语言进行本地化调整。

同时,在 App Store 中会有其它非自带浏览器,像 Chrome、火狐、Brave 和 Edge 是无法安装 PWA 应用的,它们也无法使用 Service Workers。

一旦你安装好了一个 PWA 应用,在主屏幕上它的图标看起来会与其他应用一样,但是系统没有为它提供3D触摸式菜单。如果你再次安装同一个 PWA 应用,将会有另一个图标指向之前的 PWA 应用(幸运的是,安装的文件是共享的)。

当然,大部分 Web 应用会提供一个链接,让你可以从 App Store 中安装原生应用,PWA 应用中也有这样一个链接,就像下面这个 Tinder 例子:



我已经有了一个 PWA,它可以立刻在 iOS 平台上运行吗?

当用户更新 iOS 11.3之后,就可以立刻安装 PWA 应用。每个 PWA 应用都可以安装,但这并不意味着每个应用都会像预想的那样正常工作。



Uber 的 PWA 应用看起来真的很漂亮。但是如果你点击“登录”或者“继续”,会调转到 Safari,这时你就离开了 standalone 模式的 PWA…

你可能已经看过我之前在测试版时写的文章:Cupertino we have a problem。不幸的是,在测试版期间遇到的大多数问题和挑战仍然存在于最终版本中。



如果你什么都不做,你的 PWA 应用会出现一个黑色框覆盖状态栏,这样用户就无法看到时间、电池状态和其它信息

哪些事情会导致应用无法运行

  • 展示:全屏展示:minimal-ui 无法在 iOS 系统上运行;全屏会触发 standalone 模式,这时 minimal-ui 就成了 Safari 的一个快捷方式。不过,你可以使用 cover-fit 属性做视图扩展或者已经被弃用的 meta 标签来达到类似于全屏的内容展示(状态栏依然存在,但是会覆盖你的应用);
  • 如果你依赖后台同步,你需要有一个备份实现方案;
  • 你的 PWA 无法锁定横纵展示方向;
  • 状态栏的主题颜色样式无法修改:你可以使用被弃用的 meta 标签实现黑色或者白色状态栏,或者使用 CSS/HTML 的 trick 去仿造一个主题颜色;



星巴克的 PWA 应用在点击“Sign up”之后不提供返回键,同时无法取消这次的选择,如果想返回就需要重新打开 PWA

  • 如果你的 PWA 应用的 UI 上没有返回的手势操作或按钮,用户将无法从屏幕之间跳转
  • 你的安卓图标在 iOS 系统可能看起来很糟糕,因为苹果公司不支持透明图标



Google Keep PWA 版本的图标依赖 Web App Manifest 规范,所以在 iOS 系统上他就是个屏幕截图。你必须通过苹果公司的非标准链接标签提供 icon 给 iOS

  • 此外,iOS 系统并不根据 Web App Manifest 规范获取图标,除非是通过 apple-touch-link 链接提供的。如果你不提供链接标签,系统将会用屏幕截图当做 PWA 应用的图标(就像上面看到的 Google Keep PWA 例子)
  • 没有启动界面,所以大多数来自 manifest 的颜色特性会被忽略
  • manifest 事件不会被触发,所以如果你正想通过这些渠道来跟踪安装,在 iOS 系统上应用将不会运行(但是你可以查看 navigator.standalone 方法来替代)

牢记这几点

  • 你的 PWA 应用在不同的会话中无法保存状态。如果用户离开 PWA 应用再次回来的时候,它将会重启。所以,如果你需要用户验证邮箱、短信或者双因子认证,记住给用户提供一个合适的解决方案。



不活动的 PWA 应用将会显示为白屏。这时它并没有在运行,并且如果切换回它们,应用将会重启



在 iPad 上也会出现同样的白屏问题

  • 在最近使用的应用列表中,PWA 应用不会出现屏幕快照,所以它们看起来就像白屏。
  • 当你的应用以 standalone 模式运行的时候会有一些 bug。测试的时候不要依赖Safari。



Nasa 的 PWA 应用尝试使用顶部缺口区域,但是出现了一些用户体验上的缺陷

  • 如果想让 PWA 应用使用 iPhone X 的缺口区域,你需要在 HTML 和 CSS 上做一些改变。
  • 有时,你添加到了主屏幕,但是没有使用 manifest,那你就只安装了一个缩略图。



一个带有星巴克商标的 Google 地图?不,这只是打开了一排 PWA 应用之后的 iOS 系统。在最近使用的应用列表中出现这种奇怪的现象,是因为一个应用加载错了地址

  • Safari 和主界面截图共享同一个 Service Worker 记录和缓存文件。Safari 视图管理器(就像 Twitter 的内置浏览器)支持 Service Workers 协议和缓存,但是它似乎在会话关闭后删除了所有的数据。
  • 每个非系统自带浏览器,例如 Chrome、火狐等使用的都是 WebView,就像 Facebook 的内置浏览器。它们不支持 Service Workers 协议,所以系统不会安装任何文件。我猜测, WKWebView 可能需要 API 让应用自己根据 Service Workers 协议决定自己要做什么。



你能使用 Safari TP 在 Safari 和“Web”(主界面上的 PWA 应用)上调试客户端和 Service Worker 。通过网络连接来测试也很方便。

  • 要想在 iOS 上调试 Service Workers,你需要安装 Safari 技术预览版(Safari Technology Previce)或者 macOS 10.11.5,10.12.6和10.13.4更新版本的 Safari 11.1。



Service Worker 的 inspector 工具目前还是测试版,它不支持查看缓存存储内容



  • Service Workers 可以在设置中禁止(默认是启动的)。



这个空的应用是什么

  • 有时,同时打开多个 PWA,iOS 系统任务栏会被搞疯,PWA 应用在最近使用的应用列表中将显示为一个没有图标和标题的“幽灵”应用。

作者介绍

Maximiliano Firtman ,移动端 + Web 开发者、培训讲师、演讲专家和作者。他有多本著作,比如由 O’Reilly Media 出版的《高性能移动Web》。

 

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1105
博文 241
码字总数 400552
作品 0
深圳
运营/编辑
加载中

评论(2)

穆哥哥
穆哥哥
学习了!@红薯 ,这个收藏功能很奇怪,为什么老是会自动收起来。
iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普

iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普 发布于 2018-04-13 文章被以下专栏收录

少数派
07/06
0
0
面试官自述:面向高级开发人员的iOS面试问题

当您准备进行技术性iOS面试时,了解您可能会询问哪些主题以及经验丰富的iOS开发人员期望什么是非常重要的。 这是许多硅谷公司用来衡量iOS候选人资历水平的一系列问题。 这些问题涉及iOS开发的...

菇哒微课
04/26
0
0
iOS股票K线图、校园助手、适配iPhone X、版本检测等源码

iOS精选源码 快速创建menuItem控件 YHPhotoBrowser 优化的网络图片浏览 cocoaAsynSocket demo (包含客户端和服务端) SwipeMenuViewController现在支持iPhoneX和Swift4。 仿微信的提醒对话框 ...

sunnyaigd
2017/10/31
0
0
关于IOS越狱和解锁必须知道的一些事情

1.什么是越狱? 苹果开发的每一款产品,包括iphone,ipad,i pod touch和Mac,想要安装软件都是需要从App Store上面购买的,其实购买的不是软件,而是苹果在软件中植入的一个认证,于是大家就...

eric_zhang
2012/12/08
0
0
使用UniDAC在Delphi XE4中开发iOS应用

使用UniDAC在Delphi XE4中开发iOS应用   核心提示:Delphi XE4的发布让很多Delphi开发者欣喜若狂,毫无疑问它使得Delphi开发更简单且更容易被理解,而且让开发无论是iPhone、iPad还是iPod的...

vga
2014/06/01
0
0
iOS Simulator功能介绍关于Xamarin IOS开发

iOS Simulator功能介绍关于Xamarin IOS开发 iOS Simulator功能介绍 在图1.38所示的运行效果中,所见到的类似于手机的模型就是iOS Simulator。在没有iPhone或iPad设备时,可以使用iOS Simulat...

大学霸
2015/04/17
0
0
10步成为专业iOS开发者——从零起步

想在移动开发大餐中分一杯羹,体验最火最炫的技术?小伙子,很有眼光嘛 毫无疑问,移动开发在目前和未来几年内都会盛极一时。无数开发职位虚位以待。各大公司都在寻找各种层次的程序员——新...

hejunbinlan
2015/06/18
0
0
开发一个iOS应用没有那么容易

导读:这是来自新加坡的 iOS 开发者 Kent Nguyen 发表在1月底的一篇博文。这篇吐槽文在 iOS 开发圈子里流传甚广,从原文150多个评论就可见一斑,现翻译如下。   让我们开门见山吧:做一个i...

Orange1
2012/09/07
0
0
关于AES256算法java端加密,ios端解密出现无法解密问题的解决方案

我想关于AES算法大家应该都已经了解了,我就不多介绍了。这是本人第一次写技术博文,如果有不对之处欢迎大家指正,共同讨论,一起学习! 之前在项目上用到AES256加密解密算法,刚开始在java端...

Sun1009
2012/12/13
0
32
【AR】开始使用Vuforia开发iOS(2)

原 设置iOS开发环境 安装Vuforia iOS SDK 如何安装Vuforia iOS示例 编译并运行Vuforia iOS示例 支持iOS金属 iOS 64位迁移 设置iOS开发环境 适用于iOS的Vuforia引擎目前支持运行iOS 9及更高版...

lichong951
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

崛起于Springboot2.X之开发拦截器(21)

序言:几乎所有项目都需要拦截器,所以小伙伴们必须要掌握这门技术哦,不然只会mybaits增删改查那是实习生干的活呀。 1、创建拦截器类,implements HandlerInterceptor public class MyInce...

木九天
16分钟前
1
0
(转)SQL语句的执行顺序

(7) SELECT (8) DISTINCT <select_list> (1) FROM <left_table> (3) <join_type> JOIN <right_table> (2) ON <join_condition> (4) WHERE <where_condition> (5) GROUP BY <group_by_list> (......

Avner
25分钟前
0
0
1.14 救援模式

确保开机启动时连接镜像文件,如果是真机服务器,就需要:U盘或光盘镜像启动进入BIOS 不同主板进入bios按键不同,一般是F12或Esc 光标:移动到Boot(开机启动项) 减号移动:光标选中行,按-...

小丑鱼00
32分钟前
0
0
ES11-全文检索

高级别全文检索通常用于在全文本字段(如电子邮件正文)上运行全文检索。 他们了解如何分析被查询的字段,并在执行之前将每个字段的分析器(或search_analyzer)应用于查询字符串。 1.term查...

贾峰uk
35分钟前
0
0
java 复制对象有哪些方式

java 复制对象有哪些方式 Apache的 Common beanutils库 org.apache.commons.beanutils.BeanUtils.copyProperties(dest,origin); Springframework 的BeanUtil 依赖: <dependency> ......

黄威
51分钟前
2
0
jstack的简单使用

公司测试反应, 一个java应用的机器, 即使不做交易, cpu始终是30%多, 于是想到了jstack, 实践步骤记录一下: 1, 找出java应用的进程号 ps -ef|grep 应用名|grep -v grep 2, 找出pid下的cpu占用...

零二一七
58分钟前
1
0
导入CSV文件就行数据整理分析

#-*-coding:utf-8-*-import csv,os,re,mathlocalPath=input("请输入所有群文件的根目录:") #所有QQ群文件的物理根目录路径def info(): info_dic=[] dirList=os.listdi...

Kefy
今天
5
0
CoreText进阶(六)-内容大小计算和自动布局

CoreText进阶(六)-内容大小计算和自动布局 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更...

aron1992
今天
1
0
一个Unity高人的博客,涉猎范围很广,深度也很深。

https://blog.csdn.net/ecidevilin/article/list/

爽歪歪ES
今天
0
0
Spring Cloud Config-Git后端

EnvironmentRepository的默认实现使用Git后端,这对于管理升级和物理环境以及审核更改非常方便。要更改存储库的位置,可以在Config Server中设置“spring.cloud.config.server.git.uri”配置...

itcloud
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部