PWA即將推向所有Chrome平臺

\

看新聞很累?看技術新聞更累?試試下載InfoQ手機客戶端,每天上下班路上聽新聞,有趣還有料!

\
\\

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

\\

a5a31bd5ed459efa8f2654e0d7f247b1.png

\\

漸進增強式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峰會上發表演講時他感到非常激動。

\\

8937da2ab276e23ea3020140f60b4535.png

\\

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:

\\

61e7a215675c8db254115c39b934bc2f.png

\\

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

\\

之后,就可以安裝PWA程序到你的桌面系統。
\這是Windows上的運行效果:

\\

81d0b029e21ea9c5f84ab963702b3672.png

\\

Windows上運行的Twitter Lite

\\

這是Linux上的運行效果:

\\

c52b15a021e6806b509fae012bcf52c2.png

\\

Ubuntu上運行的Pokedex

\\

Chrome OS上的PWA

\\

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

\\

窗口標題標題使用主題顏色,標題后面跟著是PWA的域名。

\\

215ba60dafcbfd773f9f10d6f69ab111.png

\\

tuner.ninja 和 app.starbucks.com

\\

e5dcec15f457c03820282f67449380f5.png

\\

使用了窗口化的PWA之后,Chrome OS看起來更像一個桌面系統了。

\\

應用程序也可以輕松地訪問Chrome并分享URL。對于每個應用,都會有一個叫做應用信息(App info)的特殊選項。

\\

da5998c948ff4bb07fca86580c5e868c.png

\\

應用信息允許用戶配置應用的打開方式,比如選擇在新的標簽頁打開或者另一個獨立的窗口打開。他包含關于Manifest Web App中的“description”字段的信息,該功能最初是為微軟的應用商店設計。

\\

f7e0fd69f7f01900c7909c0f9d671c21.png

\\

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

\\

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

\\

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

\\

408c751180aec58e4bb453866283a90e.png

\\

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

\\

PWA的未來?

\\

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

\\

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

\\

f6f3c77f79cc830eee931b35f9300255.png

\\

更新:分屏功能

\\

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

\\

a3e8c6e3ed0b5334b59f8e6289ba7c5b.png

\\

更新:Web內容共享

\\

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

\\

b9211a74686d76d978670d6ba6ecd598.png

\\

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

\\

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

\\

e4cd2209d6c3f527a205d1a8024af80c.png

\\

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

\\

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

\\

b33f805fc2fcfd1a34f6aeab724454a6.png

\\

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

\\

查看英文原文:Progressive Web Apps coming to all Chrome platforms

\\

感謝徐川對本文的審校。

\\

給InfoQ中文站投稿或者參與內容翻譯工作,請郵件至editors@cn.infoq.com。也歡迎大家通過新浪微博(@InfoQ,@丁曉昀),微信(微信號:InfoQChina)關注我們。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539304.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539304.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539304.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

c++代碼轉為go_Go語言學習筆記六--string編碼

分解探索string編碼轉為byte數組func main() {s : "Hi小智加油!"fmt.Println("len(s):",len(s)) //len(s): 15 為什么是15呢?for _, v : range []byte(s) {fmt.Printf("%X ",v) //%X 轉為16進制//48 69 E5 B0 8F E6 99 BA E5 8A A0 E6 B2 B9 21…

Linux機器件拷貝文件

常用命令有:sftp,scp sftp [rootzengmg develop_soft]# sftp 192.168.255.132Connecting to 192.168.255.132... The authenticity of host 192.168.255.132 (192.168.255.132) cant be established. RSA key fingerprint is bd:09:eb:22:2f:ed:95:57:ab…

steam游戲時長計算機,我加入steam五年了,盤點下我買過的22款正版單機游戲

我加入steam五年了,盤點下我買過的22款正版單機游戲2020-02-17 10:50:07104點贊72收藏37評論大家好吖,在2015年的時候朋友就推薦了我入坑steam,不過那個時候更多的知道這是個dota啟動器,慢慢的steam也越來越出名啦,中國…

AdPlayBanner:功能豐富、一鍵式使用的圖片輪播插件

概述 AdPlayBanner:功能豐富、一鍵式使用的圖片輪播插件詳細 代碼下載:http://www.demodashi.com/demo/11312.html AdPlayBanner是一個Android平臺基于ViewPager實現的輪播圖插件,主要用以自動或者手動地播放輪播圖,提供了Fresco、…

pycharm運行模型時怎么設置權重?_使用AMP和Tensor Cores得到更快速,更節省內存的PyTorch模型...

點擊上方“AI派”,關注公眾號,選擇加“星標“或“置頂”導讀只需要添加幾行代碼,就可以得到更快速,更省顯存的PyTorch模型。你知道嗎,在1986年Geoffrey Hinton就在Nature論文中給出了反向傳播算法?此外&…

引入靜態變量_Common Lisp變量的一些事情

Lisp-1 vs Lisp-2[1]Scheme的求值模型非常簡單:只是用一個名字空間,所有表達式中相應位置的值應該是明確的。Common Lisp和Scheme最大的不同是,函數名字空間和數據的名字空間是分離的。操作函數名字空間的語句包括,defun&#xff…

JobTracker和TaskTracker

轉載:http://blog.csdn.net/keda8997110/article/details/8348705 ----------------------------------------------------------------------------------------- JobTracker和TaskTracker JobTracker 對應于 NameNode TaskTracker 對應于 DataNode DataNode 和Na…

c理c利用計算機怎么彈,通過匯編一個簡單的C程序,分析匯編代碼理解計算機是如何工作的...

通過匯編一個簡單的C程序,分析匯編代碼理解計算機是如何工作的計算機的工作方式:現代計算機的基本體系結構都是采用馮諾依曼結構,馮諾依曼的設計思想最重要之處是"存儲程序"的這個概念。計算機的工作過程,就是執行程序的…

Linux安裝MySQL的兩種方法

原文鏈接:http://blog.csdn.net/superchanon/article/details/8546254 --------------------------------------------------------------------------------------- 1. 運行平臺:CentOS 6.3 x86_64,基本等同于RHEL 6.3 2. 安裝…

jenkins 手動執行_想知道如何用Jenkins自動執行Python腳本輸出測試報告?

前言在用python做自動化測試時,我們寫好代碼,然后需要執行才能得到測試報告,這時我們可以通過 Jenkins 來進一步完成自動化工作。借助Jenkins,我們可以結合 Git/SVN 自動拉取代碼,可以設置定時構建,接著就可…

VR 影院,約嗎?

世界第一家 VR 影院已經開張,朋友,去不? 世界第一家 VR 影院正式開張 (無大屏的 VR 電影院) 在被稱為 VR 元年的 2016 年,越來越多的人加入了這個新興的領域,各種傳統應用也在被 VR 包裝之后以…

redis cluster 分布式鎖_關于分布式鎖原理的一些學習與思考redis分布式鎖,zookeeper分布式鎖...

首先分布式鎖和我們平常講到的鎖原理基本一樣,目的就是確保,在多個線程并發時,只有一個線程在同一刻操作這個業務或者說方法、變量。在一個進程中,也就是一個jvm 或者說應用中,我們很容易去處理控制,在jdk …

會計行業被計算機取代馬云,會計人:為什么我神煩“人工智能取代說”?

原標題:會計人:為什么我神煩“人工智能取代說”?原創來源:學會計有方法從財會機器人誕生到馬云的無人商店,全行業掀起了一股“人工智能取代說”的熱潮。有些財會朋友在一輪又一輪的信息轟炸下,倍感壓力&…

mysql5.6允許遠程服務器訪問數據庫

創建一個mysql用戶,并設置可以遠程訪問 grant usage on *.* to fredlocalhost identified by fred;//創建用戶fred密碼ferdselect host,user,password from mysql.user where userfred;//查看記錄 grant all privileges on *.* to fred%identified by fred;//設置可以遠程訪問…

sp烘焙流程_小手雷-PBR材質流程(一)——(基本材質)

小手雷-PBR材質流程(一)Substance Painter生存手冊經過了12個章節的講解后,已經完結了(。・ω・。)相信大家經過了生存手冊這一基礎教程過后,對Substance Painter這款軟件已經有了比較堅實的基礎了,…

MyBatis-進階2

typeHandler typeHandler有什么用? 你可以重寫類型處理器或創建你自己的類型處理器來處理不支持的或非標準的類型。 具體做法為:實現 org.apache.ibatis.type.TypeHandler 接口, 或繼承一個很便利的類 org.apache.ibatis.type.BaseTypeHandle…

python中 r是什么意思_python中rb含義理解

Python文件讀寫的幾種模式: r,rb,w,wb 那么在讀寫文件時,有無b標識的的主要區別在哪里呢? 文件使用方式標識 r:默認值,表示從文件讀取數據 w:表示要向文件寫入數據,并截斷以前的內容 a:表示要向文件寫入數據&#xff0…

哈佛大學計算機生物科學,生命科學專業

【出國留學網】昨日,泰晤士報公布了最新版2018年世界大學生命科學排名,哈佛大學位列第一。本文是關于世界各國大學在本次生命科學排名中的具體表現,供你選校參考。The 2018 Times Higher Education World University Rankings’ table for li…

怎樣呵護友誼_呵護真正的友情,助力漫長的人生

友情,即友誼,是指朋友和朋友之間的感情。它是一種很美妙的東西,可以讓你在失落的時候變得高興起來,可以讓你走出苦海,去迎接新的人生。它就像一種你無法說出又可以感到快樂無比的東西。只有擁有真正朋友的人&#xff0…

【Day41】Python之路——AJAX

什么是AJAX AJAX Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。 優點: 不重新加載整個頁面的情況下,可以與服務器交換數據并更新部分網頁內容 不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行 同源…