Web開發(fā)未來會完全替代客戶端開發(fā)嗎？

作者：Echa攻城獅 2022-11-29 17:08:03

開發(fā) 前端

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

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

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

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

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

和藍牙設備交互【Chrome 56】

?Web Bluetooth API 為瀏覽器提供了連接藍牙設備并與之交互的能力。

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

獲取是否支持藍牙連接：

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

連接到藍牙設備：

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

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

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

和 USB 設備交互【Chrome 61】

?Web USB API 為瀏覽器提供了和 USB 設備進行交互的能力。

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

這些非標準化的 USB 設備通常需要硬件供應商編寫特定于平臺的驅動程序和 SDK，開發(fā)非常繁瑣。

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

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

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

你還可以在 Chrome 的內部頁面 about://device-log 方便的調試 USB 設備：

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

異步剪貼板【Chrome 76】

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

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

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

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

從剪貼板讀取數據一樣也可以是異步的：

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

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

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

應用安裝【Chrome 80】

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

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

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

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

獲取聯系人【Chrome 80】

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

Contact Picker API 為瀏覽器提供了獲取手機聯系人的能力。

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

比如，你打開一個網頁游戲，他可以直接告訴你，你的好兄弟 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 等實現媒體編解碼器能力的 API，但是沒有通用的方法來靈活配置和使用這些媒體編解碼器。因此，在有性能差、耗電快等問題的情況下，許多 Web 應用還是會求助于在 JavaScript 或 WebAssembly 中實現媒體編解碼器。

WebCodecs 為網頁提供了對內置（軟件和硬件）媒體編碼器和解碼器的高效訪問能力。

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

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

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

為圖標添加徽章【Chrome 81】

?App Badging API 可以讓 Web 應用為圖標添加一些徽章。

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

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

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

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

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

形狀檢測【Chrome 83】

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

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

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

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

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

// [ConardLi]
const faceDetector = new FaceDetector({
  // 限制識別人臉的數量
  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】

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

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

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

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

然后調用 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】

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

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

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

據說在實施了 Screen Wake Lock API 后，美國主要烹飪網站 Betty Crocker 的用戶購買意向指標增加了 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 頻率運行的短距離無線技術，能夠在小于 10 厘米的距離內實現設備之間的通信，傳輸速率高達 424 kbit/s。

Web NFC 為網站提供了在靠近用戶設備時讀取和寫入 NFC 標簽的能力，這意味著你只需要打開一個網站就可以刷地鐵進站了...

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

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

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

人機接口設備【Chrome 89】

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

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

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

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

// 在具有 Switch Joy-Con USB 供應商/產品id的設備上進行篩選。
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006 // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007 // Joy-Con Right
  }
];

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

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

和串口設備交互【Chrome 89】

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

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

這樣，我們的網站?又能控制更多設備了，比如打印機、路由器、交換機等等。

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

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

從串口讀取數據：

const reader = port.readable.getReader();

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

同樣的，你也可以在 Chrome 的 about://device-log 對串口設備進行調試。

空閑檢測【Chrome 94】

?Idle Detection API 為網站提供了檢測用戶當前是否空閑（例如在一段時間內沒有與鍵盤、鼠標、屏幕的交互）的能力。

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

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

// 設置一個在用戶空閑時觸發(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 協議作為雙向傳輸，為網站提供低延遲、雙向、客戶端-服務器消息傳遞能力。

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

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

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

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

// 向服務器發(fā)送數據
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);

// 從服務器讀取數據
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 為網頁了提供了枚舉顯示器并將窗口放置在特定屏幕上的能力。

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

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

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

責任編輯：華軒來源：今日頭條

開發(fā)Web 客戶端

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Web開發(fā)未來會完全替代客戶端開發(fā)嗎？

異步剪貼板【Chrome 76】

應用安裝【Chrome 80】

獲取聯系人【Chrome 80】

編解碼能力【Chrome 80】

為圖標添加徽章【Chrome 81】

形狀檢測【Chrome 83】

獲取驗證碼【Chrome 84】

喚醒屏幕【Chrome 84】

文件訪問【Chrome 86】

Web NFC【Chrome 89】

人機接口設備【Chrome 89】

和串口設備交互【Chrome 89】

空閑檢測【Chrome 94】

WebTransport【Chrome 97】

多屏窗口放置【Chrome 100】