在 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 協議決定自己要做什么。

你能使用 Safari TP 在 Safari 和“Web”（主界面上的 PWA 應用）上調試客戶端和 Service Worker 。通過網絡連接來測試也很方便。

• 要想在 iOS 上調試 Service Workers，你需要安裝 Safari 技術預覽版（Safari Technology Previce）或者 macOS 10.11.5,10.12.6和10.13.4更新版本的 Safari 11.1。

Service Worker 的 inspector 工具目前還是測試版，它不支持查看緩存存儲內容

• Service Workers 可以在設置中禁止（默認是啟動的）。

這個空的應用是什么

• 有時，同時打開多個 PWA，iOS 系統任務欄會被搞瘋，PWA 應用在最近使用的應用列表中將顯示為一個沒有圖標和標題的“幽靈”應用。

轉自: https://my.oschina.net/editorial-story/blog/1800368

原文作者介紹

Maximiliano Firtman ，移動端 + Web 開發者、培訓講師、演講專家和作者。他有多本著作，比如由 O’Reilly Media 出版的《高性能移動Web》。

總結

以上是生活随笔為你收集整理的关于 iOS 上的 PWA 应用，你需要知道些什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。