Chrome 84 現正推出穩定版。
以下是一些注意事項:
- 使用者可以透過應用程式圖示捷徑,在應用程式中啟動常見工作。
- Web Animation API 新增了更多先前不支援的功能。
- Wake Lock 可阻止螢幕變暗或鎖定。
- Content Indexing API 可協助顯示可離線使用的內容。
- 有新的閒置偵測和 Web Assembly SIMD 來源試用。
- 相同網站 Cookie 政策異動將陸續生效。
- 享有更多實用功能。
我是 Pete LePage,它在家工作與射擊。現在我們來深入探索 Chrome 84 開發人員推出的新功能!
應用程式圖示捷徑
應用程式圖示捷徑可讓使用者輕鬆在應用程式中快速啟動常見工作,例如撰寫新的 Tweet、傳送訊息,或查看通知。Chrome for Android 支援這些樣式。
長按 Android 上的應用程式圖示即可叫用這些捷徑。新增 PWA 的捷徑相當簡單,在網頁應用程式資訊清單中建立新的 shortcuts
屬性、說明捷徑,以及新增圖示。
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
},
]
如需完整的詳細資訊,請參閱「使用應用程式捷徑快速完成工作」一文。
網頁動畫 API
Chrome 第 84 版在 Web Animation API 中新增了多種先前不支援的功能。
animation.ready
和animation.finished
已合法化。- 瀏覽器現在可以清除並移除舊的動畫,節省記憶體並提升效能。
- 此外,您現在可以使用複合模式與
add
和accumulate
選項結合動畫。
我無法單純完成所有改善項目,或是在這裡提供優質範例,詳情請參閱 Chromium 84 中的 Web Animation API 改善項目。
Content Indexing API
即使沒有網路連線也能觀看您的內容。但使用者並不知道?這個 SDK 真的可以發布嗎?發現發現問題!
Content Indexing API 是剛結束的初始試用版本,您可以為可離線使用的內容新增網址和中繼資料,然後使用該中繼資料向使用者顯示內容,藉此提高曝光度。
如要將內容新增至索引,請在 Service Worker 註冊作業中呼叫 index.add()
,並提供內容所需的中繼資料。
const registration = await navigator.serviceWorker.ready;
await registration.index.add({
id: 'article-123',
url: '/articles/123',
launchUrl: '/articles/123',
title: 'Article title',
description: 'Amazing article about things!',
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
});
想要查看索引中現有的內容嗎?呼叫服務工作站註冊中的 index.getAll()
。
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
詳情請參閱使用 Content Indexing API 為可離線的網頁建立索引一文。
Wake Lock API
我喜歡烹飪,但我覺得自己在參考食譜後 就會覺得螢幕保護程式太了不起透過 Wake Lock API (同樣在 Chrome 84 版中升級),網站可以要求 Wake Lock,防止螢幕變暗及鎖定。
事實上,Betty Crocker 網站已在使用這項工具,並於 web.dev 發布個案研究,顯示購買意願指標增幅達 300%。
如要取得 Wake Lock,請呼叫 navigator.wakeLock.request()
,會傳回一個用來「釋放」Wake Lock 的 WakeLockSentinel
物件。
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
當然,這還只是一些例子,因此請參閱「使用 Screen Wake Lock API 保持清醒」一文,但至少我的螢幕不會被灌水!
來源試用
我想說明兩項新的來源試用,如果您不熟悉來源試用,請參閱「開始使用 Chrome 的來源試用」。
閒置偵測
使用者處於閒置狀態時,Idle Detection API 會通知您,表示使用者可能離開電腦。這在即時通訊應用程式或社群網站等方面非常實用,可讓使用者知道聯絡人是否有空。
// Create the idle detector
const idleDetector = new IdleDetector();
// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
const uState = idleDetector.userState;
const sState = idleDetector.screenState;
console.log(`Idle change: ${uState}, ${sState}.`);
});
// Start the idle detector.
await idleDetector.start({
threshold: 60000,
signal,
});
如要進一步瞭解這個 API,以及如何立即開始試用 API,請參閱「使用 Idle Detection API 偵測閒置使用者」。
網路組裝 SIMD
Web Assembly SIMD 則會啟動來源試用。並導入可對應至硬體中常見 SIMD 指示的作業。SIMD 作業可用來提升效能,特別是在多媒體應用程式中。
如要進一步瞭解 WebAssembly SIMD,請參閱「採用 WebAssembly SIMD 的快速平行應用程式」。
其他更新
雖然 Chrome 84 版很龐大,但還有一些重要更新需要說明。
- 我們將恢復逐步推出 SameSite Cookie 異動。
- 針對有濫用權限要求或誤導型通知的網站,系統會自動在優先通知 UI 中註冊網站。
- 我們推出了新的 QuicTransport 來源試用,
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 84 版的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (84)
- 將 Chrome 第 84 版淘汰或移除
- 適用於 Chrome 84 的 ChromeStatus.com 更新
- Chrome 84 版 JavaScript 新功能
- Chromium 原始碼存放區變更清單
訂閱
如要隨時掌握 YouTube 影片的最新消息,然後訂閱我們的 Chrome Developers YouTube 頻道,每當推出新影片時,您都會收到電子郵件通知。
我是 Pete LePage,我還需要修剪頭髮。不過,在 Chrome 第 85 版推出後,我很樂意立即向您說明:Chrome 的新功能!