隨著 iOS 11.3 的發(fā)布，蘋果悄悄的支持了 PWA 理念背后的幾種新技術(shù)：Service Worker, Web App Manifest，那么讓我們來(lái)看一下它們是如何工作的，它們能做到什么，它們的挑戰(zhàn)是什么，以及如果你已經(jīng)發(fā)布過 PWA 應(yīng)用，那你還應(yīng)該知道什么。 

如果你看到這篇文章之前還不知道什么是 PWA，我可以告訴你，它沒有一個(gè)唯一且準(zhǔn)確的定義，但我可以告訴你的是，它是一個(gè)用 Web 技術(shù)創(chuàng)建的 App，不用打包，不用簽名，可以離線工作，如果你愿意，還可以添加到桌面上，看起來(lái)就和其他應(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ù)。 

難道蘋果不是 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 還不能用。從蘋果的角度來(lái)看，即使在今天，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ù)來(lái)提供一個(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)行中。 

等等，所以這些應(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)容)，但無(wú)法使用一些 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ī)
• 音頻輸出
• 語(yǔ)音合成(僅連接耳機(jī))
• Apple Pay
• WebAssembly, WebRTC, Web GL 以及許多實(shí)驗(yàn)性的特性

和 iOS 原生應(yīng)用相比有哪些限制

PWA 只能存儲(chǔ)最多 50Mb 的離線數(shù)據(jù)和文件

• 如果用戶幾周不使用 PWA，iOS 將釋放這些 PWA 緩存的文件，桌面圖標(biāo)當(dāng)然還在，用戶下次訪問的時(shí)候，會(huì)重新緩存文件
• 無(wú)法應(yīng)用一些 Native API，如：藍(lán)牙、Touch ID、Face ID、ARKit、電池信息等
• 無(wú)法在后臺(tái)執(zhí)行代碼
• 無(wú)法訪問一些私密數(shù)據(jù)，如：聯(lián)系人等，也無(wú)法訪問本地社交應(yīng)用
• 無(wú)法訪問 In App Payments 和其他許多基于 Apple 的服務(wù)
• 在 iPad 上，無(wú)法使用分屏和其他應(yīng)用程序共享屏幕，PWA 始終占滿整個(gè)屏幕
• 沒有消息推送，沒有 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
• 語(yǔ)音識(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)) 

在 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)出來(lái)這是一個(gè) PWA。 

從 App Store 安裝的其他瀏覽器，如 Chrome，F(xiàn)irefox，Brave 或者 Edge 都不能安裝 PWA，也不能使用 Service Worker。

完成安裝后，它看起來(lái)就像主屏幕上的其他圖標(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 站點(diǎn) 了，iOS 用戶能馬上使用嗎?

在用戶升級(jí)到 iOS 11.3 之后，用戶就可以安裝您的 PWA 了，不需要給 iOS 額外的配置，每個(gè) PWA 都能安裝，但是這并不意味著一切都能和你想的一樣。 

如果你正在閱讀這篇文章，你可能已經(jīng)在 iOS PWA 還在 beta 版的時(shí)候我發(fā)布的一篇文章《Cupertino，我們遇到麻煩了》，不好的消息是，在 beta 版期間遇到的大多數(shù)問題在 iOS 11.3 發(fā)布之后依然存在。 

什么不能正常工作呢?

• 顯示問題：fullscreen 和 minimal-ui 兩種模式在 iOS 上不支持，fullscreen 和 standalone 模式一樣，而 minimal-ui 模式只是一個(gè) Safari 的快捷方式。但是你可以通過使用 cover-fit 或者已經(jīng)棄用的私有 meta 標(biāo)簽來(lái)達(dá)到類似的 fullscreen 效果(狀態(tài)欄會(huì)處在，但是會(huì)覆蓋在你的 app 上)
• 后臺(tái)同步(background sync)還不支持
• 無(wú)法鎖定 PWA 的方向，橫屏還是豎屏
• theme-color 屬性不起作用，無(wú)法修改狀態(tài)欄的顏色，你可以通過使用已經(jīng)棄用的私有 meta 標(biāo)簽來(lái)設(shè)置黑色或者白色的狀態(tài)欄，也可以使用 CSS/HTML 來(lái)模擬 theme-color 

• 如果你的 PWA 沒有后退手勢(shì)或者返回按鈕，用戶將無(wú)法在頁(yè)面間切換
• iOS 不支持透明圖標(biāo)，所以一定要注意 

• 在 iOS 中，無(wú)法使用 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ā)，因此你無(wú)法通過事件來(lái)判斷用戶是否安裝，但可以通過 navigator.standalone 來(lái)判斷是否是在 standalone 模式下運(yùn)行

要記住什么?

• PWA 無(wú)法在會(huì)話之間保持狀態(tài)，如果用戶切出 PWA 到另外一個(gè)應(yīng)用，它將在切回來(lái)的時(shí)候重新啟動(dòng)，因此如果你需要用戶驗(yàn)證郵箱，短信或者需要調(diào)到另外一個(gè) App 來(lái)驗(yàn)證的需求，請(qǐng)重新考慮另一種實(shí)現(xiàn)方式

所有沒激活的 PWA 都是白屏，無(wú)論它們之前是不是，記住，它們沒在運(yùn)行，并且如果你切回 PWA，它將重新啟動(dòng)在 iPad 上有同樣的白屏問題

• 在背后的 PWA 沒有截屏縮略信息，它們看起來(lái)都白的，這點(diǎn)很遺憾
• 當(dāng)你的 app 在 standalone 模式下運(yùn)行的時(shí)候，可能會(huì)有 bug，不要用只 Safari 來(lái)測(cè)試你的 PWA 

• 如果你想讓你的 PWA 利用 iPhone X 的缺口區(qū)域，需要用 HTML/CSS 進(jìn)行特殊處理，如果做的不好，就會(huì)看起來(lái)很奇怪
• 有時(shí)候，你添加到主屏的時(shí)候沒有 manifest 文件，添加的就只是一個(gè)快捷方式 

• 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 來(lái)讓應(yīng)用程序開發(fā)人員來(lái)決定如何使用 Service Worker，但是…誰(shuí)知道呢 

• 要在 iOS 上調(diào)試 Service Worker，你需要安裝 Safari 技術(shù)預(yù)覽版或者 Safari 11.1 

• Service Worker 可以被禁用，可以通過 設(shè)置->實(shí)驗(yàn)特性(默認(rèn)情況下是開啟的) 

• 有的時(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)上生存下來(lá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)上生存下來(lái)。