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

寫在前面

• 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 上的主題顏色會被優先考慮，但爲何會棄用黑色而不是白色呢?

  

  

咱們仍然有時間去改變

讓然還有時間讓蘋果去作一些改變來使咱們的生活更美好。同時，咱們也有時間去檢查完善咱們的PWA應用，好比：

• 你的圖標：添加iOS的大小和不透明度。
• 在有<a>連接的交互界面上加一個返回按鈕
• web應用中做用範圍的使用
• 若是你要求用戶從你的應用程序中跳出來，而且由於從新加載而回來，該怎麼辦?
• 如何推進app的安裝(iOS更新提示)
• 你如何追蹤PWA的安裝?

你還發現別的了嗎？請記住在Twitter上關注我，由於我將常常更新信息，並在將來測試新版本。