關於 iOS 上的 PWA 應用，你需要知道些什麼？

開源中國發表於2019-03-04

在 iOS 11.3 版本中，蘋果公司悄悄地增加了基於“漸進增強 Web 應用程式”（Progressive Web Apps，PWA）概念的新技術。本文帶你看看 PWA 是如何工作的？它的能力和挑戰是什麼？以及如果你有已釋出的 PWA 應用，那麼你需要知道些什麼。

這就是一個 PWA 應用，它能在 iPad 上全屏展示，並且具有離線功能，它也與 App Store 中的其它本地應用程式一樣會出現在 iPad Dock 中

PWA 還沒有一個確切的定義，總的來說，它是使用某種不需要打包或簽名的 Web 技術創造出來的應用程式，可以離線執行，並且可以在執行的系統中選擇性安裝，它不論是從外觀還是執行效果來看，都與一般應用程式無異。

PWA 應用在大多數平臺上都不需要經過 App Store 流程，目前只有 Edge/Windows 10 強制 PAW 應用入駐商店。

也就是說在 iOS 平臺上，你可以在沒有 App Store 授權的情況下安裝 PWA 應用。這可能是蘋果公司一直沒有向使用者介紹這個新功能的原因之一，他們甚至都沒有在 Safari 釋出這個技術的公告，也許他們不想讓使用者產生疑惑。

你能指出 Google 地圖原生應用和 PWA 版本的區別嗎

誰創造了 PWA ？

其實，PWA 並不是蘋果創造的，而是 Google 帶著 Chrome 團隊創造了 PWA 這個名詞，但是在那之前這個創意最早卻是來源於初代 iPhone 系統的 Safari 上。

2007年，在 WWDC 大會上，賈伯斯在“one more thing”中宣佈：如何在初代 iPhone 中開發應用？使用 Web 應用的方法。

在 iPhone 系統最初的規劃中並沒有 App Store，而且在整個 iPhone 裝置的第一年，原生 SDK 是用不了的。從蘋果公司的角度來看，就算是到現在，PWA 應用都只是“手機主介面上的 Web 應用”，它的圖示被稱為 WebClip（網頁應用快捷方式）。

如果你想具體瞭解的話，可以看看我去年釋出在Fluent會議上的演講，在10:50處我花一分鐘的時間提到了它。

事實上，在11年前，這個創意並沒有得到很多重視，蘋果公司也沒有去更新這個平臺。所以10多年過去了，它的很多問題依然沒有得到解決。在那之後的幾年裡，其它平臺克隆了這個創意，比如諾基亞 N9 的 MeeGo 瀏覽器和安卓上的 Chrome 瀏覽器。

Chrome 促進了 PWA 相關技術的發展並提供了更好的體驗。這些技術主要是 Service Workers 和 Web App Manifest 規範，2018年3月30日 iOS 11.3 釋出，蘋果公司開始在 Chrome、火狐、三星 Internet、UC 和 Opera 等瀏覽器上支援這兩個規範（大多數只在安卓平臺）。其它桌面瀏覽器目前只支援 Service Worker，但是也計劃在今年會支援 Web App Manifest。

在07年WWDC上，Steve Jobs通過第一代iPhone釋出了PWAs（當時不叫這個名字）

所以 PWA 應用不用通過任何應用商店的質量測試？

確實是這樣。但是，PWA 應用只會在瀏覽器或 Web 平臺的安全執行模式下執行。這就意味著你可以“釋出”應用商店中不可能批准的應用，比如為公司員工提供的內部應用程式，當然也可以是包含成人內容的應用。但是你無法使用某些原生功能，比如 iPhone X 上的 Face ID 和用於擴增實境的 ARKit，這需要等到 Web 平臺提供了相應新特性你才能使用。

PWA 應用可以像其它網站一樣在 Safari 瀏覽器上執行，同時也可以像系統中的其它應用一樣在 standalone 模式下執行。你可能會想 PWA 應用是否使用了 Web View，對於 Safari 瀏覽器或安裝圖示來說並不是的，但是當使用其它瀏覽器或使用 Facebook 的內部應用瀏覽器時，PWA 應用就會使用 Web View。

iOS 系統上 PWA 應用可以幹什麼？

在 iOS 的 Web 平臺你可以做到：

地理定位

感測器（磁強計、加速度計、陀螺儀）

相機

音訊輸出

語音合成（僅連線耳機）

Apple Pay

WebAssembly、WebRTC、WebGL 等實驗特性

相比原生 iOS 應用的限制

PWA 應用只能儲存50 Mb 的離線資料和檔案

如果使用者幾周不使用某個 PWA 應用，iOS 會釋放該應用檔案。雖然圖示還是會顯示在主螢幕上，但是當點選進去，將會重新下載該 PWA 應用

無法使用一些特性，比如藍芽、序列埠、信標、Touch ID、Face ID、ARKit、高度感測器與電池資訊

無法在後臺訪問執行程式碼

無法訪問隱私資訊（聯絡人、位置），也無法訪問本地社交應用

沒有應用內購買和許多其它基於蘋果的服務

在 iPad 上，無法使用 Side 或 Split Views 與其它應用共享螢幕，PWA 應用始終佔用整個螢幕

沒有推送通知，沒有 icon badge（在應用 icon 上顯示小紅點）與 Siri 整合

即使你安裝了一個帶有圖示並且名字為 Tinder 的 PWA 應用，Siri 也不能找到它

PWA 應用在安卓上可以做些什麼？

在安卓上，你可以儲存超過50 Mb 的東西

如果你不使用該應用，安卓不會刪除它的檔案，但是在手機儲存不夠時會刪除。同時，如果使用者安裝或使用頻繁，PWA 應用可以請求永久儲存

為 BLE 裝置接入藍芽

通過 Web 共享訪問本地共享對話方塊

語音識別

後臺同步和網頁推送通知

通過 Web App Banner 邀請使用者安裝 PWA 應用

你可以在一定程度上自定義想要的啟動畫面和方向

使用 WebAPK 和 Chrome，使用者只能安裝同個 PWA 應用的一個例項

使用 WebAPK 和 Chrome，PWA 應用顯示在設定介面中，你還可以看到資料的使用情況；在 iOS 系統中，這些都體現在 Safari 中

使用 WebAPK 和 Chrome，PWA 應用管理著 URL 的用途，如果你得到一個指向 PWA 應用的 URL，它將會在 standalone 模式下開啟，而不是在瀏覽器的視窗中

PWA 應用可以在 iOS 系統上做什麼？

使用者可以在安裝之前更改應用圖示的名字

可以在 configuration profile 頁面進行配置，這樣使用者就可以從公司獲取 PWA 應用的快捷方式（這一點很好！）。Safari 使用術語 WebClip 來描繪這個特徵，然而根據文件來看，似乎並不能讀取 Web App Manifest

Configuration Profiles 可以包括 WebClips 或 PWA 圖示

沒有 App Store，那怎麼安裝 PWA？

這是 iOS 平臺最大的挑戰之一，沒有來自 Safari 的提醒或者邀請（就像Android 平臺的 Web App Banners）。使用者必須在 Safari 中以某種方式訪問你的 PWA 連結，並手動點選分享圖示，然後點選“新增到主螢幕”。沒有任何跡象表明你訪問的網站是 PWA 應用。

當你訪問 Tinder.com，你可以忽略頂部的原生應用 banner 並點選分享，新增到主螢幕。如果你想為使用者提供安裝教程，務必注意這些按鈕會根據系統語言進行本地化調整。

同時，在 App Store 中會有其它非自帶瀏覽器，像 Chrome、火狐、Brave 和 Edge 是無法安裝 PWA 應用的，它們也無法使用 Service Workers。

一旦你安裝好了一個 PWA 應用，在主螢幕上它的圖示看起來會與其他應用一樣，但是系統沒有為它提供3D觸控式選單。如果你再次安裝同一個 PWA 應用，將會有另一個圖示指向之前的 PWA 應用（幸運的是，安裝的檔案是共享的）。

當然，大部分 Web 應用會提供一個連結，讓你可以從 App Store 中安裝原生應用，PWA 應用中也有這樣一個連結，就像下面這個 Tinder 例子：

我已經有了一個 PWA，它可以立刻在 iOS 平臺上執行嗎？

當使用者更新 iOS 11.3之後，就可以立刻安裝 PWA 應用。每個 PWA 應用都可以安裝，但這並不意味著每個應用都會像預想的那樣正常工作。

Uber 的 PWA 應用看起來真的很漂亮。但是如果你點選“登入”或者“繼續”，會調轉到 Safari，這時你就離開了 standalone 模式的 PWA…

你可能已經看過我之前在測試版時寫的文章：Cupertino we have a problem。不幸的是，在測試版期間遇到的大多數問題和挑戰仍然存在於最終版本中。

如果你什麼都不做，你的 PWA 應用會出現一個黑色框覆蓋狀態列，這樣使用者就無法看到時間、電池狀態和其它資訊

哪些事情會導致應用無法執行

展示：全屏展示：minimal-ui 無法在 iOS 系統上執行；全屏會觸發 standalone 模式，這時 minimal-ui 就成了 Safari 的一個快捷方式。不過，你可以使用 cover-fit 屬性做檢視擴充套件或者已經被棄用的 meta 標籤來達到類似於全屏的內容展示（狀態列依然存在，但是會覆蓋你的應用）；

如果你依賴後臺同步，你需要有一個備份實現方案；

你的 PWA 無法鎖定橫縱展示方向；

狀態列的主題顏色樣式無法修改：你可以使用被棄用的 meta 標籤實現黑色或者白色狀態列，或者使用 CSS/HTML 的 trick 去仿造一個主題顏色；

星巴克的 PWA 應用在點選“Sign up”之後不提供返回鍵，同時無法取消這次的選擇，如果想返回就需要重新開啟 PWA

如果你的 PWA 應用的 UI 上沒有返回的手勢操作或按鈕，使用者將無法從螢幕之間跳轉

你的安卓圖示在 iOS 系統可能看起來很糟糕，因為蘋果公司不支援透明圖示

Google Keep PWA 版本的圖示依賴 Web App Manifest 規範，所以在 iOS 系統上他就是個螢幕截圖。你必須通過蘋果公司的非標準連結標籤提供 icon 給 iOS

此外，iOS 系統並不根據 Web App Manifest 規範獲取圖示，除非是通過 apple-touch-link 連結提供的。如果你不提供連結標籤，系統將會用螢幕截圖當做 PWA 應用的圖示（就像上面看到的 Google Keep PWA 例子）

沒有啟動介面，所以大多數來自 manifest 的顏色特性會被忽略

manifest 事件不會被觸發，所以如果你正想通過這些渠道來跟蹤安裝，在 iOS 系統上應用將不會執行（但是你可以檢視 navigator.standalone 方法來替代）

牢記這幾點

你的 PWA 應用在不同的會話中無法儲存狀態。如果使用者離開 PWA 應用再次回來的時候，它將會重啟。所以，如果你需要使用者驗證郵箱、簡訊或者雙因子認證，記住給使用者提供一個合適的解決方案。

不活動的 PWA 應用將會顯示為白屏。這時它並沒有在執行，並且如果切換回它們，應用將會重啟

在 iPad 上也會出現同樣的白屏問題

在最近使用的應用列表中，PWA 應用不會出現螢幕快照，所以它們看起來就像白屏。

當你的應用以 standalone 模式執行的時候會有一些 bug。測試的時候不要依賴Safari。

Nasa 的 PWA 應用嘗試使用頂部缺口區域，但是出現了一些使用者體驗上的缺陷

如果想讓 PWA 應用使用 iPhone X 的缺口區域，你需要在 HTML 和 CSS 上做一些改變。

有時，你新增到了主螢幕，但是沒有使用 manifest，那你就只安裝了一個縮圖。

一個帶有星巴克商標的 Google 地圖？不，這只是開啟了一排 PWA 應用之後的 iOS 系統。在最近使用的應用列表中出現這種奇怪的現象，是因為一個應用載入錯了地址

Safari 和主介面截圖共享同一個 Service Worker 記錄和快取檔案。Safari 檢視管理器（就像 Twitter 的內建瀏覽器）支援 Service Workers 協議和快取，但是它似乎在會話關閉後刪除了所有的資料。

每個非系統自帶瀏覽器，例如 Chrome、火狐等使用的都是 WebView，就像 Facebook 的內建瀏覽器。它們不支援 Service Workers 協議，所以系統不會安裝任何檔案。我猜測， WKWebView 可能需要 API 讓應用自己根據 Service Workers 協議決定自己要做什麼。