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"
  ]
  ...
}

Tiger Oakes 在 CSS 秘訣中發布了一篇很棒的文章 - Maskable Icons: Android Adaptive Icons for Your PWA，其中包含所有詳細資訊，並提供一項實用工具，可用於測試圖示，確保圖示適合使用。

Web XR

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

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

如要開始使用新的 API，請參閱「虛擬實境技術進駐網路」。

新的來源試用

透過 Origin 試用版，我們可以驗證實驗功能和 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 屬性並轉譯內容，讓內容顯示。

Chrome Dev Summit 2019

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

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

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下列連結，瞭解 Chrome 78 的其他變更。

訂閱

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

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