Chrome 79 現已推出!
- 在 Android 上安裝的漸進式網頁應用程式現在支援可遮蓋的圖示。
- 你現在可以使用 WebXR Device API 打造沉浸式體驗。
- Wake Lock API 可做為來源試用。
rendersubtree
屬性可做為來源試用。- Chrome DevSummit 的影片現已在線上。
- 還有許多其他功能
我是 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 開發人員工具的新功能 (79)
- Chrome 79 淘汰和移除
- ChromeStatus.com 為 Chrome 79 更新
- Chrome 79 版 JavaScript 新功能
- Chromium 來源存放區變更清單
訂閱
想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,當 Chrome 80 推出後,我會馬上通知您,也就是 Chrome 的新功能!