本頁面由 Cloud Translation API 翻譯而成。

Chrome 76 版新功能

Pete LePage

Twitter GitHub Glitch Mastodon 首頁

在 Chrome 76 版中，我們現在支援下列項目：

prefers-color-scheme 媒體查詢，可在網站中使用深色模式。
網址列中的安裝按鈕可讓您更輕鬆地在電腦上安裝漸進式網頁應用程式。
防止在行動版漸進式網頁應用程式中顯示迷你資訊列。
WebAPK 更新頻率提高。
還有多項。

我是 Pete LePage，深入探索 Chrome 76 為開發人員提供的新功能！

PWA 網址列安裝按鈕

在 Chrome 76 版中，我們將新增安裝按鈕 (有時稱為網址列)，方便使用者在電腦上安裝漸進式網頁應用程式。

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

詳情請參閱電腦版漸進式網頁應用程式的地址列安裝。

進一步控管 PWA 迷你資訊列

當使用者首次造訪你的網站時，如果 Chrome 符合漸進式網頁應用程式的可安裝條件，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;
  }
}

小湯發表了一篇優質文章，嗨，暗度：我老朋友，瀏覽 web.dev」，內容涵蓋所有必要資訊，同時還提供了設計樣式表的實用訣竅，讓使用者能同時支援淺色和深色模式。

還有更多獎品等著您！

以上只是 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 比較簡單

使用 text()、arrayBuffer() 和 stream() 三種新方法，更輕鬆地讀取 Blob。這表示我們無須再在檔案閱讀器中建立包裝函式！

// 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 Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，當 Chrome 77 推出後，我會馬上通知您，也就是 Chrome 的新功能！