以下是一些注意事項:
- 與檔案互動的網頁應用程式現在可以在使用 File System Access API 時建議檔案名稱和目錄。
- 您可以讀取剪貼簿中的檔案。
- 如果您的網站有多個網域,且兩者共用相同的帳戶管理後端,您可以告訴 Chrome 這兩個網域相同,讓密碼管理員建議正確的憑證。
- 如要查看 I/O 大會的所有影片,請前往 Chrome Developers YouTube 頻道!
- 還有更多應用程式。
我是 Pete LePage,目前在工作和拍攝地點。接下來,我們要深入探索 Chrome 91 為開發人員提供的新功能!
File System Access API 的建議名稱
我今年最愛為 Fugu 專案提供的 API 之一,就是檔案系統存取 API。使用者授予權限後,應用程式就能與使用者本機裝置上的檔案互動,就像其他已安裝的應用程式一樣,可讓您建立更自然的使用者體驗。
從 Chrome 第 91 版開始,您現在可以建議檔案或目錄的互動位置和位置。方法是在 showSaveFilePicker
選項中傳遞 suggestedName
屬性。
const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});
預設 start 目錄也是如此。舉例來說,文字編輯器可能想要啟動「儲存檔案」或在 documents
資料夾中開啟檔案開啟對話方塊。圖片編輯器則可能想要從 pictures
資料夾開始。您可以傳遞 startIn
屬性來建議預設開始目錄。
const fileHandle = await self.showOpenFilePicker({
startIn: 'documents'
});
如需完整詳細資料,請參閱 Tom 的「檔案系統存取」文章。
讀取剪貼簿中的檔案
還有另一個很酷的新 API,可以用來與儲存在 Chrome 91 中的檔案互動。在電腦上,網頁應用程式現在可以讀取剪貼簿中的檔案。(自 2018 年起,Safari 已開放讀取剪貼簿的檔案)。
當然,剪貼簿不受限制地存取,因此您需要設定 paste
事件監聽器。接著,您可以透過事件處理常式存取剪貼簿中每個檔案的內容。
window.addEventListener('paste', onPaste);
async function onPaste(e) {
const file = e.clipboardData.files[0];
const contents = await file.text();
...
}
在關聯網站上共用憑證
如果您的網站擁有多個網域,並且共用相同的帳戶管理後端,您現在可以將網站互相建立關聯,讓使用者只需儲存一次憑證,再讓 Chrome 密碼管理工具建議這些網域到您的任何一個關聯網站。
如果您的網站是從不同的頂層網域 (例如 google.com
和 google.ca
) 提供,這是理想的做法。或是您有多個網域名稱
如要為網站建立關聯,您必須建立 assetlinks.json
檔案,定義網域之間的關係。在下方範例中,我告訴瀏覽器 .com
和 .co.uk
網域都相關,且可以共用憑證。
[{
"relation": ["delegate_permission/common.get_login_creds"],
"target": {
"namespace": "web",
"site": "https://www.example.com"
}
},
{
"relation": ["delegate_permission/common.get_login_creds"],
"target": {
"namespace": "web",
"site": "https://www.example.co.uk"
}
}]
然後,請在每個網域的 .well-known
資料夾中代管 assetlinks.json
檔案。
這項功能將在 Chrome 91 版中逐步推出,在第一天可能無法使用,詳情請參閱允許 Chrome 跨關聯網站共用登入憑證。
還有更多獎品等著您!
當然還有許多其他東西。
2021 年 I/O 大會影片都已上線,歡迎繼續觀賞!
網路傳輸 (先前稱為 Quic Transport) 經過多次變更,且正在啟動新的來源試用。
Web Assembly SIMD 已完成來源試用,並開放所有使用者使用。
經過重新整理的表單元素終於在 Android 推出,旨在改善使用者體驗。
此外,<link>
元素的 media
屬性會受 link rel="icon"
規範,也就是說,您可以根據媒體查詢定義不同的圖示。例如針對深色和淺色模式使用不同的圖示。
<link
rel="icon"
media="(prefers-color-scheme: dark)"
href="/icons/dark.png">
<link
rel="icon"
media="(prefers-color-scheme: light)"
href="/icons/light.png">
其他資訊
這僅涵蓋部分重點功能。如需瞭解 Chrome 91 版的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (91)
- Chrome 91 淘汰及移除
- 適用於 Chrome 91 的 ChromeStatus.com 更新
- Chrome 91 版 JavaScript 新功能
- Chromium 原始碼存放區變更清單
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道。每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,只要 Chrome 92 版推出,我就會在這裡為您提供 Chrome 的新功能!