隨著 iOS 11.3 的發(fā)布驶鹉，iOS + PWA 的時(shí)代終于來了室埋！本文對(duì) iOS 中 PWA 的能力進(jìn)行了分析伊约，并將其與 iOS 上的 Native App屡律、Android 上的 PWA 進(jìn)行了深度對(duì)比疹尾，是值得收藏的一篇好文纳本。
隨著 iOS 11.3 的發(fā)布繁成，蘋果悄悄的支持了 PWA 理念背后的幾種新技術(shù)：Service Worker, Web App Manifest巾腕，那么讓我們來看一下它們是如何工作的尊搬，它們能做到什么佛寿，它們的挑戰(zhàn)是什么，以及如果你已經(jīng)發(fā)布過 PWA 應(yīng)用蜡饵，那你還應(yīng)該知道什么溯祸。
這是一個(gè)在 iPad 上的 PWA焦辅，它能全屏，能離線使用压状，還可以像 App Store 中其他原生應(yīng)用一樣固定在 Dock 中
如果你看到這篇文章之前還不知道什么是 PWA种冬，我可以告訴你娱两，它沒有一個(gè)唯一且準(zhǔn)確的定義十兢，但我可以告訴你的是旱物，它是一個(gè)用 Web 技術(shù)創(chuàng)建的 App宵呛，不用打包宝穗，不用簽名逮矛，可以離線工作橱鹏，如果你愿意莉兰，還可以添加到桌面上糖荒，看起來就和其他應(yīng)用一樣捶朵。
在大多數(shù)平臺(tái)上综看，都不要求 PWA 必須從 App Store 中安裝红碑，除了 Edge 瀏覽器和 Windows 10析珊，它們要求 PWA 必須在它們的應(yīng)用商店中忠寻。
所以奕剃，你猜對(duì)了纵朋，你現(xiàn)在可以不用通過 App Store 在 iOS 上安裝應(yīng)用了倡蝙。這可能就是為什么蘋果沒有直接提到這項(xiàng)新能力的原因之一寺鸥，他們可能不想換休用戶胆建，甚至在 Safari 的發(fā)布說明中都沒有提到這項(xiàng)技術(shù)笆载。
你可以看出它們的區(qū)別嗎腻要？一個(gè)是原生 Google 地圖雄家，一個(gè)是 PWA 版本
難道蘋果不是 PWA 的創(chuàng)造者嗎趟济？
說實(shí)話顷编，Google Chrome 團(tuán)隊(duì)創(chuàng)造了 PWA 這個(gè)屬于媳纬，但是這個(gè)項(xiàng)目最初是在原始 iPhone OS 的 Safari 上提出的层宫，2007 年萌腿，史蒂夫喬布斯在 WWDC 上宣布 “one more thing”：如何在 原始 iPhone 上開發(fā)應(yīng)用程序抖苦，令人驚訝的是居然是 Web App毁菱。App Store 那時(shí)候根本不在最初的計(jì)劃中，并且在 iPhone 發(fā)布的第一年锌历，原生 SDK 還不能用贮庞。從蘋果的角度來看，即使在今天究西，PWA 也只是 “主屏幕上的 webapp”，圖標(biāo)也被成為 WebClip卤材。
如果你愿意遮斥，可以看一下我去年在 Fluent Conference 上的演講視頻，我在 10 分 50 秒的時(shí)候提到了這個(gè)事情扇丛。視頻鏈接地址：
https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Ftime_continue%3D651%26v%3DEFGltzFSK-c
11年前术吗，這個(gè)想法并沒有得到太多的關(guān)注，蘋果也忘記了更新這個(gè)能力帆精，所以有 10+ 年的時(shí)間较屿，這個(gè)功能一直有缺陷并且不穩(wěn)定隧魄。隨后，幾年后隘蝎，其他的平臺(tái)實(shí)現(xiàn)了這個(gè)想法购啄，包括諾基亞 N9 上的 MeeGo 瀏覽器和 Android Chrome。
Chrome 幫助改善和實(shí)現(xiàn)這些技術(shù)來提供一個(gè)更好的體驗(yàn)給用戶末贾，主要體現(xiàn)在 Service Worker 和 Web App Manifest 規(guī)范上闸溃。從今天（2018 年 3 月 30 日） iOS 11.3 版本，蘋果跟進(jìn) Chrome, Firefox, Samsung Internet, UC 瀏覽器 和 Opera 支持了這兩個(gè)奇數(shù)規(guī)范拱撵，Mac 版 Safari 也已經(jīng)支持了 Service Worker辉川，并且 Web App Manifest 的支持今年也在進(jìn)行中。
史蒂夫喬布斯正在 WWDC 2007 年的第一款 iPhone 上演示 PWA（那個(gè)時(shí)候還不叫 PWA）
等等拴测，所以這些應(yīng)用沒有通過 App Store 的質(zhì)量測(cè)試乓旗，對(duì)吧？?
是的集索，你又猜對(duì)了屿愚。但是 PWA 目前只能在瀏覽器或其他 Web 平臺(tái)安全策略下運(yùn)行，這意味著你可以“發(fā)布”未在 App Store 中獲得批準(zhǔn)的應(yīng)用务荆，例如貴公司員工的內(nèi)部應(yīng)用（也包括承認(rèn)內(nèi)容）妆距，但無法使用一些 Native 的 API，如 iPhone X 上的 Face ID函匕，或者 ARKit 增強(qiáng)現(xiàn)實(shí)娱据，或者至少，你需要等待 Web 平臺(tái)支持這些新的 API盅惜。
PWA 可以在作為一個(gè)普通網(wǎng)站中剩，或者 standalone 模式（沒有地址欄和 Safari 的其他功能）在Safari 中運(yùn)行，就像系統(tǒng)中的其他應(yīng)用程序一樣抒寂。
iOS 中 PWA 的能力
在 iOS 的 Web 平臺(tái)上您可以調(diào)用以下 API：
地理信息定位
傳感器（陀螺儀结啼，加速度計(jì)，磁力儀）
相機(jī)
音頻輸出
語音合成（僅連接耳機(jī)）
Apple Pay
WebAssembly, WebRTC, Web GL 以及許多實(shí)驗(yàn)性的特性
你能區(qū)分哪些是 PWA屈芜，哪些是原生應(yīng)用嗎郊愧？
和 iOS 原生應(yīng)用相比有哪些限制
PWA 只能存儲(chǔ)最多 50Mb 的離線數(shù)據(jù)和文件
如果用戶幾周不使用 PWA，iOS 將釋放這些 PWA 緩存的文件井佑，桌面圖標(biāo)當(dāng)然還在属铁，用戶下次訪問的時(shí)候御吞，會(huì)重新緩存文件
無法應(yīng)用一些 Native API看彼，如：藍(lán)牙钉疫、Touch ID领跛、Face ID瓢对、ARKit忙芒、電池信息等
無法在后臺(tái)執(zhí)行代碼
無法訪問一些私密數(shù)據(jù)鸣戴，如：聯(lián)系人等档桃，也無法訪問本地社交應(yīng)用
無法訪問 In App Payments 和其他許多基于 Apple 的服務(wù)
在 iPad 上，無法使用分屏和其他應(yīng)用程序共享屏幕蝶防，PWA 始終占滿整個(gè)屏幕
沒有消息推送甚侣，沒有 Siri 集成
如果你安裝了一個(gè)叫 Tinder 的 PWA，Siri 并不能找到它
哪些 在 Android 上可以间学，iOS 上不行的呢殷费？
在 Android 上可以存儲(chǔ)找過 50Mb 的數(shù)據(jù)和文件
Android 不會(huì)在你很久不用這個(gè) PWA 的時(shí)候就把它的文件刪掉，但是它會(huì)在存儲(chǔ)空間不足的時(shí)刪除文件低葫。如果用戶安裝并且使用很多的時(shí)候详羡，PWA 可以使用永久存儲(chǔ)
BLE 設(shè)備的藍(lán)牙訪問
Android上可以在 Web 中使用 Native 分享對(duì)話框，通過 Web Share API
語音識(shí)別
后臺(tái)同步和離線消息推送
彈出安裝對(duì)話框提示和邀請(qǐng)用戶安裝 PWA
你可以自定義（有限）PWA 啟動(dòng)畫面和決定 PWA 是豎屏還是橫屏
在 WebAPK 和 Chrome 中嘿悬，一個(gè) PWA 只能安裝一次
在 WebAPK 和 Chrome 中实柠，PWA 會(huì)出現(xiàn)在“設(shè)置“中，并且您可以看到數(shù)據(jù)使用量善涨，在 iOS 中窒盐，所有內(nèi)容都包含在 Safari 中
在 WebAPK 和 Chrome中，PWA 會(huì)捕獲你的 URL钢拧，如果是一個(gè) PWA 的鏈接蟹漓，它將用獨(dú)立模式打開 PWA，而不會(huì)打開瀏覽器
哪些在 iOS 上可以源内，Android 下不行的呢葡粒？
用戶可以在安裝前修改 PWA 的名字
可以在配置文件中進(jìn)行修改，因此企業(yè)用戶可以從公司安裝 PWA（這是一個(gè)很好的點(diǎn)）姿锭，Safari 管這個(gè)叫 WebClip（估計(jì)是沒有好好閱讀 Web App Manifest 的標(biāo)準(zhǔn)）
配置文件包含 WebClips 和 PWA 圖標(biāo)
在 iOS 上怎么安裝 PWA 呢塔鳍？
這是在 iOS 上重要的挑戰(zhàn)之一伯铣，因?yàn)?iOS Safari 沒有任何提示或者引導(dǎo)讓用戶添加 PWA呻此，Android 下有一個(gè)叫 Web App Install Banners 的引導(dǎo)用戶，所以腔寡，用戶需要在 Safari 中先訪問你的站點(diǎn)，然后手動(dòng)點(diǎn)擊分享（Share）圖標(biāo)放前，然后點(diǎn)擊“添加到主屏幕”。整個(gè)過程中葱她，沒有任何一點(diǎn)表現(xiàn)出來這是一個(gè) PWA。
點(diǎn)擊分享之后似扔，點(diǎn)擊添加到桌面按鈕搓谆，需要 Web App 本身對(duì)用戶進(jìn)行引導(dǎo)豪墅，引導(dǎo)時(shí)請(qǐng)不要忘記當(dāng)前系統(tǒng)語言
從 App Store 安裝的其他瀏覽器泉手，如 Chrome，F(xiàn)irefox斩萌，Brave 或者 Edge 都不能安裝 PWA屏轰，也不能使用 Service Worker。
完成安裝后袭艺，它看起來就像主屏幕上的其他圖標(biāo)叨粘，雖然它不會(huì)有 3D Touch 菜單升敲，如果您再次安裝相同的 PWA，擇會(huì)有另外一個(gè)同樣的圖標(biāo)瘪撇，指向相同的 PWA（比較幸運(yùn)的是港庄，安裝的文件將被共享）。
此外渤涌，很多 Web App 都有一個(gè)比較顯眼的位置引導(dǎo)用戶從 App Store 下載安裝原生應(yīng)用把还，在 PWA 中也這樣顯示了吊履，這其實(shí)對(duì)用戶體驗(yàn)是一個(gè)傷害安皱，比如 Tinder：
我已經(jīng)安裝了 PWA 了，不要試圖引導(dǎo)我下載 Native App
我已經(jīng)有 PWA 站點(diǎn) 了艇炎，iOS 用戶能馬上使用嗎缀踪？
在用戶升級(jí)到 iOS 11.3 之后燕锥，用戶就可以安裝您的 PWA 了归形，不需要給 iOS 額外的配置鼻由，每個(gè) PWA 都能安裝蕉世，但是這并不意味著一切都能和你想的一樣。
Uber PWA 看起來真的很不錯(cuò)奸例，但是當(dāng)你點(diǎn)擊登錄或者繼續(xù)按鈕時(shí)候查吊，授權(quán)頁面會(huì)打開 Safari湖蜕，從而跳出了獨(dú)立運(yùn)行的 PWA
如果你正在閱讀這篇文章昭抒，你可能已經(jīng)在 iOS PWA 還在 beta 版的時(shí)候我發(fā)布的一篇文章《Cupertino，我們遇到麻煩了》盗迟，不好的消息是罚缕，在 beta 版期間遇到的大多數(shù)問題在 iOS 11.3 發(fā)布之后依然存在婆芦。
如果你什么都不做消约，你的 PWA 頂部將會(huì)有來能重疊的黑色 bar或粮，看不見時(shí)間捞高，電池渣锦，其他信袋毙，狀態(tài)欄
什么不能正常工作呢听盖？
顯示問題：fullscreen 和 minimal-ui ?兩種模式在 iOS 上不支持裂七，fullscreen 和 standalone 模式一樣背零，而 minimal-ui 模式只是一個(gè) Safari 的快捷方式。但是你可以通過使用 cover-fit 或者已經(jīng)棄用的私有 meta 標(biāo)簽來達(dá)到類似的 fullscreen 效果（狀態(tài)欄會(huì)處在毛雇，但是會(huì)覆蓋在你的 app 上）
后臺(tái)同步（background sync）還不支持
無法鎖定 PWA 的方向侦镇，橫屏還是豎屏
theme-color 屬性不起作用虽缕，無法修改狀態(tài)欄的顏色氮趋，你可以通過使用已經(jīng)棄用的私有 meta 標(biāo)簽來設(shè)置黑色或者白色的狀態(tài)欄，也可以使用 CSS/HTML 來模擬 theme-color
星巴克 PWA 在注冊(cè)頁面沒有返回按鈕诉植，沒辦法取消當(dāng)前注冊(cè)流程晾腔，你需要重啟 PWA
如果你的 PWA 沒有后退手勢(shì)或者返回按鈕啊犬，用戶將無法在頁面間切換
iOS 不支持透明圖標(biāo)觉至，所以一定要注意
Google Keep PWA 只在 Web App Manifest 設(shè)置了圖標(biāo)，所以添加到桌面上的圖標(biāo)是當(dāng)前的截屏席怪，你需要設(shè)置 Safari 的私有屬性來定制圖標(biāo)
在 iOS 中纤控，無法使用 manifest.json 文件中的圖標(biāo)船万，但是可以使用 app-touch-icon link 標(biāo)簽設(shè)置的圖標(biāo)，如果你沒有提供這個(gè) link 標(biāo)簽疫赎，Safari 將會(huì)使用屏幕截圖作為 icon捧搞，可以看上面的 Google Keep PWA 的例子
沒有啟動(dòng)畫面狮荔，所以 Web App Manifest 中的大多數(shù)顏色屬性都會(huì)被忽略
不會(huì)有任何和 manifest ?相關(guān)的事件被觸發(fā)殖氏，因此你無法通過事件來判斷用戶是否安裝，但可以通過 navigator.standalone 來判斷是否是在 standalone 模式下運(yùn)行
要記住什么爵憎？
PWA 無法在會(huì)話之間保持狀態(tài)宝鼓，如果用戶切出 PWA 到另外一個(gè)應(yīng)用巴刻，它將在切回來的時(shí)候重新啟動(dòng)胡陪，因此如果你需要用戶驗(yàn)證郵箱，短信或者需要調(diào)到另外一個(gè) App 來驗(yàn)證的需求邑雅，請(qǐng)重新考慮另一種實(shí)現(xiàn)方式
所有沒激活的 PWA 都是白屏蒂阱，無論它們之前是不是录煤，記住荞胡，它們沒在運(yùn)行泪漂，并且如果你切回 PWA萝勤，它將重新啟動(dòng)在 iPad 上有同樣的白屏問題
在背后的 PWA 沒有截屏縮略信息，它們看起來都白的慎式，這點(diǎn)很遺憾
當(dāng)你的 app 在 standalone 模式下運(yùn)行的時(shí)候趟径，可能會(huì)有 bug蜗巧，不要用只 Safari 來測(cè)試你的 PWA
NASA 的 PWA 有一些體驗(yàn)上的問題
如果你想讓你的 PWA 利用 iPhone X 的缺口區(qū)域幕屹，需要用 HTML/CSS 進(jìn)行特殊處理望拖，如果做的不好，就會(huì)看起來很奇怪
有時(shí)候沧烈，你添加到主屏的時(shí)候沒有 manifest 文件像云，添加的就只是一個(gè)快捷方式??
星巴克的商標(biāo)在 Google 地圖中迅诬？其實(shí)不是侈贷，只是連續(xù)使用多個(gè) PWA 時(shí)，iOS 會(huì)有一些奇怪的 bug撑蚌，PWA 加載了錯(cuò)誤的 URL
Safari 和添加到主屏的 PWA 共享相同的 Service Worker Registration（不是 Service Worker 實(shí)例） 和緩存的文件争涌，Safari View Controller（比如 Twitter 的應(yīng)用內(nèi)置瀏覽器）也支持 Service Worker 和 Cache API亮垫，但是似乎在會(huì)話關(guān)閉后會(huì)刪除所有數(shù)據(jù)
所有第三方瀏覽器（Chrome、Firefox 等）和所有使用 WebView 的應(yīng)用（Facebook 的應(yīng)用程序內(nèi)瀏覽器等）都不支持 Service Worker燃异，我的猜測(cè)是回俐，WKWebView 可能u需要一個(gè) API 來讓應(yīng)用程序開發(fā)人員來決定如何使用 Service Worker壹瘟，但是…誰知道呢
使用 Safari TP稻轨，你可以調(diào)試 Safari 和主屏上的 PWA殴俱，可以調(diào)試 Service Worker，也能捕獲網(wǎng)絡(luò)請(qǐng)求
要在 iOS 上調(diào)試 Service Worker明场，你需要安裝 Safari 技術(shù)預(yù)覽版或者 Safari 11.1
Service Worker 的調(diào)試工具還在實(shí)驗(yàn)階段苦锨，例如舟舒，暫時(shí)還看不到 CacheStorage 中的內(nèi)容
Service Worker 可以被禁用秃励，可以通過 設(shè)置->實(shí)驗(yàn)特性（默認(rèn)情況下是開啟的）
這個(gè)空白的應(yīng)用是什么夺鲜？
有的時(shí)候，你同時(shí)打開了很多的 PWA慷蠕，iOS 任務(wù)欄就會(huì)很奇怪砌们，顯示了一個(gè)沒有圖標(biāo)和標(biāo)題的幽靈應(yīng)用
如果你發(fā)現(xiàn)了任何 iOS 上 PWA 的其他 bug搁进，請(qǐng)?jiān)谙路皆u(píng)論饼问，我會(huì)整理一份錯(cuò)誤報(bào)告交給 WebKit 團(tuán)度揭斧，如果你想獲得關(guān)于這篇文章的最新消息讹开，也請(qǐng)?jiān)?Twitter 關(guān)注我 @firt旦万，如果您 6 月份在灣區(qū)，請(qǐng)看我將教授的手把手學(xué)會(huì) PWA 培訓(xùn)赏半，我們將創(chuàng)建一個(gè) PWA淆两，涵蓋大多數(shù)人在其他平臺(tái)上都缺少的內(nèi)容秋冰，也包活如何在 iOS 平臺(tái)上生存下來??剑勾。
如果你發(fā)現(xiàn)了任何 iOS 上 PWA 的其他 bug，請(qǐng)?jiān)谙路皆u(píng)論盯另，我會(huì)整理一份錯(cuò)誤報(bào)告交給 WebKit 團(tuán)隊(duì)鸳惯，如果你想獲得關(guān)于這篇文章的最新消息，也請(qǐng)?jiān)?Twitter 關(guān)注我?@firt绪商，如果您 6 月份在灣區(qū)格郁，請(qǐng)看我將教授的手把手學(xué)會(huì) PWA 培訓(xùn)独悴，我們將創(chuàng)建一個(gè) PWA刻炒，涵蓋大多數(shù)人在其他平臺(tái)上都缺少的內(nèi)容坟奥，也包活如何在 iOS 平臺(tái)上生存下來。
原文地址（Medium晒喷，你懂得）：https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
推薦閱讀
（點(diǎn)擊圖片即可跳轉(zhuǎn)）
按照當(dāng)前的發(fā)展趨勢(shì)凉敲，PWA 將會(huì)帶來 Web App 的大量需求荡陷，新一輪大前端技術(shù)洗牌很可能近在眼前了迅涮。
Brilliant Open Web?
