標籤：

iOS + PWA 已經來了

05-03

譯：彭星

原文地址：medium.com/@firt/progre

隨著 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://www.youtube.com/watch?time_continue=651&v=EFGltzFSK-c?

www.youtube.com

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 不會在你很久不用這個 app 的時候就把它的文件刪掉，但是它會在存儲空間不足的時刪除文件。如果用戶安裝並且使用很多的時候，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 可能需要一個 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 平台上生存下來。

原文鏈接：medium.com/@firt/progre（請自備梯子）


推薦閱讀：

TAG:漸進式網路應用程序PWA | iOS | Safari |