當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Chrome 76 新特性

發(fā)布時間：2023/12/14 编程问答 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 Chrome 76 新特性小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

禁止轉(zhuǎn)載本文同時發(fā)布于幕布平臺：mubu.com/doc/oBCH2vS…新特性一：網(wǎng)站為 PWA 應(yīng)用時，會在地址欄顯示安裝按鈕

在 PC 端的 Chrome 上，為了讓用戶可以更便捷地將 PWA 應(yīng)用添加到桌面，Chrome 76 會在地址欄添加一個安裝按鈕——只要你的網(wǎng)站滿足 PWA 可安裝性條件——以此提示用戶，當用戶點擊該按鈕時，效果等同于調(diào)用 beforeinstallprompt 事件對象上的 prompt() 方法——彈出安裝對話框，這樣就給用戶帶來了極大的便捷。
擴展閱讀
- PWA 應(yīng)用可安裝性條件
  developers.google.com/web/fundame…
- 詳解地址欄安裝 PWA
  developers.google.com/web/updates…

新特性二：可禁止默認的 PWA 應(yīng)用安裝 mini-infobar (迷你信息欄）

在移動端的 Chrome 中，如果你的網(wǎng)站滿足 PWA 可安裝性條件，那么當用戶首次訪問你的網(wǎng)站時，Chrome 就會向用戶展示一個小型的信息欄（以提示用戶將網(wǎng)站添加到手機桌面）。但有時候我們可能不希望它自動展示，或者希望展示的是自己定義的安裝提示。
- 小型信息欄（mini-infobar）示例
所以從 Chrome 76 開始，我們可以通過調(diào)用 beforeinstallprompt 事件對象上的 preventDefault() 方法來阻止這個小型信息欄的自動展示。
注意：在不采用默認的小型信息欄后，建議確保在界面上做相應(yīng)的自定義提示，以提示、暗示用戶你的 PWA 應(yīng)用是可以被安裝的。關(guān)于如何向用戶提示 PWA 可安裝的一些最佳實踐，可以查看 “Patterns for Promotiong PWA installation”這篇文章。
developers.google.com/web/fundame…
擴展閱讀
- PWA 應(yīng)用可安裝性條件
  developers.google.com/web/fundame…
- mini-infobar (迷你信息欄）
  developers.google.com/web/fundame…
  ?

新特性三：WebAPK 的更新更及時了

在安卓版的 Chrome 下，用戶選擇安裝一個 PWA 應(yīng)用時，Chrome 會自動安裝一個 WebAPK，然后 Chrome 會自動定期去檢查這個 PWA 應(yīng)用的 manifest 文件是否有更新——比如你可能更新了圖標、主題色，或者更改了應(yīng)用的名稱——以確定是否需要安裝新的 WebAPK 來同步更新。
- 編注：WebAPK 本質(zhì)上還是 Web 應(yīng)用，只是它和本地 APP 比較像——有圖標，和其他本地 APP 共存
在 Chrome 的這個版本之后，對 manifest 的檢查頻率會變得更高，不是之前的 3 天 1 次，而是改為 1 天 1 次了。
擴展閱讀
- WebAPK介紹（需越墻）
  developers.google.com/web/fundame…
- 更新頻率的詳細說明（需越墻）
  developers.google.com/web/updates…

新特性四：開始支持 prefers-color-scheme 媒體查詢項

許多操作系統(tǒng)都支持暗色模式（或者也叫暗色主題），如果我們想根據(jù)用戶的這項偏好來調(diào)整我們的界面外觀的話，就可以借助這個媒體查詢項來實現(xiàn)。
- web.dev 網(wǎng)站上有一篇關(guān)于這個媒體查詢項所有細節(jié)的文章，叫做“Hello darkness, my old friend”，文中還給出了如何同時支持亮色和暗色的 CSS 樣式架構(gòu)設(shè)計方面的建議，有興趣可以去了解下。

新特性五：開始支持 Promise.allSettled() 方法

我們都知道 Promise.all() 方法的含義，它指的是把傳入這個方法的所有 promise 當成一個整體的 promise，只有所有 promise 都處于 resolved 狀態(tài)了，這個整體的 promise 才會被 resolved，并開始執(zhí)行 then 回調(diào)；而只要其中一個 rejected 了，那么就不等剩下還沒執(zhí)行完成的 promise 了，直接把這個整體 promise 設(shè)置為 rejected 狀態(tài)，并立刻執(zhí)行后續(xù)的 catch 回調(diào)。Promise.allSettled() 與它只有一點不一樣，就是它會等到所有的 promise 都執(zhí)行完才設(shè)置狀態(tài)，不管有沒有哪個 promise 被 rejected 了。

新特性六：讀取 Blob 對象中的數(shù)據(jù)更加方便了

對 Blob 對象中存儲的內(nèi)容進行讀取，現(xiàn)在有三個新的方法可用：text()、arrayBuffer()、stream()，不再需要像以前一樣通過 FileReader 來讀取。下面這段代碼就是新舊方式的對比：

新特性七：異步剪貼板 API 開始支持圖片的復制/粘貼了

關(guān)聯(lián)文檔

擴展閱讀

其他說明

轉(zhuǎn)載于:https://juejin.im/post/5d503b6f6fb9a06ade1102a8

以上是生活随笔為你收集整理的Chrome 76 新特性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。