在iOS11.3版本中，蘋(píng)果公司已悄悄地增加了基于“漸進(jìn)式Web應(yīng)用程序”（Progressive Web Apps，PWA）概念的新技術(shù)基礎(chǔ)合集。是時(shí)候來(lái)看看他們是如何工作的，他們的能力和挑戰(zhàn)是什么，以及如果你有已發(fā)布的PWA，您需要知道什么。
這個(gè)應(yīng)用就是一個(gè)PWA，它能在iPad上全屏展示離線功能，它也與App Store中的其他任何一個(gè)本地應(yīng)用程序一樣會(huì)出現(xiàn)在iPad Dock里。
如果你看到這，仍然還不知道PWA是什么，讓我們?cè)谶@來(lái)說(shuō)說(shuō)，它并沒(méi)有什么獨(dú)特的或者精確的定義。但它是使用Web技術(shù)——不需要打包或簽名——?jiǎng)?chuàng)造出來(lái)的一個(gè)應(yīng)用，可以離線運(yùn)行，可以在運(yùn)行的系統(tǒng)中選擇性安裝，看起來(lái)就像其他的應(yīng)用一樣。
大多數(shù)平臺(tái)都不需要App Store的流程，目前只有Edge/Windows 10強(qiáng)制PAWs入駐商店。
你是對(duì)的，你現(xiàn)在可以在iOS平臺(tái)上沒(méi)有App Store授權(quán)的情況下安裝應(yīng)用。這可能是蘋(píng)果公司在任何地方都沒(méi)有提到這個(gè)新能力一個(gè)原因。他們可能不想去迷惑用戶。甚至沒(méi)有在Safari發(fā)布這個(gè)技術(shù)的公告。
你能說(shuō)出來(lái)Google地圖應(yīng)用原生版本和PWA版本的區(qū)別嗎？
那么蘋(píng)果公司是PWA的創(chuàng)造者嗎？
說(shuō)實(shí)話，是Google公司帶著Chrome團(tuán)隊(duì)創(chuàng)了PWA術(shù)語(yǔ)，起初這個(gè)創(chuàng)意來(lái)源于最早iPhone系統(tǒng)的Safari上。2007年，在WWDC上，Steve Jobs宣布了“一件事”：如何在原始iphone上開(kāi)發(fā)應(yīng)用，想不到吧，那就是Web應(yīng)用。在原始規(guī)劃中并沒(méi)有App Store，而且在整個(gè)設(shè)備的第一年，原生SDK是用不了的。從蘋(píng)果公司的角度來(lái)看，到現(xiàn)在為止PWA都只是“手機(jī)主界面上的web應(yīng)用”，他的圖標(biāo)總是被當(dāng)做成webclip應(yīng)用。
如果你想了解的話，可以去翻看我去年發(fā)布在Fluent會(huì)議上的演示，在10：50的時(shí)候我花一分鐘的時(shí)間提到了它。
事實(shí)上，在11年前，這個(gè)創(chuàng)意并沒(méi)有得到很多重視，而且蘋(píng)果公司忘了更新這個(gè)平臺(tái)。即使經(jīng)過(guò)了10多年，它依舊有很多的問(wèn)題以及不合邏輯。幾年后，其他平臺(tái)克隆了這個(gè)創(chuàng)意，就像諾基亞N9的MeeGo瀏覽器和安卓的Chrome瀏覽器。
Chrome促進(jìn)了技術(shù)的發(fā)展并提供了更好的體驗(yàn)，主要基于Service Workers和Web App Manifest規(guī)范。從今天（2018年3月30日）發(fā)布iOS 11.3開(kāi)始，蘋(píng)果公司適配了Chrome，火狐，三星Internet，UC瀏覽器和Opera（大多數(shù)只在安卓平臺(tái)）支持這兩個(gè)規(guī)范。桌面上的其他瀏覽器只支持Service Worker，并且今年計(jì)劃支持Web App Manifest。
作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要，這是一個(gè)我的iOS交流群：656315826，不管你是小白還是大牛歡迎入駐?，分享BAT,阿里面試題、面試經(jīng)驗(yàn)，討論技術(shù)，?大家一起交流學(xué)習(xí)成長(zhǎng)！希望幫助開(kāi)發(fā)者少走彎路。
在07年WWDC上，Steve Jobs通過(guò)第一代iPhone發(fā)布了PWAs（當(dāng)時(shí)不叫這個(gè)名字）。
稍等一下，所以那個(gè)app沒(méi)有通過(guò)任何應(yīng)用商店的質(zhì)量測(cè)試，對(duì)嗎?
是的，那是對(duì)的。然而，那個(gè)app僅會(huì)在瀏覽器下運(yùn)行或者Web平臺(tái)安全和執(zhí)行模式。那就意味著你可以“發(fā)布”應(yīng)用商店中沒(méi)有批準(zhǔn)的app, 比如說(shuō)對(duì)于你們公司員工（是的，也有成人內(nèi)容）的內(nèi)部app，但是你不能獲得純粹的原本屬性，比如說(shuō)iPhone X或ARKit對(duì)于增強(qiáng)現(xiàn)實(shí)的Face ID?；蛘咧辽?，你需要等待Web平臺(tái)抓取到那些新特征。
PWA應(yīng)用可以在Safari瀏覽的任何網(wǎng)站或脫機(jī)模式下運(yùn)行，就像系統(tǒng)中的任何其他應(yīng)用。如果你在考慮是否PWA應(yīng)用正在使用Web視圖，對(duì)于Safari瀏覽器或安裝的圖標(biāo)這不是問(wèn)題，但是當(dāng)使用其它瀏覽器或使用Facebook的內(nèi)部應(yīng)用瀏覽器時(shí)，PWA應(yīng)用使用了Web視圖。
在iOS系統(tǒng)上PWA應(yīng)用的能力
在iOS的Web平臺(tái)你可以獲得：
地理定位
傳感器（磁強(qiáng)計(jì)、加速度計(jì)、陀螺儀）
相機(jī)
音頻輸出
語(yǔ)音合成（僅連接耳機(jī)）
蘋(píng)果支付
WebAssembly， WebRTC, WebGL和許多其他的實(shí)驗(yàn)特性。
相比原生iOS應(yīng)用的限制
該應(yīng)用程序可以存儲(chǔ)僅50Mb的離線數(shù)據(jù)和文件
如果用戶幾個(gè)周不使用該應(yīng)用程序，iOS將會(huì)釋放應(yīng)用文件。圖標(biāo)將仍然會(huì)在主屏幕上顯示，當(dāng)點(diǎn)擊進(jìn)入時(shí)，該應(yīng)用程序?qū)?huì)重新下載。
沒(méi)有一些特性，比如說(shuō)藍(lán)牙、序列端口、信標(biāo)、Touch ID、Face ID、ARKit、高度傳感器、電池信息。
沒(méi)有后臺(tái)執(zhí)行代碼
沒(méi)有隱私信息（聯(lián)系方式、后臺(tái)所在地），也沒(méi)有原生的社交應(yīng)用
沒(méi)有應(yīng)用內(nèi)支付和許多其他的基于蘋(píng)果的服務(wù)
在iPad上，沒(méi)有和其它應(yīng)用一起使用的側(cè)邊或分屏顯示，漸進(jìn)式網(wǎng)頁(yè)應(yīng)用將總是占用整個(gè)屏幕
沒(méi)有推送通知，沒(méi)有圖標(biāo)徽章或Siri整合
即使你安裝了一個(gè)帶有圖標(biāo)并且名字為Tinder的漸進(jìn)式網(wǎng)頁(yè)應(yīng)用，Siri也不能找到它。
漸進(jìn)式網(wǎng)頁(yè)應(yīng)用在安卓上可以做什么呢？
在安卓上，你可以存儲(chǔ)超過(guò)50Mb的東西
如果你不使用該應(yīng)用，安卓不會(huì)刪除文件，但是在手機(jī)存儲(chǔ)不夠時(shí)會(huì)刪除文件。同樣，如果用戶安裝或使用頻繁，漸進(jìn)式網(wǎng)頁(yè)應(yīng)用可以請(qǐng)求永久存儲(chǔ)。
為BLE設(shè)備接入藍(lán)牙
對(duì)進(jìn)入本地共享對(duì)話框的網(wǎng)頁(yè)分享
語(yǔ)音識(shí)別
后臺(tái)同步合網(wǎng)頁(yè)推送通知
Web應(yīng)用banner圖邀請(qǐng)用戶安裝
你可以自定義（一定程度上）你想要的啟動(dòng)畫(huà)面和方向
使用WebAPK和Chrome，用戶只能安裝一個(gè)漸進(jìn)式網(wǎng)頁(yè)應(yīng)用實(shí)例
使用WebAPK和Chrome，在設(shè)置下面的PWA中，你可以看到數(shù)據(jù)使用情況；在iOS系統(tǒng)中，所有的這些都在Safari中體現(xiàn)
使用WebAPK和Chrome，漸進(jìn)式應(yīng)用管理著它鏈接的用途，如果你得到一個(gè)指向漸進(jìn)式網(wǎng)頁(yè)應(yīng)用的鏈接，它將會(huì)在脫機(jī)模式下打開(kāi)，而不是在瀏覽器的窗口。
漸進(jìn)式網(wǎng)頁(yè)應(yīng)用可以在iOS系統(tǒng)上做什么？
用戶可以在安裝之前更改圖標(biāo)名字
可以在configuration profile頁(yè)面進(jìn)行配置，所以企業(yè)用戶可以從公司獲取到漸進(jìn)式網(wǎng)頁(yè)應(yīng)用的捷徑（這一點(diǎn)很好?。㏒afari使用術(shù)語(yǔ)WebClip來(lái)描繪這個(gè)特征，然而據(jù)文獻(xiàn)所說(shuō)，似乎并沒(méi)有讀取Web應(yīng)用的清單。
Configuration Profiles可以包括WebClips或PWA圖標(biāo)。
但是，如果沒(méi)有App Store，怎么安裝PWA呢？
這是在iOS平臺(tái)最大的挑戰(zhàn)之一，沒(méi)有來(lái)自Safari提醒或者邀請(qǐng)（就像Android平臺(tái)的Web應(yīng)用條幅）。用戶必須在Safari中以某種方式訪問(wèn)你的PWA的連接，并手動(dòng)點(diǎn)擊分享圖標(biāo)，然后點(diǎn)擊“添加到主屏幕”。在你訪問(wèn)一個(gè)PWA地址的時(shí)候不會(huì)留下任何痕跡。
當(dāng)你訪問(wèn)Tinder.com，你可以忽略頂部的原生應(yīng)用條幅并點(diǎn)擊分享，添加到主屏幕。如果你想為用戶提供安裝教程，務(wù)必注意這些按鈕會(huì)根據(jù)系統(tǒng)語(yǔ)言進(jìn)行本地化調(diào)整。
當(dāng)然，在App Store中會(huì)有其他非自帶瀏覽器，就像Chrome、火狐、Brave或者Edge是無(wú)法安裝PWA的，也無(wú)法使用Service Workers。
一旦你安裝好了一個(gè)PWA，在主屏幕上它的圖標(biāo)看起來(lái)會(huì)與其他應(yīng)用一樣。但是系統(tǒng)沒(méi)有為它提供3D觸摸式菜單。如果你再次安裝同一個(gè)PWA，將會(huì)有另一個(gè)圖標(biāo)指向原來(lái)的PWA（幸運(yùn)的是，安裝的文件是共享的）。
當(dāng)然，大部分web應(yīng)用會(huì)提供一個(gè)鏈接，讓你可以從App Store中安裝原生應(yīng)用。他也會(huì)在PWA中顯示，就像下面這個(gè)Tinder例子：
我已經(jīng)擁有這個(gè)應(yīng)用了對(duì)吧？
我已經(jīng)有了一個(gè)PWA，它可以立刻在iOS平臺(tái)上運(yùn)行嗎？
作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要，這是一個(gè)我的iOS交流群：656315826，不管你是小白還是大牛歡迎入駐?，分享BAT,阿里面試題、面試經(jīng)驗(yàn)，討論技術(shù)，?大家一起交流學(xué)習(xí)成長(zhǎng)！希望幫助開(kāi)發(fā)者少走彎路。
當(dāng)你更新iOS 11.3之后，你的PWA將可以立刻安裝。你不需要選擇進(jìn)入iOS。每個(gè)PWA都可以安裝。但這并不意味著每個(gè)應(yīng)用都會(huì)像預(yù)想一般正常工作。
Uber的PWA看起來(lái)真的很漂亮。但是如果你點(diǎn)擊“登錄”或者“繼續(xù)”，會(huì)調(diào)轉(zhuǎn)到Safari，那時(shí)你就離開(kāi)了獨(dú)立的PWA…因此，它是無(wú)效的。
如果你正在閱讀本文，你可能已經(jīng)看過(guò)我之前在測(cè)試版的文章：?Cupertino we have a problem. 不幸的是，在測(cè)試版期間遇到的大多數(shù)問(wèn)題和挑戰(zhàn)仍然存在于最終版本中。
如果你什么都不做，你的PWA會(huì)出現(xiàn)一個(gè)黑色框覆蓋原來(lái)黑色的狀態(tài)欄，所以用戶無(wú)法看到時(shí)間、電池狀態(tài)以及任何通知。
哪些事情會(huì)導(dǎo)致不能運(yùn)行
展示：全屏展示：minimal-ui無(wú)法在iOS系統(tǒng)上運(yùn)行；全屏?xí)|發(fā)獨(dú)立模式，并且minimal-ui只是Safari的一個(gè)快照。不過(guò)，你可以使用cover-fit屬性做視圖擴(kuò)展或者已經(jīng)被棄用的meta標(biāo)識(shí)來(lái)達(dá)到類似于全屏的內(nèi)容展示（狀態(tài)欄依然存在，但是會(huì)覆蓋你的應(yīng)用）；
如果你依賴后臺(tái)同步，你需要有一個(gè)備份實(shí)現(xiàn)方案；
你的PWA無(wú)法鎖定橫縱展示方向；
狀態(tài)欄的主題顏色樣式無(wú)法修改：你可以使用被遺棄的meta標(biāo)識(shí)實(shí)現(xiàn)黑色或者白色狀態(tài)欄，或者使用CSS/HTML的trick去仿造一個(gè)主體顏色；
辛巴克的PWA在點(diǎn)擊“Sign up”選項(xiàng)之后不提供返回鍵，沒(méi)辦法取消這次的選擇，如果想返回就需要重新打開(kāi)PWA。
如果你的PWA在應(yīng)用的UI上沒(méi)有返回的手勢(shì)操作或按鈕，用戶將無(wú)法從屏幕之間跳轉(zhuǎn)
你的安卓圖標(biāo)在iOS系統(tǒng)可能看起來(lái)很糟糕，因?yàn)樘O(píng)果公司不支持透明圖標(biāo)，所以，換掉它吧。
Google Keep的PWA版本的圖標(biāo)依賴Web App Manifest規(guī)范，所以在iOS系統(tǒng)上他就是個(gè)屏幕縮圖。您必須通過(guò)蘋(píng)果公司的非標(biāo)準(zhǔn)鏈接標(biāo)簽提供給iOS系統(tǒng)
此外，iOS系統(tǒng)并不根據(jù)Web App Manifest規(guī)范獲取圖標(biāo)，除非是通過(guò)apple-touch-link鏈接提供的。如果你不提供鏈接標(biāo)簽，系統(tǒng)將會(huì)用屏幕截圖當(dāng)做PWA應(yīng)用的圖標(biāo)（就像上面看到的Google Keep PWA例子）
沒(méi)有啟動(dòng)界面，所以大多數(shù)來(lái)自manifest的顏色特性會(huì)被忽略
無(wú)manifest事件將會(huì)被觸發(fā)，所以如果你正想通過(guò)其他渠道來(lái)跟蹤安裝，在iOS系統(tǒng)上應(yīng)用將不會(huì)運(yùn)行（但是你可以查看navigator.standalone方法來(lái)替代）。
作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要，這是一個(gè)我的iOS交流群：656315826，不管你是小白還是大牛歡迎入駐?，分享BAT,阿里面試題、面試經(jīng)驗(yàn)，討論技術(shù)，?大家一起交流學(xué)習(xí)成長(zhǎng)！希望幫助開(kāi)發(fā)者少走彎路。
你的PWA在不同的會(huì)話中無(wú)法保存狀態(tài)。如果用戶離開(kāi)PWA再次回來(lái)的時(shí)候，它將會(huì)重啟。所以，如果你需要用戶驗(yàn)證郵箱、短信或者雙重認(rèn)證，記住給用戶提供一個(gè)合適的解決方案。
不管怎么樣，你所有的不活動(dòng)的PWA將會(huì)出現(xiàn)白屏。記住，它并沒(méi)有在運(yùn)行，并且如果切換回它們，應(yīng)用將會(huì)重啟。
在iPad上也會(huì)出現(xiàn)同樣的白屏問(wèn)題
在最近使用的應(yīng)用列表中，PWA不會(huì)出現(xiàn)屏幕快照，所以很不辛的是，它們看起來(lái)就像白屏。
當(dāng)你的應(yīng)用以獨(dú)立模式運(yùn)行的時(shí)候會(huì)有一些bug。所以，測(cè)試的時(shí)候不要依賴Safari。
Nasa的PWA嘗試使用頂部缺口區(qū)域，但是出現(xiàn)了一些用戶體驗(yàn)上的缺陷。
如果想讓你的應(yīng)用使用iPhone X的缺口區(qū)域，你需要在HTML和CSS上做一些改變。如果你做的不對(duì)，可能會(huì)發(fā)生奇怪的事情
有時(shí)，你添加到了主屏幕，但是沒(méi)有使用manifest，那你就只安裝了一個(gè)縮略圖
一個(gè)帶有星巴克商標(biāo)的Google地圖？不，這只是打開(kāi)了一排PWA之后的iOS系統(tǒng)。在最近使用的應(yīng)用列表中出現(xiàn)這種奇怪的現(xiàn)象，是因?yàn)橐粋€(gè)應(yīng)用加載錯(cuò)了地址。
Safari和主界面截圖共享同一個(gè)Service Worker記錄（但不是這個(gè)例子）和緩存文件。Safari視圖管理者（就像Twitter的內(nèi)置瀏覽器）支持Service Workers協(xié)議和緩存，但是它似乎在會(huì)話關(guān)閉后刪除了所有的數(shù)據(jù)。
每個(gè)非系統(tǒng)自帶瀏覽器，例如Chrome、火狐或者其他的應(yīng)用，使用的都是WebVIew，就像Facebook的內(nèi)置瀏覽器。他們不支持Service Workers協(xié)議（它只工作在整個(gè)測(cè)試階段），所以系統(tǒng)不會(huì)安裝任何文件。我猜測(cè)，API可能需要WKWebView讓?xiě)?yīng)用自己根據(jù)Service Workers協(xié)議決定自己要做什么，但是…誰(shuí)知道事實(shí)是什么呢。
你能使用Safari TP在Safari上同時(shí)調(diào)試“Web”（主界面上的PWA）的客戶端和Service Worker協(xié)議（只是猜測(cè)是哪個(gè)）。通過(guò)網(wǎng)絡(luò)連接來(lái)測(cè)試也很方便。
要想在iOS上調(diào)試Service Workers，你需要在mac系統(tǒng)10.11.5、10.12.6和10.13.4的更新版本上安裝Safari開(kāi)發(fā)預(yù)覽版（Safari Technology Previce）或者Safari 11.1。
Service Worker的inspector工具也是測(cè)試版，例如，它不支持我們看到的緩存內(nèi)容
Service Workers 可以在實(shí)驗(yàn)技術(shù)下的設(shè)置中禁止（默認(rèn)是啟動(dòng)的）
這個(gè)空的應(yīng)用是什么
有時(shí)，你同事打開(kāi)多個(gè)PWA，iOS系統(tǒng)任務(wù)欄會(huì)變得瘋狂，會(huì)在最近使用的應(yīng)用列表中顯示一個(gè)沒(méi)有圖標(biāo)和標(biāo)題的“幽靈”應(yīng)用。
如果你在 iOS 中的 PWA 中找到任何的的 bug? 那請(qǐng)你寫(xiě)信給我，我將會(huì)回信或者填寫(xiě)一份bug報(bào)告給 Webkit 的團(tuán)隊(duì)。如果你想要獲得更新的文章，讓我們?cè)?Twitter 上@firt。如果你六月份在灣區(qū)，請(qǐng)注意下親手實(shí)踐的 PWA 培訓(xùn)。我會(huì)現(xiàn)場(chǎng)來(lái)教；我們會(huì)在每一個(gè)平臺(tái)上創(chuàng)建一個(gè) PWA，包括在 iOS 上。
Maximiliano Firtman?是一位移動(dòng)端 + web開(kāi)發(fā)者，培訓(xùn)老師，演講者和作者。他有多本著作，包括高性能移動(dòng)Web，由O’Reilly Media出版。他常常是國(guó)際會(huì)議上的演講者，并被移動(dòng)web社區(qū)廣泛認(rèn)可他所做的貢獻(xiàn)。他常常為世界上頂級(jí)的公司教授移動(dòng)端，HTML5，PWA和性能方面的培訓(xùn)。他已經(jīng)在很多公司和線上舉辦了一些先進(jìn)的Web App學(xué)習(xí)班和培訓(xùn)，例如，Linked Learning/Lynda?和?Safari O’Reilly。他的 Twitter 是：@firt
作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要，這是一個(gè)我的iOS交流群：656315826，不管你是小白還是大牛歡迎入駐?，分享BAT,阿里面試題、面試經(jīng)驗(yàn)，討論技術(shù)，?大家一起交流學(xué)習(xí)成長(zhǎng)！希望幫助開(kāi)發(fā)者少走彎路。
