Chrome 86 版的新功能

Pete LePage

Chrome 86 現已開始推出穩定版。

以下是一些注意事項：

我是 Pete LePage，在家工作和拍攝影片吧！接下來我們將一探 Chrome 86 為開發人員提供的新功能！

檔案系統存取權

您現在可以使用 <input type="file"> 元素從磁碟讀取檔案。如要儲存變更，請將 download 新增至錨點標記，系統就會顯示檔案挑選器，然後儲存檔案。您無法寫入同一個已開啟的檔案。這項工作流程很麻煩。

您可以使用 File System Access API (原為 Native File System API)，這個 API 已完成原始測試，現在已推出穩定版，您可以呼叫 showOpenFilePicker()，這個 API 會顯示檔案挑選器，然後傳回檔案句柄，讓您用來讀取檔案。

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

如要將檔案儲存至磁碟，您可以使用先前取得的檔案句柄，或是呼叫 showSaveFilePicker() 來取得新的檔案句柄。

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
權限提示螢幕截圖
向使用者提示要求寫入檔案的權限。

在寫入前，Chrome 會檢查使用者是否已授予寫入權限，如果尚未授予寫入權限，Chrome 會先提示使用者。

呼叫 showDirectoryPicker() 會開啟目錄，讓您取得檔案清單或在該目錄中建立新檔案。適用於 IDE 或與大量檔案互動的媒體播放器等。當然，在您輸入任何內容之前，使用者必須授予寫入權限。

API 還有許多其他功能，請參閱 web.dev 上的「File System Access」文章。

來源試用：WebHID

遊戲控制器
遊戲控制器。

人機介面裝置 (通常稱為 HID) 會接收人類的輸入內容，或提供輸出內容給人類。人機介面裝置的長尾效應，是指系統裝置驅動程式無法存取的裝置過新、過舊或過於罕見。

WebHID API 現已推出原始試用版，可在 JavaScript 中存取這些裝置，解決上述問題。有了 WebHID，網頁遊戲就能充分運用遊戲搖桿，包括所有按鈕、搖桿、感應器、觸發條件、LED 燈和滾筒式組合等等。

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

網頁式視訊通訊應用程式可以使用特定揚聲器上的電話按鈕、發起或結束通話、將音訊設為靜音，以及執行其他操作。

HID 裝置挑選器
HID 裝置挑選器。

當然，這類功能強大的 API 只能在使用者明確選擇允許的情況下，與裝置互動。

如需更多詳細資訊、範例、如何開始使用，以及有趣的示範內容，請參閱「連線至不常見的 HID 裝置」一文。


來源試用：Multi-Screen Window Placement API

您現在可以呼叫 window.screen()，取得瀏覽器視窗所在螢幕的屬性。但如果您使用多螢幕設定，很抱歉，瀏覽器只會告訴你目前顯示的畫面。

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

多螢幕 Window Placement API 會在 Chrome 86 中啟動來源測試，讓您能夠列舉與電腦連線的螢幕，並在特定螢幕上放置視窗。對於簡報應用程式、金融服務應用程式等應用程式而言，能夠在特定螢幕上放置視窗至關重要。

您必須先要求權限，才能使用 API。如不同意，則瀏覽器會在您首次嘗試使用時提示使用者。

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

使用者授予權限後，呼叫 window.getScreens() 會傳回承諾，並以 Screen 物件的陣列解析。

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

之後，我可以在呼叫 requestFullScreen() 或放置新視窗時使用該資訊。Tom 在 web.dev 的「使用多螢幕 Window Placement API 管理多個顯示裝置」一文中提供所有詳細資訊。

其他

新的 CSS 選取器「:focus-visible」可讓您在瀏覽器決定是否要顯示預設焦點指標時，選擇採用瀏覽器採用的相同經驗法則。

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

您可以使用 CSS ::marker 虛擬元素自訂清單的顏色、大小，或項目符號類型。

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

現場也會舉辦 Chrome 開發人員高峰會，敬請持續關注我們的 YouTube 頻道，掌握更多資訊！

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 86 的其他變更。

訂閱

如要隨時掌握最新影片，請訂閱我們的 Chrome 開發人員 YouTube 頻道，這樣一來，每當我們發布新影片，你就會收到電子郵件通知，或是將我們的RSS 動態消息新增至動態消息閱讀器。

我是 Pete LePage，Chrome 87 一推出，我就會在這裡告訴你 Chrome 的新功能！