(翻譯)PWA即將登陸ios 11.3：Cupertino，我們有一個問題

三木的旅行日記發表於2018-02-07

寫在前面

Cupertino：蘋果電腦的全球總公司所在地
作者：Maximiliano Firtman
原文地址：PWAs are coming to iOS 11.3: Cupertino, we have a problem
說明：本人水平有限，在翻譯過程中難免有理解翻譯不準確的地方，為避免錯誤引導大家，希望能夠指，向大家傳遞正確的觀點和知識。

iOS 11.3以及macOS 10.12.4將包含service Worker-一個強大的規範，允許後臺指令碼支援離線web應用程式。iOS 11.3還會在將Web應用程式新增到主螢幕時諮詢Web應用程式清單。 -@rmondello

昨天看到Ricky Mondello的推特以及Safari 11.1 beta測試版實現了Web App Manifest和Service Workers，這意味著開發多平臺的PWA應用成為了現實，現在讓我們回到現實世界，看看我們已經有了什麼。

測試並不容易

在iOS上測試這些新的功能並不容易，因為Safari上的開發者工具並不允許你檢視Service Workers程式，而且客戶端API允許我們用它的客戶端與服務人員進行通訊的訊息通道並不在那裡。但是，我設法玩了幾個小時，儘管存在一些Bug，但是我相信在最終的版本上WebKit團隊可以解決這些問題。我想重點關注iOS PWAs與Android的顯著差異。

如果你釋出了一個PWA應用或者即將釋出，你必須注意使用者體驗以及有可能在iOS上發生的一些問題

複製程式碼

十八個月以前（竟然已經一年半了）我宣稱：“不要在PWA應用中不負責任的使用iOS元標籤”。Twitter和Flipkart等幾家公司在這些問題出現的時候注意到了這些問題，並刪除了iOS元標籤，或者解決了這些問題。
當時的問題是，一些公司沒有進行測試以及分析安卓PWA應用與iOS之間的區別就選擇通過蘋果元標籤來支援iOS。
很抱歉，現在出現的大多數問題都和我十八個月之前說的一樣，不過有一個地方還是很不同的：現在你不需要加入到iOS當中去。iOS將支援Web App Manifest，所以你的PWA將會自動變成iOS的PWA應用。但蘋果並沒有模仿安卓系統的行為，這意味著:Cupertino，我們有一個問題。

只能線上上安裝圖示

如果你在主螢幕上安裝你的PWA應用，雖然Service Workers就在這裡，但一直處於註冊狀態卻沒有執行（SW不會吧web應用當成客戶端一樣處理）。所以不要期望在第一個測試版本上獲得要離線體驗。不過我相信這是一個BUG，並且在以後的版本中會解決掉。

PWA:克隆攻擊

Service Worker API可以在Safari、Web View上使用HTTPS通訊(也就是Chrome、Firefox和Facebook的內建瀏覽器)上使用，應用程式可以新增到主螢幕(Web.app)和Safari檢視控制器(比如當你在iOS的推特上點選連結時)。
這聽起來很棒，是嗎？好吧，還有一個很大的問題：在Safari上、在每個應用的web檢視上以及主螢幕的web應用上，引擎是不支援分享Service Workers和快取儲存的，這就意味著使用者可能會在同一裝置上以多個PWA檔案的副本結束。
你也許會想：嘿，Max,同樣的事情也會發生在安卓以及其它不同的瀏覽器上（Chrome, Firefox, Opera, Samsung Internet, UC Web）。好吧，你是對的，但這是一個不一樣的用例。在安卓上，作業系統的web views上不支援Service Workers，首屏上的PWA應用都共享擁有這個應用圖示的瀏覽器的SW和快取。同樣的，在同一裝置上使用不同的瀏覽器載入同一web應用似乎並不是一個典型的用例。
現在，假設你是一個iOS使用者，並且使用一個PWA應用，比如Twitter Lite。當你要使用它時，你開啟你的瀏覽器，像iOS上的Chrome或者 Firefox。你獲得了這個應用的副本。假定你把它新增到主螢幕，這就生產了第二個應用副本。因為在iOS上你無法修改預設的瀏覽器，所以當你在郵箱中收到一個到推特的連結，你點選之後，Safari就會開啟，在你的裝置上就生成了第三個應用副本。這就結束了？還沒有。如果你在其他應用程式中使用Facebook或一些報紙應用程式，你可以在app內只瀏覽器中體驗，當你點選一個連結到推特或者推特賬戶，這就生成了另一個應用副本。幸運的是，Safari的檢視控制器似乎與Safari共享SW和cache。

所以，一個iOS使用者在關閉PWA應用時，存在四個或者更多的副本（我們討論的是service worker和快取檔案，而不是圖示）。

web應用的Manifest應用

當您的HTML中有一個manifest時，Safari將使用它而不是舊的非標準的蘋果移動元標籤。非常棒，然而，知道beat1版本，和安卓相比你也會有一些意想不到的行為發生。
我們來討論一下那些特性被忽略了（但現在只是beta1版本，我不確定以後哪些特性會有或者沒有）：

APP 名字：只能為圖示使用很短的名字
主題顏色和背景顏色：沒有啟動螢幕，沒有彩色狀態列。
圖示：我昨天看到幾個PWA應用的作者很高興他們的解決方案在安裝之後很好的起作用了，但這還不是完全正確的。大多數PWA應用的圖示都是通過<link rel=”apple-touch-icon”>設定來獲取的，而不是來自應用的Manifest。我猜蘋果在未來的版本中會解決這個問題，我希望能夠提供120x120和180x180兩個尺寸。
方向：並沒有提供鎖定方向的方法。
展示：全屏：它是獨立的(儘管它現在被標記為棄用，但你仍然可以使用黑色半透明狀態列來獲得全螢幕。)
展示：小屏，它是瀏覽器的標準快捷方式。
另外，我很驚訝start_url會被授權，這是網頁從瀏覽器到主螢幕的一個巨大變化。現在單頁面應用在iOS上新增到主頁面，為了使應用保持最新狀態使用推送方式，並不需要其他的奇怪方法就可以做到。然而，請注意，manifest中的URL將在對話方塊中可見。
另外，顯示模式的CSS媒體查詢和我們預期的實現方式相同。

獨立模式下的Scope和links

Manifest的作用域使得當你使用<a>標籤建立連結時會變得不一樣。當你點選連結時，它應該在PWA應用中開啟，還是去瀏覽器中開啟呢？
Android瀏覽器通常在PWA上下文的範圍內開啟url，或者在瀏覽器或自定義選項卡中開啟其他連結。如果你沒有特別指定web應用Manifest的作用範圍，安卓通常會把manifest的資料夾作為預設範圍，這也是通常能預想到的操作。
如果沒有特別指定，Safari不會定義一個預設的範圍，那麼然後你的PWA中的每個連結都將在你的應用程式的iOS視窗中開啟。問題在哪裡？它是iOS,它沒有返回按鈕也沒有返回操作，所以使用者也能就會被限制在你所連結的一個外部網站上而無法回到應用中。如果你指定了範圍，那麼每個應用效果都會和安卓上預期的一樣，範圍之外的連結將會在Safari中開啟，並帶有一個返回按鈕（狀態列中小的那個），能夠回到你的PWA應用中去。

每次在螢幕上出現時，iOS都會重新載入PWAs。

不幸的是，一個首屏上使用web應用的bug（一個特性？）仍然存在。每次你離開PWA時，你將會丟失所有的狀態，當使用者再次進入時，PWA應用將從頭開始載入。
對於效能、電池的使用以及使用者體驗，這種行為都是一個非常嚴重的問題。如果你訪問一個外部的站點，返回按鈕回到應用時總是從頭開始載入，這將花費很多時間，這並不是使用者所期望的（你可以使用本地儲存來改掉這個問題，但你知道的，這並不是一個好的方法）。
而且，這對於一個需要雙重驗證的應用來說是一個很大的問題，比如推特。如果你需要去另一個應用獲取驗證碼或者開啟一條訊息或者郵件，你將離開PWA應用。當你回來要貼上這些資訊時，你發現頁面不見了，你需要重新登入，然後發現驗證碼失效了。我在使用推特時就發生了這個問題！這就意味著iOS上的推特應用對我來說完全沒有用處。

缺少一些功能

不幸的是，並不支援Web應用程式輪播圖或Manifest 規範的事件,比如 appinstalled（譯者不知道這是什麼意思），所以你需要想別的方式來跟蹤它。
和預想的一樣，並不支援web訊息推送，即使是在今天，在死刑的邊緣上也有了推送通知。另外，也沒有後臺同步或者web共享API。從iOS的角度來看，這真是一個很令人羞恥的事情，畢竟使用原生的SocialKit框架應該很容易實現的。

互動問題以及bugs

正如我在上一篇文章中提到的，iOS有一些不同之處，比如:

在iOS中，你沒有一個物理或邏輯上的後退按鈕或手勢。你總是需要在UI介面上自己提供一個。這意味著您不能使用OAuth登入機制作為頂級文件（沒有辦法返回）。這裡有個例子，在推特的PWA應用中我點選了一個詞，然後我沒有辦法返回或者取消剛才的操作。甚至，如果我進入到郵箱中去，然後就無法再回到登入頁了。
在iOS上，你無法使用透明圖示，而且在安卓上，大多數PWA應用使用圓形圖示，在iOS上使用同樣的方案，透明部分的顏色就會變成黑色，這並不是一個好的選擇。
已經五年了，iOS中狀態列的bug仍然存在。如果你不特別宣告一些東西，使用者狀態列中就會沒有時鐘，沒有電池，沒有wifi圖示。現在的方法仍然是使用狀態列 meta標籤，現在再次接受白色，黑色和黑色半透明，以獲得全屏體驗（在iphone x上特別注意，你也許想要在CSS中使用心的notch-helpers）。因為一些未知的原因，黑色和黑色半透明現在被標記為棄用，並在未來被移除。我猜，manifest 上的主題顏色會被優先考慮，但為什麼會棄用黑色而不是白色呢?