Chrome 91 版的新功能

Pete LePage

以下是一些注意事項：

我是 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 Developers YouTube 頻道。每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，只要 Chrome 92 版推出，我就會在這裡為您提供 Chrome 的新功能！