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

如果你看到這篇文章之前還不知道什么是 PWA，我可以告訴你，它沒有一個唯一且準確的定義，但我可以告訴你的是，它是一個用 Web 技術創建的 App，不用打包，不用簽名，可以離線工作，如果你愿意，還可以添加到桌面上，看起來就和其他應用一樣。

在大多數平臺上，都不要求 PWA 必須從 App Store 中安裝，除了 Edge 瀏覽器和 Windows 10，它們要求 PWA 必須在它們的應用商店中。

所以，你猜對了，你現在可以不用通過 App Store 在 iOS 上安裝應用了。這可能就是為什么蘋果沒有直接提到這項新能力的原因之一，他們可能不想換休用戶，甚至在 Safari 的發布說明中都沒有提到這項技術。 

難道蘋果不是 PWA 的創造者嗎?

說實話，Google Chrome 團隊創造了 PWA 這個屬于，但是這個項目最初是在原始 iPhone OS 的 Safari 上提出的，2007 年，史蒂夫喬布斯在 WWDC 上宣布 “one more thing”：如何在 原始 iPhone 上開發應用程序，令人驚訝的是居然是 Web App。App Store 那時候根本不在最初的計劃中，并且在 iPhone 發布的***年，原生 SDK 還不能用。從蘋果的角度來看，即使在今天，PWA 也只是 “主屏幕上的 webapp”，圖標也被成為 WebClip。

• 如果你愿意，可以看一下我去年在 Fluent Conference 上的演講視頻，我在 10 分 50 秒的時候提到了這個事情。視頻鏈接地址：

https://link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Ftime_continue%3D651%26v%3DEFGltzFSK-c

11年前，這個想法并沒有得到太多的關注，蘋果也忘記了更新這個能力，所以有 10+ 年的時間，這個功能一直有缺陷并且不穩定。隨后，幾年后，其他的平臺實現了這個想法，包括諾基亞 N9 上的 MeeGo 瀏覽器和 Android Chrome。

Chrome 幫助改善和實現這些技術來提供一個更好的體驗給用戶，主要體現在 Service Worker 和 Web App Manifest 規范上。從今天(2018 年 3 月 30 日) iOS 11.3 版本，蘋果跟進 Chrome, Firefox, Samsung Internet, UC 瀏覽器 和 Opera 支持了這兩個奇數規范，Mac 版 Safari 也已經支持了 Service Worker，并且 Web App Manifest 的支持今年也在進行中。 

等等，所以這些應用沒有通過 App Store 的質量測試，對吧?

是的，你又猜對了。但是 PWA 目前只能在瀏覽器或其他 Web 平臺安全策略下運行，這意味著你可以“發布”未在 App Store 中獲得批準的應用，例如貴公司員工的內部應用(也包括承認內容)，但無法使用一些 Native 的 API，如 iPhone X 上的 Face ID，或者 ARKit 增強現實，或者至少，你需要等待 Web 平臺支持這些新的 API。

PWA 可以在作為一個普通網站，或者 standalone 模式(沒有地址欄和 Safari 的其他功能)在Safari 中運行，就像系統中的其他應用程序一樣。

iOS 中 PWA 的能力

在 iOS 的 Web 平臺上您可以調用以下 API：

• 地理信息定位
• 傳感器(陀螺儀，加速度計，磁力儀)
• 相機
• 音頻輸出
• 語音合成(僅連接耳機)
• Apple Pay
• WebAssembly, WebRTC, Web GL 以及許多實驗性的特性

和 iOS 原生應用相比有哪些限制

PWA 只能存儲最多 50Mb 的離線數據和文件

• 如果用戶幾周不使用 PWA，iOS 將釋放這些 PWA 緩存的文件，桌面圖標當然還在，用戶下次訪問的時候，會重新緩存文件
• 無法應用一些 Native API，如：藍牙、Touch ID、Face ID、ARKit、電池信息等
• 無法在后臺執行代碼
• 無法訪問一些私密數據，如：聯系人等，也無法訪問本地社交應用
• 無法訪問 In App Payments 和其他許多基于 Apple 的服務
• 在 iPad 上，無法使用分屏和其他應用程序共享屏幕，PWA 始終占滿整個屏幕
• 沒有消息推送，沒有 Siri 集成 

哪些 在 Android 上可以，iOS 上不行的呢?

在 Android 上可以存儲找過 50Mb 的數據和文件

• Android 不會在你很久不用這個 PWA 的時候就把它的文件刪掉，但是它會在存儲空間不足的時刪除文件。如果用戶安裝并且使用很多的時候，PWA 可以使用***存儲
• BLE 設備的藍牙訪問
• Android上可以在 Web 中使用 Native 分享對話框，通過 Web Share API
• 語音識別
• 后臺同步和離線消息推送
• 彈出安裝對話框提示和邀請用戶安裝 PWA
• 你可以自定義(有限)PWA 啟動畫面和決定 PWA 是豎屏還是橫屏
• 在 WebAPK 和 Chrome 中，一個 PWA 只能安裝一次
• 在 WebAPK 和 Chrome 中，PWA 會出現在“設置“中，并且您可以看到數據使用量，在 iOS 中，所有內容都包含在 Safari 中
• 在 WebAPK 和 Chrome中，PWA 會捕獲你的 URL，如果是一個 PWA 的鏈接，它將用獨立模式打開 PWA，而不會打開瀏覽器

哪些在 iOS 上可以，Android 下不行的呢?

• 用戶可以在安裝前修改 PWA 的名字
• 可以在配置文件中進行修改，因此企業用戶可以從公司安裝 PWA(這是一個很好的點)，Safari 管這個叫 WebClip(估計是沒有好好閱讀 Web App Manifest 的標準) 

在 iOS 上怎么安裝 PWA 呢?

這是在 iOS 上重要的挑戰之一，因為 iOS Safari 沒有任何提示或者引導讓用戶添加 PWA，Android 下有一個叫 Web App Install Banners 的引導用戶，所以，用戶需要在 Safari 中先訪問你的站點，然后手動點擊分享(Share)圖標，然后點擊“添加到主屏幕”。整個過程中，沒有任何一點表現出來這是一個 PWA。 

從 App Store 安裝的其他瀏覽器，如 Chrome，Firefox，Brave 或者 Edge 都不能安裝 PWA，也不能使用 Service Worker。

完成安裝后，它看起來就像主屏幕上的其他圖標，雖然它不會有 3D Touch 菜單，如果您再次安裝相同的 PWA，擇會有另外一個同樣的圖標，指向相同的 PWA(比較幸運的是，安裝的文件將被共享)。

此外，很多 Web App 都有一個比較顯眼的位置引導用戶從 App Store 下載安裝原生應用，在 PWA 中也這樣顯示了，這其實對用戶體驗是一個傷害，比如 Tinder： 

我已經有 PWA 站點 了，iOS 用戶能馬上使用嗎?

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

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

什么不能正常工作呢?

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

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

• 在 iOS 中，無法使用 manifest.json 文件中的圖標，但是可以使用 app-touch-icon link 標簽設置的圖標，如果你沒有提供這個 link 標簽，Safari 將會使用屏幕截圖作為 icon，可以看上面的 Google Keep PWA 的例子
• 沒有啟動畫面，所以 Web App Manifest 中的大多數顏色屬性都會被忽略
• 不會有任何和 manifest 相關的事件被觸發，因此你無法通過事件來判斷用戶是否安裝，但可以通過 navigator.standalone 來判斷是否是在 standalone 模式下運行

要記住什么?

• PWA 無法在會話之間保持狀態，如果用戶切出 PWA 到另外一個應用，它將在切回來的時候重新啟動，因此如果你需要用戶驗證郵箱，短信或者需要調到另外一個 App 來驗證的需求，請重新考慮另一種實現方式

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

• 在背后的 PWA 沒有截屏縮略信息，它們看起來都白的，這點很遺憾
• 當你的 app 在 standalone 模式下運行的時候，可能會有 bug，不要用只 Safari 來測試你的 PWA 

• 如果你想讓你的 PWA 利用 iPhone X 的缺口區域，需要用 HTML/CSS 進行特殊處理，如果做的不好，就會看起來很奇怪
• 有時候，你添加到主屏的時候沒有 manifest 文件，添加的就只是一個快捷方式 

• Safari 和添加到主屏的 PWA 共享相同的 Service Worker Registration(不是 Service Worker 實例) 和緩存的文件，Safari View Controller(比如 Twitter 的應用內置瀏覽器)也支持 Service Worker 和 Cache API，但是似乎在會話關閉后會刪除所有數據
• 所有第三方瀏覽器(Chrome、Firefox 等)和所有使用 WebView 的應用(Facebook 的應用程序內瀏覽器等)都不支持 Service Worker，我的猜測是，WKWebView 可能u需要一個 API 來讓應用程序開發人員來決定如何使用 Service Worker，但是…誰知道呢 

• 要在 iOS 上調試 Service Worker，你需要安裝 Safari 技術預覽版或者 Safari 11.1 

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

• 有的時候，你同時打開了很多的 PWA，iOS 任務欄就會很奇怪，顯示了一個沒有圖標和標題的幽靈應用

如果你發現了任何 iOS 上 PWA 的其他 bug，請在下方評論，我會整理一份錯誤報告交給 WebKit 團度，如果你想獲得關于這篇文章的***消息，也請在 Twitter 關注我 @firt，如果您 6 月份在灣區，請看我將教授的手把手學會 PWA 培訓，我們將創建一個 PWA，涵蓋大多數人在其他平臺上都缺少的內容，也包活如何在 iOS 平臺上生存下來。

如果你發現了任何 iOS 上 PWA 的其他 bug，請在下方評論，我會整理一份錯誤報告交給 WebKit 團隊，如果你想獲得關于這篇文章的***消息，也請在 Twitter 關注我 @firt，如果您 6 月份在灣區，請看我將教授的手把手學會 PWA 培訓，我們將創建一個 PWA，涵蓋大多數人在其他平臺上都缺少的內容，也包活如何在 iOS 平臺上生存下來。