PWA即將推向所有Chrome平臺

Web開發者發表於2018-03-07

大多數人應該都聽說了微軟已經著手在Windows商店中增加PWA，這是一個重磅訊息！

漸進增強式Web應用即將在Win10系統上線，我們已經準備好了！圖片來源：ashleymcnamara

作為制定Web App Manifest規則的聯合編輯，Kenneth一直參與到相關規則的制定中。實際上，微軟是最早關注Web App Manifest的公司之一，最開始使用他們的Manifold工具，然後轉為使用http://PWAbuilder.com。自從首個ManifoldJS釋出之後，Marcos Caceres和Kenneth進行了聯絡，並結識了Jeff Burtoft。這一系列的事件推動了谷歌在該方面與微軟的合作，最終改進了Manifest，以便它在Windows商店和桌面應用上取得更好表現。

幾年前，谷歌在Chrome OS中新增了一些“add to shelf”的支援，這是一次實驗性的改進，存在很多不完善的地方。但是在很長一段時間裡都能正常使用。因此Kenneth提到，當2017年Owen Campbell-Moore在舊金山的chrome Dev峰會上發表演講時他感到非常激動。

Owen還提到谷歌將擴充套件PWA的使用範圍，將PWA最終推廣到其所有平臺的桌面系統。更加重要的是，他們不僅新增了桌面支援，還開放了其API。如今，許多團隊(比如Slack和VSCode)都使用了類似的方法，利用Electron將他們的Web應用封裝到一個原生容器中，然後開放原生API。

這種方法存在一個弊端，由於瀏覽器中存在很多公開的安全漏洞，使用者的安全問題會面臨威脅。雖然大多數漏洞會被瀏覽器供應商及時解決，但是使用Electron封裝的版本通常更新較慢。這就會導致使用者需要承受更多的風險。而桌面PWA支援則可以解決這個問題，前提是開發人員可以訪問他們需要修改部分的API。

Owen Campbell-Moore在Twitter中提到，Contacts API是谷歌最早開發的API之一：https://mobile.twitter.com/owencm/status/964280373697040384。

如何使用PWA？

在最近版本的Chrome瀏覽器(比如Canary)中，開啟“about:flags”頁面然後搜尋“progressive”，將選項#desktop-pwas的屬性改為Enable:

在about:flags或chrome://flags頁面，你可以使用一些實驗性的功能

之後，就可以安裝PWA程式到你的桌面系統。
這是Windows上的執行效果：

Windows上執行的Twitter Lite

這是Linux上的執行效果：

Ubuntu上執行的Pokedex

Chrome OS上的PWA

在Chrome OS上的PWA除了有上述優點之外，還有就是它看起來真的很酷！

視窗標題標題使用主題顏色，標題後面跟著是PWA的域名。

tuner.ninja 和 app.starbucks.com

使用了視窗化的PWA之後，Chrome OS看起來更像一個桌面系統了。

應用程式也可以輕鬆地訪問Chrome並分享URL。對於每個應用，都會有一個叫做應用資訊(App info)的特殊選項。

應用資訊允許使用者配置應用的開啟方式，比如選擇在新的標籤頁開啟或者另一個獨立的視窗開啟。他包含關於Manifest Web App中的“description”欄位的資訊，該功能最初是為微軟的應用商店設計。

使用者可以決定如何開啟應用程式！

如何在桌面系統上配置谷歌地圖

使用者可以通過網站https://maps.google.com/?force=pwa訪問谷歌地圖PWA，在桌面端或移動端都可以使用。但是，只有在移動端訪問時候才會安裝Service Worker，但桌面使用者可以通過Chrome開發工具強制載入Service Worker，在桌面端達到和移動端相同的使用體驗。