Chrome 79 版新功能

Pete LePage

Chrome 79 即將推出！

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

可遮蓋的圖示

如果您使用 Android O 以上版本，且已安裝漸進式網頁應用程式，那麼您可能會注意到圖示周圍有惱人的白色圓圈。

所幸，Chrome 79 現已支援已安裝的漸進式網頁應用程式可遮罩圖示。您必須設計出可放入安全區域的圖示，也就是直徑為畫布 80% 的圓形。

接著，您需要在網頁應用程式資訊清單中，為圖示新增 purpose 屬性，並將其值設為 maskable。


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

老虎 Oakes 在 CSS 秘訣中發布了相當精彩的貼文 - 《可遮蔽圖示：適用於 PWA 的 Android 自動調整圖示》和相關實用工具，測試功能可以測試圖示是否符合大小。

Web XR

您現在可以使用 WebXR Device API，為智慧型手機和頭戴式螢幕打造沉浸式體驗。

WebXR 可提供各種沉浸式體驗。從使用擴增實境技術，在購買前先查看新沙發在家中的樣貌，到虛擬實境遊戲和 360 度電影等，應用範圍廣泛。

如要開始使用這個新的 API，請參閱 Virtual Reality Comes to the Web。

新的來源試用

來源試用讓我們有機會驗證實驗功能和 API，並讓您針對其在更廣泛部署的可用性和成效方面提供意見回饋。

實驗功能通常只能在標記之後使用，但如果我們有提供某項功能的來源試用，您可以註冊該來源試用，對來源的所有使用者啟用這項功能。

選擇原點試用版後，您就能建立示範和原型，讓 Beta 版測試使用者在試用期間試用，不必在 Chrome 中切換任何特殊標記。

如要進一步瞭解來源試用功能，請參閱《網頁程式開發人員的來源試用指南》。您可以在 Chrome 原始碼測試頁面上查看有效原始碼測試清單，並註冊測試。

Wake Lock

我最討厭 Google 簡報的其中一個原因是，如果您讓簡報在單張投影片面上開啟太久，系統就會啟動螢幕保護程式。您必須先解鎖電腦，才能繼續操作。煩死了。

不過，透過新的 Wake Lock API，網頁可以要求鎖定，並防止螢幕變暗或啟動螢幕保護程式。這項功能非常適合用於投影片，但也適用於食譜網站等內容，因為你可能會想在操作時保持螢幕開啟。

如要要求喚醒鎖定，您必須呼叫 navigator.wakeLock.request()，並儲存其傳回的 WakeLockSentinel 物件。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

系統會維持鎖定狀態，直到使用者離開該頁面，或您對先前儲存的 WakeLockSentinel 物件呼叫 release 為止。

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

詳情請參閱 web.dev/wakelock。

rendersubtree 項屬性

有時候，您不會想要立即顯示一部分的 DOM，例如含有大量內容的捲動器，或分頁式 UI (隨時只能顯示部分內容)。

新的 rendersubtree 屬性會告知瀏覽器可以略過該子樹狀結構的算繪作業。這樣一來，瀏覽器就能花更多時間處理網頁的其餘部分，進而提升效能。

將 rendersubtree 設為 invisible 時，系統不會繪製或命中測試元素的內容，以利於算繪最佳化。

將 rendersubtree 變更為 activatable，藉由移除 invisible 屬性並轉譯內容，讓內容顯示出來。

2019 年 Chrome 開發人員高峰會

如果您錯過了 Chrome 開發人員高峰會，所有演講內容都會在我們的 YouTube 頻道上播放。

Jake 也發布了精彩的 Twitter 主題串，其中包含講座之間發生的所有有趣事，包括團隊最新成員 Surjiko。

延伸閱讀

這只涵蓋部分重點功能。請參閱下列連結，瞭解 Chrome 78 的其他變更。

訂閱

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

我是 Pete LePage，Chrome 80 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！