當前位置:
首頁 > 最新 > 現在你可以在電腦Chrome上使用PWA啦!

現在你可以在電腦Chrome上使用PWA啦!

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

漸進增強式 Web 應用即將在 Win10 系統上線!

作為制定 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 之一:

在 Chrome 中使用 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」欄位的信息,該功能最初是為微軟的應用商店設計。

用戶可以決定如何打開應用程序!

如何在桌面系統上配置谷歌地圖用戶可以通過下面的網址訪問谷歌地圖 PWA,在桌面端或移動端都可以使用

https://maps.google.com/?force=pwa

但是,只有在移動端訪問時候才會安裝 Service Worker,但桌面用戶可以通過 Chrome 開發工具強制載入 Service Worker,在桌面端達到和移動端相同的使用體驗。

欺騙 PWA,讓它以為是在移動端運行。記住設置後需要重新載入以安裝 Service Worker.

PWA 的未來?

2018 年將會是 PWA 大爆發的一年,桌面支持也將迎來全新的改變。

PWA 的開發團隊甚至在蘋果設備上添加了 Service Workers 與 Web App Manifest 對 IOS 的支持,對於 Web 應用來說,一切都在發生著變化!

更新:分屏功能

前一段時間谷歌發布了 Chrome OS 關於 Android 應用的新聞,提到 Android 應用在 Chrome OS 上支持分屏操作。同樣,由於這一功能是為 Chrome 窗口所設計,所以分屏操作同樣適用於 PWA,就像下圖所示!

更新:Web 內容共享

多年以前,谷歌使用 navigator.share API 在 Android 系統上實現了 Web 共享。如果用戶在 about:flags 中啟用了實驗性的 Web 平台功能,那麼用戶甚至可以為已安裝的 PWA 添加 Web 共享目標,比如使用 Twitter Lite 進行共享。

Justin Willis 的新 Demo 允許用戶通過 Web 共享功能分享歌曲

目前這項功能已經開放使用,並已在 Linux 和 Chrome OS 上線。但是仍存在一個問題,在共享到 Twitter 時,共享窗口會在一個新的 Chrome 選項卡中打開,而不是在已安裝的 PWA 中打開,當然這個問題會慢慢修復。

在已安裝的 Twitter Lite 上添加 Web 共享對象支持後,歌曲就可以直接被分享到 Twitter 上。

這個功能可以完美的在 Android 上運行,並且共享窗口會在當前使用的 PWA 中打開。

Android:從一個 PWA(InstaMusic) 向另一個 PWA(Twitter Lite) 分享歌曲


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 前端之巔 的精彩文章:

2017年,Mozilla為Web做了哪些事情?

TAG:前端之巔 |