Chrome 76 新特性

• 文檔說明
  • 做者：西樓聽雨
  • 禁止轉載
  • 本文同時發佈於幕布平臺：mubu.com/doc/oBCH2vS…
• 新特性一：網站爲 PWA 應用時，會在地址欄顯示安裝按鈕
  • 在 PC 端的 Chrome 上，爲了讓用戶能夠更便捷地將 PWA 應用添加到桌面，Chrome 76 會在地址欄添加一個安裝按鈕——只要你的網站知足 PWA 可安裝性條件——以此提示用戶，當用戶點擊該按鈕時，效果等同於調用 beforeinstallprompt 事件對象上的 prompt() 方法——彈出安裝對話框，這樣就給用戶帶來了極大的便捷。
    
  • 擴展閱讀
    • PWA 應用可安裝性條件
      developers.google.com/web/fundame…
    • 詳解地址欄安裝 PWA
      developers.google.com/web/updates…
• 新特性二：可禁止默認的 PWA 應用安裝 mini-infobar (迷你信息欄）
  • 在移動端的 Chrome 中，若是你的網站知足 PWA 可安裝性條件，那麼當用戶首次訪問你的網站時，Chrome 就會向用戶展現一個小型的信息欄（以提示用戶將網站添加到手機桌面）。但有時候咱們可能不但願它自動展現，或者但願展現的是本身定義的安裝提示。
    • 小型信息欄（mini-infobar）示例
      
  • 因此從 Chrome 76 開始，咱們能夠經過調用 beforeinstallprompt 事件對象上的 preventDefault() 方法來阻止這個小型信息欄的自動展現。
    
  • 注意：在不採用默認的小型信息欄後，建議確保在界面上作相應的自定義提示，以提示、暗示用戶你的 PWA 應用是能夠被安裝的。關於如何向用戶提示 PWA 可安裝的一些最佳實踐，能夠查看 「Patterns for Promotiong PWA installation」這篇文章。
    developers.google.com/web/fundame…
  • 擴展閱讀
    • PWA 應用可安裝性條件
      developers.google.com/web/fundame…
    • mini-infobar (迷你信息欄）
      developers.google.com/web/fundame…
      ​
• 新特性三：WebAPK 的更新更及時了
  • 在安卓版的 Chrome 下，用戶選擇安裝一個 PWA 應用時，Chrome 會自動安裝一個 WebAPK，而後 Chrome 會自動按期去檢查這個 PWA 應用的 manifest 文件是否有更新——好比你可能更新了圖標、主題色，或者更改了應用的名稱——以肯定是否須要安裝新的 WebAPK 來同步更新。
    • 編注：WebAPK 本質上仍是 Web 應用，只是它和本地 APP 比較像——有圖標，和其餘本地 APP 共存
  • 在 Chrome 的這個版本以後，對 manifest 的檢查頻率會變得更高，不是以前的 3 天 1 次，而是改成 1 天 1 次了。
  • 擴展閱讀
    • WebAPK介紹（需越牆）
      developers.google.com/web/fundame…
    • 更新頻率的詳細說明（需越牆）
      developers.google.com/web/updates…
• 新特性四：開始支持 prefers-color-scheme 媒體查詢項
  • 許多操做系統都支持暗色模式（或者也叫暗色主題），若是咱們想根據用戶的這項偏好來調整咱們的界面外觀的話，就能夠藉助這個媒體查詢項來實現。
    
    • web.dev 網站上有一篇關於這個媒體查詢項全部細節的文章，叫作「Hello darkness, my old friend」，文中還給出瞭如何同時支持亮色和暗色的 CSS 樣式架構設計方面的建議，有興趣能夠去了解下。
• 新特性五：開始支持 Promise.allSettled() 方法
  • 咱們都知道 Promise.all() 方法的含義，它指的是把傳入這個方法的全部 promise 當成一個總體的 promise，只有全部 promise 都處於 resolved 狀態了，這個總體的 promise 纔會被 resolved，並開始執行 then 回調；而只要其中一個 rejected 了，那麼就不等剩下還沒執行完成的 promise 了，直接把這個總體 promise 設置爲 rejected 狀態，並馬上執行後續的 catch 回調。Promise.allSettled() 與它只有一點不同，就是它會等到全部的 promise 都執行完才設置狀態，無論有沒有哪一個 promise 被 rejected 了。
    
• 新特性六：讀取 Blob 對象中的數據更加方便了
  • 對 Blob 對象中存儲的內容進行讀取，如今有三個新的方法可用：text()、arrayBuffer()、stream()，再也不須要像之前同樣經過 FileReader 來讀取。下面這段代碼就是新舊方式的對比：
    
• 新特性七：異步剪貼板 API 開始支持圖片的複製/粘貼了
  • 關於這個特性的詳細介紹，請查看：developers.google.com/web/updates…（需越牆）
• 關聯文檔
  • Chrome 76 開發者工具新特性
    mubu.com/doc/9bPKhv7…
  • Chrome 75 新特性
    mubu.com/doc/mz-ZAFi…
  • Chrome 更新日誌目錄
    mubu.com/doc/AObcWUR…
• 擴展閱讀
  • What's new in JavaScript in Chrome 76 （Chrome 76 中的 JS 新特性）
    v8.dev/blog/v8-rel…
• 其餘說明
  • 做者：洛水驚鴻
    我就是21世紀最偉大的發明​​
  • 打賞：你的一枚硬幣，培養的卻多是下一代比爾·蓋茨
    
  • 聯繫 & 交流 & 聘用