Chrome 79 版新功能

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 測試」的優質文章 -「可遮蓋圖示:PWA 的 Android 自動調整圖示」,其中包含所有詳細資訊,還有一項實用工具可用來測試圖示,以便將圖示調整成合適的大小。

網路 XR

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

WebXR 能打造各種沉浸式體驗。例如使用擴增實境功能,在購買沙發前瞭解家中的樣貌、虛擬實境遊戲和 360 度電影等。

如要開始使用這個新版 API,請參閱「虛擬實境到網路」。

新來源試用

來源試用讓我們有機會驗證實驗功能和 API,讓您針對這些功能和 API 的可用性和成效,提供意見回饋。

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

選擇加入來源試用後,即可建構 Beta 測試使用者在試用期間可試用的示範和原型,無須要求翻閱 Chrome 中的任何特殊標記。

如要進一步瞭解來源試用,請參閱網頁程式開發人員適用的來源試用指南。您可以查看進行中的來源試用清單,並在 Chrome 來源試用頁面中註冊。

Wake Lock

Google 簡報最重大的其中一個就是如果 如果單張投影片上保持開啟的脖子,螢幕保護程式就會進入畫面您必須先解鎖電腦才能繼續操作。唉唷。

但是,使用新的 Wake Lock API,網頁可以要求鎖定,避免螢幕變暗或螢幕保護程式突然進入。這很適合簡報使用,但對於某些您可能想要保持顯示資訊的食譜網站,也很有幫助。

如要要求 Wake Lock,您需要呼叫 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 Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。

我是 Pete LePage,當 Chrome 80 推出後,我會馬上通知您,也就是 Chrome 的新功能!