iOS progressive Web App (PWA) 技術

 

隨着 iOS 11.3 的發佈，iOS + PWA 的時代終於來了！本文對 iOS 中 PWA 的能力進行了分析，並將其與 iOS 上的 Native App、Android 上的 PWA 進行了深度對比，是值得收藏的一篇好文。

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

這是一個在 iPad 上的 PWA，它能全屏，能離線使用，還能夠像 App Store 中其餘原生應用同樣固定在 Dock 中

若是你看到這篇文章以前還不知道什麼是 PWA，我能夠告訴你，它沒有一個惟一且準確的定義，但我能夠告訴你的是，它是一個用 Web 技術建立的 App，不用打包，不用簽名，能夠離線工做，若是你願意，還能夠添加到桌面上，看起來就和其餘應用同樣。

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

因此，你猜對了，你如今能夠不用經過 App Store 在 iOS 上安裝應用了。這可能就是爲何蘋果沒有直接提到這項新能力的緣由之一，他們可能不想換休用戶，甚至在 Safari 的發佈說明中都沒有提到這項技術。

你能夠看出它們的區別嗎？一個是原生 Google 地圖，一個是 PWA 版本

難道蘋果不是 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 的支持今年也在進行中。

史蒂夫喬布斯正在 WWDC 2007 年的第一款 iPhone 上演示 PWA（那個時候還不叫 PWA）

等等，因此這些應用沒有經過 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 以及許多實驗性的特性

你能區分哪些是 PWA，哪些是原生應用嗎？

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

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

• 若是用戶幾周不使用 PWA，iOS 將釋放這些 PWA 緩存的文件，桌面圖標固然還在，用戶下次訪問的時候，會從新緩存文件

• 沒法應用一些 Native API，如：藍牙、Touch ID、Face ID、ARKit、電池信息等

• 沒法在後臺執行代碼

• 沒法訪問一些私密數據，如：聯繫人等，也沒法訪問本地社交應用

• 沒法訪問 In App Payments 和其餘許多基於 Apple 的服務

• 在 iPad 上，沒法使用分屏和其餘應用程序共享屏幕，PWA 始終佔滿整個屏幕

• 沒有消息推送，沒有 Siri 集成

若是你安裝了一個叫 Tinder 的 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 的標準）

配置文件包含 WebClips 和 PWA 圖標

在 iOS 上怎麼安裝 PWA 呢？

這是在 iOS 上重要的挑戰之一，由於 iOS Safari 沒有任何提示或者引導讓用戶添加 PWA，Android 下有一個叫 Web App Install Banners 的引導用戶，因此，用戶須要在 Safari 中先訪問你的站點，而後手動點擊分享（Share）圖標，而後點擊「添加到主屏幕」。整個過程當中，沒有任何一點表現出來這是一個 PWA。

點擊分享以後，點擊添加到桌面按鈕，須要 Web App 自己對用戶進行引導，引導時請不要忘記當前系統語言

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

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

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

我已經安裝了 PWA 了，不要試圖引導我下載 Native App

我已經有 PWA 站點 了，iOS 用戶能立刻使用嗎？

在用戶升級到 iOS 11.3 以後，用戶就能夠安裝您的 PWA 了，不須要給 iOS 額外的配置，每一個 PWA 都能安裝，可是這並不意味着一切都能和你想的同樣。

Uber PWA 看起來真的很不錯，可是當你點擊登陸或者繼續按鈕時候，受權頁面會打開 Safari，從而跳出了獨立運行的 PWA

若是你正在閱讀這篇文章，你可能已經在 iOS PWA 還在 beta 版的時候我發佈的一篇文章《Cupertino，咱們遇到麻煩了》，很差的消息是，在 beta 版期間遇到的大多數問題在 iOS 11.3 發佈以後依然存在。

若是你什麼都不作，你的 PWA 頂部將會有來能重疊的黑色 bar，看不見時間，電池，其餘信，狀態欄

什麼不能正常工做呢？

• 顯示問題：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 在註冊頁面沒有返回按鈕，沒辦法取消當前註冊流程，你須要重啓 PWA

• 若是你的 PWA 沒有後退手勢或者返回按鈕，用戶將沒法在頁面間切換

• iOS 不支持透明圖標，因此必定要注意

Google Keep PWA 只在 Web App Manifest 設置了圖標，因此添加到桌面上的圖標是當前的截屏，你須要設置 Safari 的私有屬性來定製圖標

• 在 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

NASA 的 PWA 有一些體驗上的問題

• 若是你想讓你的 PWA 利用 iPhone X 的缺口區域，須要用 HTML/CSS 進行特殊處理，若是作的很差，就會看起來很奇怪

• 有時候，你添加到主屏的時候沒有 manifest 文件，添加的就只是一個快捷方式☹️

星巴克的商標在 Google 地圖中？其實不是，只是連續使用多個 PWA 時，iOS 會有一些奇怪的 bug，PWA 加載了錯誤的 URL

• 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，可是…誰知道呢

使用 Safari TP，你能夠調試 Safari 和主屏上的 PWA，能夠調試 Service Worker，也能捕獲網絡請求

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

Service Worker 的調試工具還在實驗階段，例如，暫時還看不到 CacheStorage 中的內容

• Service Worker 能夠被禁用，能夠經過 設置->實驗特性（默認狀況下是開啓的）

這個空白的應用是什麼？

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

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

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

原文地址（Medium，你懂得）：https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7