首先問大家一個問題，現(xiàn)在有一項業(yè)務(wù)需求，這個需求使用客戶端應(yīng)用實現(xiàn)還是網(wǎng)頁來實現(xiàn)你會考慮哪些因素呢？

曾幾何時，想到網(wǎng)頁可能我們第一時間想到的就是一些靜態(tài)頁面，但是經(jīng)過數(shù)十年的蓬勃發(fā)展，網(wǎng)頁開始承接越來越復(fù)雜的需求，包括復(fù)雜的管理系統(tǒng)、網(wǎng)絡(luò)直播、云游戲等能力。

但或許你仍然會認(rèn)為相比可以和系統(tǒng)底層直接交互的原生客戶端應(yīng)用還是太弱了，我們可能會因為瀏覽器“缺失” 了某一項能力而被迫選擇開發(fā)一個客戶端應(yīng)用。

?為此 Google 啟動了一個名為 Fugu 的項目，它的目標(biāo)就是讓開發(fā)者能夠在 Web 生態(tài)中做任何事情，包括以前只有客戶端應(yīng)用才能做的事情。

在 Fugu 項目中， Google 為 Chrome 規(guī)劃了數(shù)百項能力，如今進(jìn)展已經(jīng)過半，我們一起來看看瀏覽器現(xiàn)在擁有了哪些或許你還不知道的能力吧 ...

?Web Bluetooth API 為瀏覽器提供了連接藍(lán)牙設(shè)備并與之交互的能力。

這意味著：你的網(wǎng)站可以直接連接你的運動手表，查看步數(shù)、心率等數(shù)據(jù)，可以直接控制你的藍(lán)牙音響等等。而這些能力，之前你必須要下載一個 App 才能實現(xiàn)了 ...

獲取是否支持藍(lán)牙連接：

navigator.bluetooth.getAvailability().then((available) {
  if (available) {
    console.log("設(shè)備支持藍(lán)牙連接!");
  } else {
    console.log("設(shè)備不支持藍(lán)牙");
  }
});

連接到藍(lán)牙設(shè)備：

navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device {
  // 獲取設(shè)備名稱 [ConardLi]
  console.log(device.name);

  // 連接遠(yuǎn)程 GATT Server.
  return device.gatt.connect();
})
.then(server { /* … */ })
.catch(error { console.error(error); });

了解更多：https://developer.chrome.com/articles/bluetooth/

?Web USB API 為瀏覽器提供了和 USB 設(shè)備進(jìn)行交互的能力。

說到 USB ，你很有可能會立即想到鍵盤、鼠標(biāo)、音頻、視頻和一些存儲設(shè)備。

這些非標(biāo)準(zhǔn)化的 USB 設(shè)備通常需要硬件供應(yīng)商編寫特定于平臺的驅(qū)動程序和 SDK，開發(fā)非常繁瑣。

如果可以在 Web 上和 USB 進(jìn)行交互，這意味著硬件制造商將能夠為其設(shè)備構(gòu)建跨平臺的 JavaScript SDK，這將極大簡化一個 SDK 的開發(fā)成本！另外，通過將 USB 引入 Web，也可以使得 USB 更安全、更易于使用。

?下面?是一段簡單地獲取 USB 設(shè)備的代碼：

navigator.usb.getDevices().then(devices {
  devices.forEach(device {
    console.log(device.productName);      // "[ConardLi] Arduino Micro "
    console.log(device.manufacturerName); // "[ConardLi] Arduino LLC"
  });
})

你還可以在 Chrome 的內(nèi)部頁面 about://device-log 方便的調(diào)試 USB 設(shè)備：

了解更多：https://wicg.github.io/webusb/

異步剪貼板【Chrome 76】

在以前，我們一般使用 document.execCommand() 進(jìn)行剪貼板交互。雖然瀏覽器兼容性還不錯，但這種剪切和粘貼的方法有明顯的缺點：剪貼板訪問是同步的，只能讀寫 DOM。

對于少量文本的剪貼還好，但如果剪貼內(nèi)容較大，在安全粘貼內(nèi)容之前，可能還需要進(jìn)行耗時的清理或圖像解碼，瀏覽器可能還需要從粘貼的文檔加載或內(nèi)聯(lián)鏈接資源，這種情況下用戶體驗就比較糟糕了。

Asynchronous Clipboard API 的出現(xiàn)解決了這些問題，比如我們要將一段文本復(fù)制到剪貼板，可以調(diào)用一個異步的 writeText 函數(shù)：

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL 已賦值到剪貼板');
  } catch (err) {
    console.error('失敗了～);
  }
}

從剪貼板讀取數(shù)據(jù)一樣也可以是異步的：

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘貼文本: ', text);
  } catch (err) {
    console.error('讀取剪貼板文本失敗: ', err);
  }
}

另外，document.execCommand() 還有一個非常明顯的問題就是權(quán)限控制過于寬松了，在很多情況下我們可能會擔(dān)心網(wǎng)站是否會私自讀取我們剪貼板的信息，Asynchronous Clipboard API 僅支持 HTTPS 頁面，另外在讀取剪貼板是會向用戶發(fā)送許可，這保證了網(wǎng)頁必須在用戶同意的情況下才能讀取剪貼板：

了解更多：https://developer.mozilla.org/docs/Web/API/Clipboard_API

應(yīng)用安裝【Chrome 80】

getInstalledRelatedApps 方法可以讓瀏覽器知道某些應(yīng)用程序是否已在電腦上安裝了，當(dāng)然目前僅限于 Android、Windows 或 PWA 應(yīng)用。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  // 注意只能獲取到已經(jīng)授權(quán)的應(yīng)用，并不是所有應(yīng)用
  console.log(app.id, app.platform, app.url);
});

想象一下你開發(fā)了一個產(chǎn)品的官網(wǎng)，在用戶下載頁面你可以根據(jù)應(yīng)用的安裝狀態(tài)提示用戶是下載還是更新，甚至可以直接打開應(yīng)用...

了解更多：https://github.com/WICG/get-installed-related-apps

獲取聯(lián)系人【Chrome 80】

在以前，能夠在移動設(shè)備上訪問用戶的聯(lián)系人一直是移動 Web 應(yīng)用開發(fā)者最想要的功能之一，這也是促使他們必須選擇開發(fā)一個 App 的重要原因...

Contact Picker API 為瀏覽器提供了獲取手機(jī)聯(lián)系人的能力。

假如我們有一個基于 Web 的電子郵件客戶端，可以直接使用 Contact Picker API來選擇電子郵件的收件人。一個基于 Web 的 IP 語音應(yīng)用程序可以直接查找要撥打的電話號碼?；蛘咭恍?Web 社交應(yīng)用可以幫助用戶發(fā)現(xiàn)哪些朋友已經(jīng)加入了。

比如，你打開一個網(wǎng)頁游戲，他可以直接告訴你，你的好兄弟 ConardLi 也在玩喲，快和他一起組隊來砍我吧...

下面是一個簡單的使用示例：

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

try {
  const contacts = await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (ex) {
  // 一些錯誤...
}

了解更多：https://wicg.github.io/contact-api/spec/

編解碼能力【Chrome 80】

?在以前，瀏覽器提供了諸如 HTMLMediaElement、WebAudio、WebRTC 等實現(xiàn)媒體編解碼器能力的 API，但是沒有通用的方法來靈活配置和使用這些媒體編解碼器。因此，在有性能差、耗電快等問題的情況下，許多 Web 應(yīng)用還是會求助于在 JavaScript 或 WebAssembly 中實現(xiàn)媒體編解碼器。

WebCodecs 為網(wǎng)頁提供了對內(nèi)置（軟件和硬件）媒體編碼器和解碼器的高效訪問能力。

這項能力為網(wǎng)頁直播、云游戲等對流媒體處理性能要求較高的場景下大地來了很大便利。

下面是一個從視頻渲染到 Canvas 來實現(xiàn)極低延遲流的示例：

function onDecoderError(error) { ... }

function streamEncodedChunks(decodeCallback) { ... }

const canvasElement = document.getElementById("canvas");
const canvasContext = canvas.getContext('2d', canvasOptions)

function paintFrameToCanvas(videoFrame) {
  canvasContext.drawImage(frame, 0, 0);

  frame.close();
}

const videoDecoder = new VideoDecoder({
  output: paintFrameToCanvas,
  error: onDecoderError
});

videoDecoder.configure({codec: 'vp8'}).then(() {
  streamEncodedChunks(videoDecoder.decode.bind(videoDecoder));
}).catch(() {});

了解更多：https://github.com/w3c/webcodecs/blob/main/explainer.md

為圖標(biāo)添加徽章【Chrome 81】

?App Badging API 可以讓 Web 應(yīng)用為圖標(biāo)添加一些徽章。

比如一個 Web 聊天室可以在徽章上顯示未讀的消息數(shù)；一個 Web 象棋游戲可以通過標(biāo)記提醒輪到你下棋了；一些長耗時的后臺任務(wù)可以通過標(biāo)記告訴你任務(wù)已經(jīng)成功 ...

下面是一個簡單的代碼示例：

// 設(shè)置徽章
const unreadCount = 17;
navigator.setAppBadge(unreadCount).catch((error) => {
  // 異常捕獲...
});

// 清除徽章
navigator.clearAppBadge().catch((error) => {
  // 異常捕獲...
});

了解更多：https://w3c.github.io/badging/

形狀檢測【Chrome 83】

?在以前，我們想在 Web 上讀取一些圖片上的數(shù)據(jù)是相當(dāng)困難的，比如開發(fā)者想在客戶端提取一些些特征來構(gòu)建一個二維碼閱讀器，必須要依賴一個龐大的外部 JavaScript 庫，而且性能可能很差。

但是，包括 Android、iOS 和 macOS 在內(nèi)的操作系統(tǒng)，以及相機(jī)模塊中的硬件芯片，通常已經(jīng)具有高性能和高度優(yōu)化的特征檢測器，例如 Android 的 FaceDetector 或 iOS 的 CIDetector 通用特征檢測器。

Shape Detection API 通過一組 JavaScript 接口公開了這些實現(xiàn)。目前支持的功能有人臉檢測、條碼檢測以及文字檢測，這意味著我們可以在 Web 上實現(xiàn)下面的功能：

• 購物網(wǎng)站可以讓用戶直接掃描商品條碼查詢商品信息；
• 社交網(wǎng)站可以檢測人臉面部特征，自動添加墨鏡、胡子等道具；
• 內(nèi)容網(wǎng)站可以自動識別圖片上的文本，例如餐廳菜單。

下面是一段簡單的人臉識別代碼：

// [ConardLi]
const faceDetector = new FaceDetector({
  // 限制識別人臉的數(shù)量
  maxDetectedFaces: 5,
  // 降低精度提升速度
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

了解更多：https://wicg.github.io/shape-detection-api/

獲取驗證碼【Chrome 84】

當(dāng)我們在一些網(wǎng)站上進(jìn)行注冊或登錄時，可能需要驗證手機(jī)號。網(wǎng)頁一般會發(fā)送一個驗證碼，我們需要將驗證碼提交到網(wǎng)頁上來完成驗證。但是切到短信后復(fù)制驗證碼，再回來提交整個過程是比較繁瑣的。

WebOTP API 為瀏覽器提供了快捷讀取短信驗證碼的能力。

用法也非常簡單，首先我們可以為 input 添加一個 autocomplete 屬性：

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

然后調(diào)用 navigator.credentials 獲取驗證碼信息：

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err {
      console.log(err);
    });
  });
}

了解更多：https://wicg.github.io/WebOTP/

喚醒屏幕【Chrome 84】

試?想一下，當(dāng)你在某個網(wǎng)站上看著菜譜做飯，由于長時間未操作手機(jī)自動鎖屏了，你還需要去定期觸碰一下手機(jī)，是不是有點頭大。

Screen Wake Lock API 可體讓瀏覽器在網(wǎng)頁需要繼續(xù)運行時防止調(diào)暗或鎖定屏幕。

使用方式也很簡單，可以直接調(diào)用 navigator.wakeLock.request() 方法，返回一個 WakeLockSentinel 對象。

據(jù)說在實施了 Screen Wake Lock API 后，美國主要烹飪網(wǎng)站 Betty Crocker 的用戶購買意向指標(biāo)增加了 300% ...

了解更多：https://w3c.github.io/screen-wake-loc?k

文件訪問【Chrome 86】

在以前，我們只能通過 <input type="file"> 在瀏覽器上訪問文件，需要寫出類似下面的代碼：

const openFile = async () => {
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.addEventListener('change', () {
      resolve(input.files[0]);
    });
    input.click();
  });
};

File System Access API 為瀏覽器提供了更好的和文件系統(tǒng)交互的能力：

const openFile = async () => {
  try {
    // Always returns an array.
    const [handle] = await window.showOpenFilePicker();
    return handle.getFile();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

了解更多：https://wicg.github.io/file-system-access/

Web NFC【Chrome 89】

?NFC 代表 Near Field Communications，這是一種以 13.56 MHz 頻率運行的短距離無線技術(shù)，能夠在小于 10 厘米的距離內(nèi)實現(xiàn)設(shè)備之間的通信，傳輸速率高達(dá) 424 kbit/s。

Web NFC 為網(wǎng)站提供了在靠近用戶設(shè)備時讀取和寫入 NFC 標(biāo)簽的能力，這意味著你只需要打開一個網(wǎng)站就可以刷地鐵進(jìn)站了...

要掃描 NFC 標(biāo)簽，首先需要實例化一個 NDEFReader 對象，并調(diào)用 scan 方法，下面是一個簡單的代碼示例：

const ndef = new NDEFReader();
ndef.scan().then(() {
  console.log("掃描開始");
  ndef.onreadingerror = () {
    console.log("無法讀取NFC數(shù)據(jù)！");
  };
  ndef.onreading = event {
    console.log("NFC數(shù)據(jù)讀取成功...");
  };
}).catch(error {
  console.log(`Error! Scan failed to start: ${error}.`);
});

了解更多：https://wicg.github.io/file-system-access/

人機(jī)接口設(shè)備【Chrome 89】

?WebHID API 為瀏覽器提供了和人機(jī)接口設(shè)備（簡稱 HID）交互的能力。

比如鍵盤、鼠標(biāo)、觸摸板、游戲手柄等都屬于 HID 設(shè)備，WebHID API 提供了一系列 JavaScript API 來和這些設(shè)備進(jìn)行交互。而在以前，你必須要有一個特定的游戲主機(jī)才可以...

想象一下，以后再也不用糾結(jié)于國行外行了，因為你直接可以在網(wǎng)頁里打開 Switch 游戲了...

下面是一個簡單的代碼示例：

// 在具有 Switch Joy-Con USB 供應(yīng)商/產(chǎn)品id的設(shè)備上進(jìn)行篩選。
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006 // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007 // Joy-Con Right
  }
];

// 提示用戶選擇 Joy-Con 設(shè)備。
const [device] = await navigator.hid.requestDevice({ filters });

了解更多：https://wicg.github.io/webhid/index.html

和串口設(shè)備交互【Chrome 89】

串行接口（Serial port），也稱串行接口或串行端口，串行通信接口，COM接口，簡稱串口。主要用于串行式逐位數(shù)據(jù)傳輸。

?Web Serial API 為網(wǎng)站提供了一種使用 JavaScript 讀取和寫入串行設(shè)備的方法。

這樣，我們的網(wǎng)站?又能控制更多設(shè)備了，比如打印機(jī)、路由器、交換機(jī)等等。

下面是一個簡單的代碼示例：

document.querySelector('button').addEventListener('click', async () => {
  // 提示用戶選擇串口
  const port = await navigator.serial.requestPort();
});

從串口讀取數(shù)據(jù)：

const reader = port.readable.getReader();

// 監(jiān)聽來自串行設(shè)備的數(shù)據(jù)
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    reader.releaseLock();
    break;
  }
  console.log(value);
}

同樣的，你也可以在 Chrome 的 about://device-log 對串口設(shè)備進(jìn)行調(diào)試。

空閑檢測【Chrome 94】

?Idle Detection API 為網(wǎng)站提供了檢測用戶當(dāng)前是否空閑（例如在一段時間內(nèi)沒有與鍵盤、鼠標(biāo)、屏幕的交互）的能力。

例如，一個 Web 聊天室應(yīng)用可以讓你知道你的好友當(dāng)前是否在線，下面是一個空閑檢測的簡單示例：

// [ConardLi] 創(chuàng)建空閑探測器
const idleDetector = new IdleDetector();

// 設(shè)置一個在用戶空閑時觸發(fā)的監(jiān)聽器
idleDetector.addEventListener('change', () {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// 開始監(jiān)聽
await idleDetector.start({
  threshold: 60000,
  signal,
});

了解更多：https://wicg.github.io/idle-detection

WebTransport【Chrome 97】

?WebTransport 是一種新的 API，使用 HTTP/3 協(xié)議作為雙向傳輸，為網(wǎng)站提供低延遲、雙向、客戶端-服務(wù)器消息傳遞能力。

你可能會問和 WebSockets 的區(qū)別是啥？

WebSockets 的消息流特點是單一、可靠、有序，這對于某些場景的通信需求來說是很好的；但是 WebTransport 的數(shù)據(jù)的特點是低延遲，但不保證可靠性或排序，因為它底層使用的 QUIC 握手比通過 TLS 啟動 TCP 更快。

如果你的數(shù)據(jù)通信需要非常好的性能，但是對偶爾的丟包和排序可以容忍，比如一些網(wǎng)頁游戲的場景，WebTransport 是一個更好的選擇。

下面是一個簡單的使用示例：

// 向服務(wù)器發(fā)送數(shù)據(jù)
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
writer.write(data1);
writer.write(data2);

// 從服務(wù)器讀取數(shù)據(jù)
const reader = transport.datagrams.readable.getReader();
while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  // 值為 Uint8Array。
  console.log(value);
}

了解更多：https://wicg.github.io/web-transport/#web-transport

多屏窗口放置【Chrome 100】

Multi-Screen Window Placement API 為網(wǎng)頁了提供了枚舉顯示器并將窗口放置在特定屏幕上的能力。

下面是一個簡單的監(jiān)聽屏幕數(shù)量變化的示例：

// 獲取所有屏幕
const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
// 監(jiān)聽屏幕變化
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `屏幕數(shù)量從 ${cachedScreensLength} 變化到 ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

了解更多：https://w3c.github.io/window-placement