内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

全面解析基于iOS的PWA程序

2018-04-21 12:16 出处:清屏网 人气: 评论(0

在iOS11.3版本中,苹果公司已悄悄地增加了基于“渐进式Web应用程序”( Progressive Web Apps, PWA)概念的新技术基础合集。是时候来看看他们是如何工作的,他们的能力和挑战是什么,以及如果你有已发布的PWA,您需要知道什么。

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

如果你看到这,仍然还不知道PWA是什么,让我们在这来说说,它并没有什么独特的或者精确的定义。但它是使用Web技术——不需要打包或签名——创造出来的一个应用,可以离线运行,可以在运行的系统中选择性安装,看起来就像其他的应用一样。

大多数平台都不需要App Store的流程,目前只有Edge/Windows 10强制PAWs入驻商店。

你是对的, 你现在可以在iOS平台上没有App Store授权的情况下安装应用 。这可能是苹果公司在任何地方都没有提到这个新能力一个原因。他们可能不想去迷惑用户。甚至没有在Safari发布这个技术的公告。

原生版本

和PWA版本的区别吗?

那么苹果公司是PWA的创造者吗?

说实话,是Google公司带着Chrome团队创了PWA术语,起初这个创意来源于最早iPhone系统的Safari上。2007年,在WWDC上,Steve Jobs宣布了“一件事”:如何在原始iphone上开发应用,想不到吧,那就是Web应用。在原始规划中并没有App Store,而且在整个设备的第一年,原生SDK是用不了的。从苹果公司的角度来看,到现在为止PWA都只是“手机主界面上的web应用”,他的图标总是被当做成webclip应用。

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

事实上,在11年前,这个创意并没有得到很多重视,而且苹果公司忘了更新这个平台。即使经过了10多年,它依旧有很多的问题以及不合逻辑。几年后,其他平台克隆了这个创意,就像诺基亚N9的MeeGo浏览器和安卓的Chrome浏览器。

Chrome促进了技术的发展并提供了更好的体验,主要基于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(当时不叫这个名字)。

稍等一下,所以那个app没有通过任何应用商店的质量测试,对吗?

是的,那是对的。然而,那个app仅会在浏览器下运行或者Web平台安全和执行模式。那就意味着你可以“发布”应用商店中没有批准的app, 比如说对于你们公司员工(是的,也有成人内容)的内部app,但是你不能获得纯粹的原本属性,比如说iPhone X或ARKit对于增强现实的Face ID。或者至少,你需要等待Web平台抓取到那些新特征。

PWA应用可以在Safari浏览的任何网站或脱机模式下运行,就像系统中的任何其他应用。如果你在考虑是否PWA应用正在使用Web视图,对于Safari浏览器或安装的图标这不是问题,但是当使用其它浏览器或使用Facebook的内部应用浏览器时,PWA应用使用了Web视图。

在iOS系统上PWA应用的能力

在iOS的Web平台你可以获得:

  • 地理定位

  • 传感器(磁强计、加速度计、陀螺仪)

  • 相机

  • 音频输出

  • 语音合成(仅连接耳机)

  • 苹果支付

  • WebAssembly, WebRTC, WebGL和许多其他的 实验特性。

相比原生iOS应用的限制

  • 该应用程序可以存储仅50Mb的离线数据和文件

  • 如果用户几个周不使用该应用程序,iOS将会释放应用文件。图标将仍然会在主屏幕上显示,当点击进入时,该应用程序将会重新下载。

  • 没有一些特性,比如说蓝牙、序列端口、信标、Touch ID、Face ID、ARKit、高度传感器、电池信息。

  • 没有后台执行代码

  • 没有隐私信息(联系方式、后台所在地),也没有原生的社交应用

  • 没有应用内支付和许多其他的基于苹果的服务

  • 在iPad上,没有和其它应用一起使用的侧边或分屏显示,渐进式网页应用将总是占用整个屏幕

  • 没有推送通知,没有图标徽章或Siri整合 即使你安装了一个带有图标并且名字为Tinder的渐进式网页应用,Siri也不能找到它。

渐进式网页应用在安卓上可以做什么呢?

  • 在安卓上,你可以存储超过50Mb的东西

  • 如果你不使用该应用,安卓不会删除文件,但是在手机存储不够时会删除文件。同样,如果用户安装或使用频繁,渐进式网页应用可以请求永久存储。

  • 为BLE设备接入蓝牙

  • 对进入本地共享对话框的网页分享

  • 语音识别

  • 后台同步合网页推送通知

  • Web应用banner图邀请用户安装

  • 你可以自定义(一定程度上)你想要的启动画面和方向

  • 使用WebAPK和Chrome,用户只能安装一个渐进式网页应用实例

  • 使用WebAPK和Chrome,在设置下面的PWA中,你可以看到数据使用情况;在iOS系统中,所有的这些都在Safari中体现

  • 使用WebAPK和Chrome,渐进式应用管理着它链接的用途,如果你得到一个指向渐进式网页应用的链接,它将会在脱机模式下打开,而不是在浏览器的窗口。

渐进式网页应用可以在iOS系统上做什么?

  • 用户可以在安装之前更改图标名字

  • 可以在 configuration profile 页面进行配置,所以企业用户可以从公司获取到渐进式网页应用的捷径(这一点很好!)Safari使用术语WebClip来描绘这个特征,然而据文献所说,似乎并没有读取Web应用的清单。

Configuration Profiles可以包括WebClips或PWA图标。

但是,如果没有App Store,怎么安装PWA呢?

这是在iOS平台最大的挑战之一,没有来自Safari提醒或者邀请(就像Android平台的Web应用条幅)。用户必须在Safari中以某种方式访问你的PWA的连接,并手动点击分享图标,然后点击“添加到主屏幕”。在你访问一个PWA地址的时候不会留下任何痕迹。

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

当然,在App Store中会有其他非自带浏览器,就像Chrome、火狐、Brave或者Edge是无法安装PWA的,也无法使用Service Workers。

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

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

我已经拥有这个应用了对吧?

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

当你更新iOS 11.3之后, 你的PWA将可以立刻安装 。你不需要选择进入iOS。每个PWA都可以安装。 但这并不意味着每个应用都会像预想一般正常工作。

Uber的PWA看起来真的很漂亮。但是如果你点击“登录”或者“继续”,会调转到Safari,那时你就离开了独立的PWA…因此,它是无效的。

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

如果你什么都不做,你的PWA会出现一个黑色框覆盖原来黑色的状态栏,所以用户无法看到时间、电池状态以及任何通知。

哪些事情会导致不能运行

  • 展示:全屏展 示:minimal-ui无法在iOS系统上运行;全屏会触发独立模式,并且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系统上他就是个屏幕缩图。您必须通过苹果公司的非标准链接标签提供给iOS系统

  • 此外,iO S系统并不根据Web App Manifest规范获取图标,除非是通过apple-touch-link链接提供的。如果你不提供链接标签,系统将会用屏幕截图当做PWA应用的图标(就像上面看到的Google Keep PWA例子)

  • 没有启动界面,所以大多数来自manifest的颜色特性会被忽略

  • 无manifest事件将会被触发,所以如果你正想通过其他渠道来跟踪安装,在iOS系统上应用将不会运行(但是你可以查看 navigator.standalone 方法来替代)。

你需要记住什么

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

不管怎么样,你所有的不活动的PWA将会出现白屏。记住,它并没有在运行,并且如果切换回它们,应用将会重启。

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

  • 在最近使用的应用列表中,PWA不会出现屏幕快照,所以很不辛的是,它们看起来就像白屏。

  • 当你的应用以独立模式运行的时候会有一些bug。所以,测试的时候不要依赖Safari。

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

  • 如果想让你的应用使用iPhone X的缺口区域,你需要在HTML和CSS上做一些改变。如果你做的不对,可能会发生奇怪的事情

  • 有时,你添加到了主屏幕,但是没有使用manifest,那你就只安装了一个缩略图

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

  • Safari和主界面截图共享同一个Service Worker记录(但不是这个例子)和缓存文件。Safari视图管理者(就像Twitter的内置浏览器)支持Service Workers协议和缓存,但是它似乎在会话关闭后删除了所有的数据。

  • 每个非系统自带浏览器,例如Chrome、火狐或者其他的应用,使用的都是WebVIew,就像Facebook的内置浏览器。他们不支持Service Workers协议(它只工作在整个测试阶段),所以系统不会安装任何文件。我猜测,API可能需要WKWebView让应用自己根据Service Workers协议决定自己要做什么,但是…谁知道事实是什么呢。

你能使用Safari TP在Safari上同时调试“Web”(主界面上的PWA)的客户端和Service Worker协议(只是猜测是哪个)。通过网络连接来测试也很方便。

  • 要想在iOS上调试Service Workers,你需要在mac系统10.11.5、10.12.6和10.13.4的更新版本上安装Safari开发预览版(Safari Technology Previce)或者Safari 11.1。

Service Worker的inspector工具也是测试版,例如,它不支持我们看到的缓存内容

  • Service Workers 可以在实验技术下的设置中禁止(默认是启动的)

这个空的应用是什么

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

如果你在 iOS 中的 PWA 中找到任何的的 bug? 那请你写信给我,我将会回信或者填写一份 bug报告 给 Webkit 的团队。如果你想要获得更新的文章,让我们在  Twitter 上   @firt 。如果你六月份在湾区,请注意下  亲手实践的 PWA 培训  。 我会现场来教;我们会在每一个平台上创建一个 PWA,包括在 iOS 上。 


分享给小伙伴们:
本文标签: PWAiOS

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号