iOS 英文原文：Progressive Web Apps on iOS are here

在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宣布这个技巧的通知布告。

你能说出来Google舆图使用原生版本和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.3Start，苹果公司适配了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图标。

其它翻译版本 (1) 加载中

可是，假如没有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系统

• 另外，iOS系统其实不依据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的inspectorTools也是测试版，例如，它不支撑我们看到的缓存内容

• Service Workers 可以在试验技巧下的设置中制止（默许是启动的）

这个空的使用是甚么

• 有时，你同事翻开多个PWA，iOS系统Task栏会变得猖狂，会在比来运用的使用列表中显示一个没有图标和题目的“鬼魂”使用。

假如你在 iOS 中的 PWA 中找就任何的的 bug? 那请你写信给我，我将会回信或许填写一份bug陈述 给 Webkit 的团队。假如你想要取得更新的文章，让我们在 Twitter 上  @firt。假如你六月份在湾区，请留意下 翘熳实践的 PWA 培训 。我会现场来教；我们会在每个平台上创立一个 PWA，包含在 iOS 上。 

Maximiliano Firtman 是一名Mobile端 + web开发者，培训教师，演讲者和作者。他有多本著作，包含高功能MobileWeb，由O’Reilly Media出书。他经常是国际集会上的演讲者，并被Mobileweb社区普遍承认他所做的奉献。他经常为天下上顶级的公司传授Mobile端，HTML5，PWA和功能方面的培训。他曾经在非常多公司和线上举行了一些进步前辈的Web App进修班和培训，例如，Linked Learning/Lynda 和 Safari O’Reilly。他的 Twitter 是：@firt

本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协议，假如我们的任务有进犯到您的权益，请实时联络我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务