Chrome 86 新功能解讀
文件系統(tǒng)可穩(wěn)定使用
在之前，我們可以使用 元素去磁盤讀取文件，如果要保存更改，需要給標(biāo)簽增加一個download屬性，它會打開文件選擇器，然后保存文件，但是我們沒有辦法寫回剛剛保存的那個文件，這個流程復(fù)雜又繁瑣。
現(xiàn)在，使用文件系統(tǒng)訪問 API，你可以調(diào)用 showOpenFilePicker()，會顯示一個文件選擇器，然后返回一個文件 picker，你可以用這個 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() 獲得一個新的 picker：
async?function?saveFile(fileHandle)?{
??if?(!fileHandle)?{
????fileHandle?=?await?window.showSaveFilePicker();
??}
??const?writable?=?await?fileHandle.createWritable();
??await?writable.write(contents);
??await?writable.close();
}
寫入之前， Chrome 會檢查用戶是否已授予寫入權(quán)限，如果未授予寫入權(quán)限，則 Chrome 會首先提示用戶。
調(diào)用 showDirectoryPicker() 將打開一個目錄，你可以獲取文件列表或在該目錄中創(chuàng)建新文件。這非常適合諸如IDE或與大量文件交互的媒體播放器之類的東西。當(dāng)然，在你寫入內(nèi)容之前，用戶必須授予寫入權(quán)限。
試用：WebHID
人機接口設(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)用，可以使用專用揚聲器中的電話按鈕來開始或結(jié)束通話、靜音等。
當(dā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
//?}
但是如果你有多個顯示器怎么辦？抱歉，它只會告訴你當(dāng)前屏幕的屬性。
Multi-Screen Window Placement API 在 Chrome 86 版本開始試用，它可以枚舉所有當(dāng)前計算機連接的屏幕，并且支持在指定窗口放置屏幕。在使用之前，要向用戶申請權(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() 將返回一個使用 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,?...},
//?]
了解更多：https://www.youtube.com/watch?v=GNuG-5m4Ud0&feature=emb_logo
推薦閱讀