[[347695]]

近年來，由于網(wǎng)絡(luò)巨頭和移動開發(fā)人員的推動，漸進(jìn)式Web應(yīng)用已成為一種增長趨勢，因?yàn)樗鼈冊试S將類似原生的體驗(yàn)帶入任何平臺。

在最致力于這項(xiàng)新技術(shù)的公司中，有Microsoft，它通過PWABuilder[1]等項(xiàng)目幫助Web開發(fā)人員擁抱了這一新技術(shù)。隨著第一個基于Chromium的微軟Edge版本的推出，以及最近在Build 2020上的宣布，該公司通過引入令人興奮的新功能和API，旨在彌合原生應(yīng)用程序和Web應(yīng)用程序之間的差距。

那么，這些變化是什么，對你意味著什么?

PWA是Windows上的一等公民

第一組更改涉及從Microsoft Edge安裝的PWA與Windows交互的方式。

直到現(xiàn)在，從Edge安裝一個Web應(yīng)用意味著擁有一個令人難以置信的原生感覺的應(yīng)用程序，然而在某些情況下表現(xiàn)得很奇怪。

例如，它們在“設(shè)置”應(yīng)用程序或任務(wù)管理器中沒有顯示為單獨(dú)的應(yīng)用程序，從而使它們更難管理，特別是對于不太精通技術(shù)的用戶。Edge團(tuán)隊(duì)在Build 2020上進(jìn)行了虛擬演示，宣布在即將發(fā)布的瀏覽器版本中，PWA將被Windows視為其他任何應(yīng)用程序，所有這些將很快得到修復(fù)。

除此以外，安裝網(wǎng)絡(luò)應(yīng)用還能夠被設(shè)置為共享目標(biāo)(即它們將出現(xiàn)在Windows共享對話框的應(yīng)用列表中)，在操作系統(tǒng)啟動時請求啟動權(quán)限，并將某些文件類型、URL和協(xié)議設(shè)置為默認(rèn)。

新的API

除了旨在讓 PWA 感覺更原生的變化之外，Edge 團(tuán)隊(duì)還發(fā)布了一套新的 API，讓 Web 應(yīng)用的行為更像他們的原生應(yīng)用。

可自定義的標(biāo)題欄

從UI角度來看，PWA的最明顯的缺點(diǎn)之一是當(dāng)它們在桌面設(shè)備上運(yùn)行時無法自定義其標(biāo)題欄。

在即將推出的Edge版本中，新的API應(yīng)該可以解決這個問題，允許開發(fā)人員在標(biāo)題欄下擴(kuò)展HTML元素。

直到現(xiàn)在，PWA都不能像其原生版本一樣自由地自定義其標(biāo)題欄

這對于復(fù)雜的PWA特別有用，因?yàn)樗麄兛梢栽谟脩艚缑嬷蟹胖脴?biāo)簽和搜索欄，而不會浪費(fèi)寶貴的空間。

原生文件系統(tǒng)訪問

到目前為止，不允許網(wǎng)站將文件保存在用戶設(shè)備上的特定位置。這意味著在線照片編輯器需要用戶上傳他們想要編輯的照片，然后下載到他們的設(shè)備上，而原生的照片編輯器只會給出替換現(xiàn)有照片的選項(xiàng)。

從Edge 86開始(83版本是寫稿時最新的版本)，開發(fā)者將能夠替換用戶在會話中選擇的所有文件，從而使Web上的生產(chǎn)力應(yīng)用更加有用。

徽章

應(yīng)用圖標(biāo)徽章在各大操作系統(tǒng)上都有出現(xiàn)，現(xiàn)在是時候讓W(xué)eb成為它們的一部分了

我們已經(jīng)知道一個將徽章添加到應(yīng)用程序圖標(biāo)的API將出現(xiàn)在基于Chromium的瀏覽器中，但現(xiàn)在我們第一次看到了全貌：我們不僅能夠?qū)в袛?shù)字和圖標(biāo)的徽章添加到PWA中，我們還將獲得一個新的事件，用于在服務(wù)線程中更新徽章的內(nèi)容。我覺得這種事件的概念非常有趣，因?yàn)樗肓艘环N輕量級的替代品，用于推送通知的事件。

雖然看起來只是一個小小的UI調(diào)整，但我不會因?yàn)檫@只是一個小小的改變就不屑一顧，因?yàn)橛脩粞芯恳呀?jīng)多次證明，在應(yīng)用圖標(biāo)上添加徽章可以大幅提高用戶參與度。

通往Microsoft Store的簡便途徑

多虧了PWABuilder，它已經(jīng)可以以最小的努力將PWA發(fā)布到Microsoft Store。這種方法最相關(guān)的缺點(diǎn)是，打包后的Web應(yīng)用運(yùn)行在傳統(tǒng)的Edge引擎上，而不是Chromium上，因此無法利用一些新發(fā)布的API。

在Build 2020中，我們發(fā)現(xiàn)這一切都將在幾個月后發(fā)生變化，屆時PWABuilder將允許打包的Web應(yīng)用程序在Chromium上運(yùn)行。

結(jié)束

作為一名網(wǎng)絡(luò)開發(fā)者，我很高興看到微軟在漸進(jìn)式Web應(yīng)用上投入如此之大，因?yàn)槲艺J(rèn)為它們不僅是網(wǎng)絡(luò)體驗(yàn)的未來，也是移動應(yīng)用的未來，這樣的功能使它們成為原生語言和框架的更可行的替代品。

如果你和我一樣對這些改進(jìn)感到興奮，我建議你去看看作為Project Fugu的一部分正在開發(fā)的PWA的建議功能列表[2]，Project Fugu是谷歌、微軟和英特爾的跨公司努力，為我們帶來了許多前面提到的變化。

參考資料

[1] PWABuilder: https://www.pwabuilder.com/

[2] PWA的建議功能列表: https://bugs.chromium.org/p/chromium/issues/list?can=2&q=proj-fugu&sort=pri&colspec=ID+Pri+M+Stars+ReleaseBlock+Component+Status+Owner+Summary+OS+Modified&x=m&y=releaseblock&cells=ids

本文轉(zhuǎn)載自微信公眾號「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端全棧開發(fā)者公眾號。