文件系統(tǒng)可穩(wěn)定使用

在之前，我們可以使用 <input type="file"> 元素去磁盤讀取文件，如果要保存更改，需要給<a>標(biāo)簽增加一個(gè)download屬性，它會(huì)打開文件選擇器，然后保存文件，但是我們沒有辦法寫回剛剛保存的那個(gè)文件，這個(gè)流程復(fù)雜又繁瑣。

現(xiàn)在，使用文件系統(tǒng)訪問 API，你可以調(diào)用 showOpenFilePicker()，會(huì)顯示一個(gè)文件選擇器，然后返回一個(gè)文件 picker，你可以用這個(gè) picker 讀取文件。 

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

如果要將文件保存到磁盤，你可以使用之前獲得的 picker ，也可以調(diào)用 showSaveFilePicker() 獲得一個(gè)新的 picker： 

async function saveFile(fileHandle) {  
  if (!fileHandle) {  
    fileHandle = await window.showSaveFilePicker();  
  }  
  const writable = await fileHandle.createWritable();  
  await writable.write(contents);  
  await writable.close();  
} 

寫入之前， Chrome 會(huì)檢查用戶是否已授予寫入權(quán)限，如果未授予寫入權(quán)限，則 Chrome 會(huì)首先提示用戶。

調(diào)用 showDirectoryPicker() 將打開一個(gè)目錄，你可以獲取文件列表或在該目錄中創(chuàng)建新文件。這非常適合諸如IDE或與大量文件交互的媒體播放器之類的東西。當(dāng)然，在你寫入內(nèi)容之前，用戶必須授予寫入權(quán)限。

試用：WebHID

人機(jī)接口設(shè)備（Human interface devices）通常被稱為 HID，它們從人那里獲取輸入或者向人提供輸出。

現(xiàn)在我們可以通過一些 JavaScript API 來訪問這些設(shè)備，借助 WebHID API 我們可以充分利用游戲手柄，包括所有按鈕，操縱桿，傳感器，觸發(fā)器，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);  
}); 

基于網(wǎng)絡(luò)的視頻聊天應(yīng)用，可以使用專用揚(yáng)聲器中的電話按鈕來開始或結(jié)束通話、靜音等。

當(dāng)然，像這樣強(qiáng)大的 API，只能在用戶允許的前提下使用。

試用：多屏放置 API

現(xiàn)在，我們可以用 window.screen() 來獲取一些屏幕的屬性： 

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

[[348086]]

但是如果你有多個(gè)顯示器怎么辦？抱歉，它只會(huì)告訴你當(dāng)前屏幕的屬性。

Multi-Screen Window Placement API 在 Chrome 86 版本開始試用，它可以枚舉所有當(dāng)前計(jì)算機(jī)連接的屏幕，并且支持在指定窗口放置屏幕。在使用之前，要向用戶申請權(quán)限。 

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

用戶授予權(quán)限后，調(diào)用 window.getScreens() 將返回一個(gè)使用 Screen 對象數(shù)組解析的 promise 。 

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