Chrome 76 版新功能

Pete LePage

在 Chrome 76 中，我們新增了：

我是 Pete LePage，讓我們一起來看看 Chrome 76 版為開發人員帶來哪些新功能！

PWA Omnibox 安裝按鈕

在 Chrome 76 中，我們在網址列 (有時稱為萬用途方塊) 中加入安裝按鈕，讓使用者更輕鬆地在電腦上安裝漸進式網頁應用程式。

如果您的網站符合漸進式網頁應用程式安裝條件，Chrome 會在網址列中顯示安裝按鈕，讓使用者知道可以安裝您的 PWA。如果使用者按下安裝按鈕，系統會在 beforeinstallprompt 事件上呼叫 prompt()，這基本上與顯示安裝對話方塊相同，方便使用者安裝 PWA。

如需完整詳細資料，請參閱「在電腦上安裝漸進式網頁應用程式的網址列」。


進一步控管 PWA 迷你資訊列

AirHorner 的「新增至主畫面」迷你資訊列範例

在行動裝置上，如果網站符合漸進式網頁應用程式可安裝性標準，Chrome 會在使用者首次造訪網站時顯示迷你資訊列。您曾表示希望能避免迷你資訊列顯示，並提供自有的安裝促銷活動。

自 Chrome 76 版起，在 beforeinstallprompt 事件上呼叫 preventDefault() 會停止顯示迷你資訊列。

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

請務必更新使用者介面，讓使用者知道可安裝您的 PWA。請參閱「促進 PWA 安裝的模式」，瞭解我們建議的促進漸進式網頁應用程式安裝作業的最佳做法。

加快 WebAPK 更新速度

在 Android 上安裝漸進式網頁應用程式時，Chrome 會自動要求並安裝網頁 APK。安裝完成後，Chrome 會定期檢查網頁應用程式資訊清單是否已變更 (例如更新圖示、顏色或變更應用程式名稱)，確認是否需要使用新的 WebAPK。

從 Chrome 76 開始，Chrome 會更頻繁地檢查資訊清單，每天檢查一次，而非每三天檢查一次。如有任何主要屬性有所變更，Chrome 將要求並安裝新的 WebAPK，確保名稱、圖示和其他屬性均是最新狀態。

詳情請參閱「更頻繁更新 WebAPK」。

深色模式

許多作業系統現在都支援深色模式或深色主題。

prefers-color-scheme 媒體查詢可讓您調整網站的外觀和風格，以符合使用者偏好的模式。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom 在 web.dev 上有篇很棒的文章「Hello darkness, my old friend」，其中包含您需要瞭解的一切資訊，以及如何建構樣式表單以支援淺色和深色模式的訣竅。

還有更多獎品等著您！

當然，這只是 Chrome 76 中針對開發人員所做的部分變更，還有更多變更。

Promise.allSettled()

就我個人而言，我非常期待 Promise.allSettled()。這與 Promise.all() 類似，但會等到所有承諾都解決後才傳回。

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

讀取 Blob 更容易

Blob 可透過三種新方法 (text()、arrayBuffer() 和 stream()) 更輕鬆地讀取，這表示我們不再需要在檔案讀取器周圍建立包裝函式！

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

非同步剪貼簿 API 中的圖片支援

此外，我們也新增了圖片對非同步剪貼簿 API 的支援，讓您可以輕鬆以程式輔助方式複製及貼上圖片。

延伸閱讀

這篇文章只涵蓋部分重點，請參閱下方連結，瞭解 Chrome 76 的其他變更。

訂閱

如要隨時掌握最新影片，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，每當 Chrome 77 推出時，我就會立即 向大家說明 Chrome 的新功能！