在 iOS 11.3 版本中，蘋果公司悄悄地增加了基于“漸進增強 Web 應(yīng)用程序”（Progressive Web Apps，PWA）概念的新技術(shù)。本文帶你看看 PWA 是如何工作的？它的能力和挑戰(zhàn)是什么？以及如果你有已發(fā)布的 PWA 應(yīng)用，那么你需要知道些什么。

這就是一個 PWA 應(yīng)用，它能在 iPad 上全屏展示，并且具有離線功能，它也與 App Store 中的其它本地應(yīng)用程序一樣會出現(xiàn)在 iPad Dock 中

PWA 還沒有一個確切的定義，總的來說，它是使用某種不需要打包或簽名的 Web 技術(shù)創(chuàng)造出來的應(yīng)用程序，可以離線運行，并且可以在運行的系統(tǒng)中選擇性安裝，它不論是從外觀還是執(zhí)行效果來看，都與一般應(yīng)用程序無異。

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

也就是說在 iOS 平臺上，你可以在沒有 App Store 授權(quán)的情況下安裝 PWA 應(yīng)用。這可能是蘋果公司一直沒有向用戶介紹這個新功能的原因之一，他們甚至都沒有在 Safari 發(fā)布這個技術(shù)的公告，也許他們不想讓用戶產(chǎn)生疑惑。

你能指出 Google 地圖原生應(yīng)用和 PWA 版本的區(qū)別嗎

誰創(chuàng)造了 PWA ？

其實，PWA 并不是蘋果創(chuàng)造的，而是 Google 帶著 Chrome 團隊創(chuàng)造了 PWA 這個名詞，但是在那之前這個創(chuàng)意最早卻是來源于初代 iPhone 系統(tǒng)的 Safari 上。

2007年，在 WWDC 大會上，喬布斯在“one more thing”中宣布：如何在初代 iPhone 中開發(fā)應(yīng)用？使用 Web 應(yīng)用的方法。

在 iPhone 系統(tǒng)最初的規(guī)劃中并沒有 App Store，而且在整個 iPhone 設(shè)備的第一年，原生 SDK 是用不了的。從蘋果公司的角度來看，就算是到現(xiàn)在，PWA 應(yīng)用都只是“手機主界面上的 Web 應(yīng)用”，它的圖標(biāo)被稱為 WebClip（網(wǎng)頁應(yīng)用快捷方式）。

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

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

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

在07年WWDC上，Steve Jobs通過第一代iPhone發(fā)布了PWAs（當(dāng)時不叫這個名字）

所以 PWA 應(yīng)用不用通過任何應(yīng)用商店的質(zhì)量測試？

確實是這樣。但是，PWA 應(yīng)用只會在瀏覽器或 Web 平臺的安全執(zhí)行模式下運行。這就意味著你可以“發(fā)布”應(yīng)用商店中不可能批準(zhǔn)的應(yīng)用，比如為公司員工提供的內(nèi)部應(yīng)用程序，當(dāng)然也可以是包含成人內(nèi)容的應(yīng)用。但是你無法使用某些原生功能，比如 iPhone X 上的 Face ID 和用于增強現(xiàn)實的 ARKit，這需要等到 Web 平臺提供了相應(yīng)新特性你才能使用。

PWA 應(yīng)用可以像其它網(wǎng)站一樣在 Safari 瀏覽器上運行，同時也可以像系統(tǒng)中的其它應(yīng)用一樣在 standalone 模式下運行。你可能會想 PWA 應(yīng)用是否使用了 Web View，對于 Safari 瀏覽器或安裝圖標(biāo)來說并不是的，但是當(dāng)使用其它瀏覽器或使用 Facebook 的內(nèi)部應(yīng)用瀏覽器時，PWA 應(yīng)用就會使用 Web View。

iOS 系統(tǒng)上 PWA 應(yīng)用可以干什么？

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

• 地理定位
• 傳感器（磁強計、加速度計、陀螺儀）
• 相機
• 音頻輸出
• 語音合成（僅連接耳機）
• Apple Pay
• WebAssembly、WebRTC、WebGL 等實驗特性

相比原生 iOS 應(yīng)用的限制

• PWA 應(yīng)用只能存儲50 Mb 的離線數(shù)據(jù)和文件
• 如果用戶幾周不使用某個 PWA 應(yīng)用，iOS 會釋放該應(yīng)用文件。雖然圖標(biāo)還是會顯示在主屏幕上，但是當(dāng)點擊進去，將會重新下載該 PWA 應(yīng)用
• 無法使用一些特性，比如藍牙、序列端口、信標(biāo)、Touch ID、Face ID、ARKit、高度傳感器與電池信息
• 無法在后臺訪問執(zhí)行代碼
• 無法訪問隱私信息（聯(lián)系人、位置），也無法訪問本地社交應(yīng)用
• 沒有應(yīng)用內(nèi)支付和許多其它基于蘋果的服務(wù)
• 在 iPad 上，無法使用 Side 或 Split Views 與其它應(yīng)用共享屏幕，PWA 應(yīng)用始終占用整個屏幕
• 沒有推送通知，沒有 icon badge（在應(yīng)用 icon 上顯示小紅點）與 Siri 集成

即使你安裝了一個帶有圖標(biāo)并且名字為 Tinder 的 PWA 應(yīng)用，Siri 也不能找到它

PWA 應(yīng)用在安卓上可以做些什么？

• 在安卓上，你可以存儲超過50 Mb 的東西
• 如果你不使用該應(yīng)用，安卓不會刪除它的文件，但是在手機存儲不夠時會刪除。同時，如果用戶安裝或使用頻繁，PWA 應(yīng)用可以請求永久存儲
• 為 BLE 設(shè)備接入藍牙
• 通過 Web 共享訪問本地共享對話框
• 語音識別
• 后臺同步和網(wǎng)頁推送通知
• 通過 Web App Banner 邀請用戶安裝 PWA 應(yīng)用
• 你可以在一定程度上自定義想要的啟動畫面和方向
• 使用 WebAPK 和 Chrome，用戶只能安裝同個 PWA 應(yīng)用的一個實例
• 使用 WebAPK 和 Chrome，PWA 應(yīng)用顯示在設(shè)置界面中，你還可以看到數(shù)據(jù)的使用情況；在 iOS 系統(tǒng)中，這些都體現(xiàn)在 Safari 中
• 使用 WebAPK 和 Chrome，PWA 應(yīng)用管理著 URL 的用途，如果你得到一個指向 PWA 應(yīng)用的 URL，它將會在 standalone 模式下打開，而不是在瀏覽器的窗口中

PWA 應(yīng)用可以在 iOS 系統(tǒng)上做什么？

• 用戶可以在安裝之前更改應(yīng)用圖標(biāo)的名字
• 可以在 configuration profile 頁面進行配置，這樣用戶就可以從公司獲取 PWA 應(yīng)用的快捷方式（這一點很好！）。Safari 使用術(shù)語 WebClip 來描繪這個特征，然而根據(jù)文檔來看，似乎并不能讀取 Web App Manifest

Configuration Profiles 可以包括 WebClips 或 PWA 圖標(biāo)

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

這是 iOS 平臺最大的挑戰(zhàn)之一，沒有來自 Safari 的提醒或者邀請（就像Android 平臺的 Web App Banners）。用戶必須在 Safari 中以某種方式訪問你的 PWA 鏈接，并手動點擊分享圖標(biāo)，然后點擊“添加到主屏幕”。沒有任何跡象表明你訪問的網(wǎng)站是 PWA 應(yīng)用。

當(dāng)你訪問 Tinder.com，你可以忽略頂部的原生應(yīng)用 banner 并點擊分享，添加到主屏幕。如果你想為用戶提供安裝教程，務(wù)必注意這些按鈕會根據(jù)系統(tǒng)語言進行本地化調(diào)整。

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

一旦你安裝好了一個 PWA 應(yīng)用，在主屏幕上它的圖標(biāo)看起來會與其他應(yīng)用一樣，但是系統(tǒng)沒有為它提供3D觸摸式菜單。如果你再次安裝同一個 PWA 應(yīng)用，將會有另一個圖標(biāo)指向之前的 PWA 應(yīng)用（幸運的是，安裝的文件是共享的）。

當(dāng)然，大部分 Web 應(yīng)用會提供一個鏈接，讓你可以從 App Store 中安裝原生應(yīng)用，PWA 應(yīng)用中也有這樣一個鏈接，就像下面這個 Tinder 例子：

我已經(jīng)有了一個 PWA，它可以立刻在 iOS 平臺上運行嗎？

當(dāng)用戶更新 iOS 11.3之后，就可以立刻安裝 PWA 應(yīng)用。每個 PWA 應(yīng)用都可以安裝，但這并不意味著每個應(yīng)用都會像預(yù)想的那樣正常工作。

Uber 的 PWA 應(yīng)用看起來真的很漂亮。但是如果你點擊“登錄”或者“繼續(xù)”，會調(diào)轉(zhuǎn)到 Safari，這時你就離開了 standalone 模式的 PWA…

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

如果你什么都不做，你的 PWA 應(yīng)用會出現(xiàn)一個黑色框覆蓋狀態(tài)欄，這樣用戶就無法看到時間、電池狀態(tài)和其它信息

哪些事情會導(dǎo)致應(yīng)用無法運行

• 展示：全屏展示：minimal-ui 無法在 iOS 系統(tǒng)上運行；全屏?xí)|發(fā) standalone 模式，這時 minimal-ui 就成了 Safari 的一個快捷方式。不過，你可以使用 cover-fit 屬性做視圖擴展或者已經(jīng)被棄用的 meta 標(biāo)簽來達到類似于全屏的內(nèi)容展示（狀態(tài)欄依然存在，但是會覆蓋你的應(yīng)用）；
• 如果你依賴后臺同步，你需要有一個備份實現(xiàn)方案；
• 你的 PWA 無法鎖定橫縱展示方向；
• 狀態(tài)欄的主題顏色樣式無法修改：你可以使用被棄用的 meta 標(biāo)簽實現(xiàn)黑色或者白色狀態(tài)欄，或者使用 CSS/HTML 的 trick 去仿造一個主題顏色；

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

• 如果你的 PWA 應(yīng)用的 UI 上沒有返回的手勢操作或按鈕，用戶將無法從屏幕之間跳轉(zhuǎn)
• 你的安卓圖標(biāo)在 iOS 系統(tǒng)可能看起來很糟糕，因為蘋果公司不支持透明圖標(biāo)

Google Keep PWA 版本的圖標(biāo)依賴 Web App Manifest 規(guī)范，所以在 iOS 系統(tǒng)上他就是個屏幕截圖。你必須通過蘋果公司的非標(biāo)準(zhǔn)鏈接標(biāo)簽提供 icon 給 iOS

• 此外，iOS 系統(tǒng)并不根據(jù) Web App Manifest 規(guī)范獲取圖標(biāo)，除非是通過 apple-touch-link 鏈接提供的。如果你不提供鏈接標(biāo)簽，系統(tǒng)將會用屏幕截圖當(dāng)做 PWA 應(yīng)用的圖標(biāo)（就像上面看到的 Google Keep PWA 例子）
• 沒有啟動界面，所以大多數(shù)來自 manifest 的顏色特性會被忽略
• manifest 事件不會被觸發(fā)，所以如果你正想通過這些渠道來跟蹤安裝，在 iOS 系統(tǒng)上應(yīng)用將不會運行（但是你可以查看 navigator.standalone 方法來替代）

牢記這幾點

• 你的 PWA 應(yīng)用在不同的會話中無法保存狀態(tài)。如果用戶離開 PWA 應(yīng)用再次回來的時候，它將會重啟。所以，如果你需要用戶驗證郵箱、短信或者雙因子認(rèn)證，記住給用戶提供一個合適的解決方案。

不活動的 PWA 應(yīng)用將會顯示為白屏。這時它并沒有在運行，并且如果切換回它們，應(yīng)用將會重啟

在 iPad 上也會出現(xiàn)同樣的白屏問題

• 在最近使用的應(yīng)用列表中，PWA 應(yīng)用不會出現(xiàn)屏幕快照，所以它們看起來就像白屏。
• 當(dāng)你的應(yīng)用以 standalone 模式運行的時候會有一些 bug。測試的時候不要依賴Safari。

Nasa 的 PWA 應(yīng)用嘗試使用頂部缺口區(qū)域，但是出現(xiàn)了一些用戶體驗上的缺陷

• 如果想讓 PWA 應(yīng)用使用 iPhone X 的缺口區(qū)域，你需要在 HTML 和 CSS 上做一些改變。
• 有時，你添加到了主屏幕，但是沒有使用 manifest，那你就只安裝了一個縮略圖。

一個帶有星巴克商標(biāo)的 Google 地圖？不，這只是打開了一排 PWA 應(yīng)用之后的 iOS 系統(tǒng)。在最近使用的應(yīng)用列表中出現(xiàn)這種奇怪的現(xiàn)象，是因為一個應(yīng)用加載錯了地址

• Safari 和主界面截圖共享同一個 Service Worker 記錄和緩存文件。Safari 視圖管理器（就像 Twitter 的內(nèi)置瀏覽器）支持 Service Workers 協(xié)議和緩存，但是它似乎在會話關(guān)閉后刪除了所有的數(shù)據(jù)。
• 每個非系統(tǒng)自帶瀏覽器，例如 Chrome、火狐等使用的都是 WebView，就像 Facebook 的內(nèi)置瀏覽器。它們不支持 Service Workers 協(xié)議，所以系統(tǒng)不會安裝任何文件。我猜測， WKWebView 可能需要 API 讓應(yīng)用自己根據(jù) Service Workers 協(xié)議決定自己要做什么。

你能使用 Safari TP 在 Safari 和“Web”（主界面上的 PWA 應(yīng)用）上調(diào)試客戶端和 Service Worker 。通過網(wǎng)絡(luò)連接來測試也很方便。

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

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

• Service Workers 可以在設(shè)置中禁止（默認(rèn)是啟動的）。

這個空的應(yīng)用是什么

• 有時，同時打開多個 PWA，iOS 系統(tǒng)任務(wù)欄會被搞瘋，PWA 應(yīng)用在最近使用的應(yīng)用列表中將顯示為一個沒有圖標(biāo)和標(biāo)題的“幽靈”應(yīng)用。

轉(zhuǎn)自: https://my.oschina.net/editorial-story/blog/1800368

原文作者介紹

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。