Web 开发未来会完全替代客户端开发吗？

咱们好，我是 ConardLi。

首要问咱们一个问题，现在有一项事务需求，这个需求运用客户端运用完结仍是网页来完结你会考虑哪些因素呢？能够在谈论区告诉我。

曾几何时，想到网页或许咱们第一时间想到的就是一些静态页面，可是经过数十年的蓬勃发展，网页开端接受越来越杂乱的需求，包含杂乱的管理系统、网络直播、云游戏等才干。

但或许你仍然会认为相比能够和系统底层直接交互的原生客户端运用仍是太弱了，咱们或许会由于浏览器“缺失” 了某一项才干而被逼挑选开发一个客户端运用。

为此 Google 启动了一个名为 Fugu 的项目，它的方针就是让开发者能够在 Web 生态中做任何工作，包含曾经只要客户端运用才干做的工作。

在 Fugu 项目中， Google 为 Chrome 规划了数百项才干，现在发展现已过半，咱们一起来看看浏览器现在具有了哪些或许你还不知道的才干吧 …

和蓝牙设备交互 【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);
//衔接长途GATTServer.
returndevice.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，开发十分繁琐。

如果能够在 Web 上和 USB 进行交互，这意味着硬件制造商将能够为其设备构建跨平台的 JavaScript SDK，这将极大简化一个 SDK 的开发本钱！别的，经过将 USB 引入 Web，也能够使得 USB 更安全、更易于运用。

下面是一段简略的获取 USB 设备的代码：

navigator.usb.getDevices().then(devices=>{
devices.forEach(device=>{
console.log(device.productName);//"[ConardLi]ArduinoMicro"
console.log(device.manufacturerName);//"[ConardLi]ArduinoLLC"
});
})

你还能够在 Chrome 的内部页面 about://device-log 方便的调试 USB 设备：

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

异步剪贴板【Chrome 76】

在曾经，咱们一般运用 document.execCommand() 进行剪贴板交互。虽然浏览器兼容性还不错，但这种剪切和张贴的办法有显着的缺陷：剪贴板拜访是同步的，只能读写 DOM。

关于少量文本的剪贴还好，但如果剪贴内容较大，在安全张贴内容之前，或许还需求进行耗时的清理或图像解码，浏览器或许还需求从张贴的文档加载或内联链接资源，这种情况下用户体验就比较糟糕了。

Asynchronous Clipboard API 的出现解决了这些问题，比方咱们要将一段文本仿制到剪贴板，能够调用一个异步的 writeText 函数：

asyncfunctioncopyPageUrl(){
try{
awaitnavigator.clipboard.writeText(location.href);
console.log('PageURL已赋值到剪贴板');
}catch(err){
console.error('失利了～);
}
}

从剪贴板读取数据一样也能够是异步的：

asyncfunctiongetClipboardContents(){
try{
consttext=awaitnavigator.clipboard.readText();
console.log('张贴文本:',text);
}catch(err){
console.error('读取剪贴板文本失利:',err);
}
}

别的，document.execCommand() 还有一个十分显着的问题就是权限操控过于宽松了，在许多情况下咱们或许会担心网站是否会私自读取咱们剪贴板的信息，Asynchronous Clipboard API 仅支撑 HTTPS 页面，别的在读取剪贴板是会向用户发送答应，这保证了网页有必要在用户同意的情况下才干读取剪贴板：

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

运用装置【Chrome 80】

getInstalledRelatedApps 办法能够让浏览器知道某些运用程序是否已在电脑上装置了，当然现在仅限于 Android、Windows 或 PWA 运用。

constrelatedApps=awaitnavigator.getInstalledRelatedApps();
relatedApps.forEach((app)=>{
//留意只能获取到现已授权的运用，并不是一切运用
console.log(app.id,app.platform,app.url);
});

幻想一下你开发了一个产品的官网，在用户下载页面你能够根据运用的装置状况提示用户是下载仍是更新，乃至能够直接打开运用…

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

获取联系人【Chrome 80】

在曾经，能够在移动设备上拜访用户的联系人一直是移动 Web 运用开发者最想要的功用之一，这也是促进他们有必要挑选开发一个 App 的重要原因…

Contact Picker API 为浏览器供给了获取手机联系人的才干。

假设咱们有一个根据 Web 的电子邮件客户端，能够直接运用 Contact Picker API 来挑选电子邮件的收件人。一个根据 Web 的 IP 语音运用程序能够直接查找要拨打的电话号码。或许一些 Web 社交运用能够帮助用户发现哪些朋友现已参加了。

比方，你打开一个网页游戏，他能够直接告诉你，你的好兄弟 ConardLi 也在玩哟，快和他一起组队来砍我吧…

下面是一个简略的运用示例：

constprops=['name','email','tel','address','icon'];
constopts={multiple:true};
try{
constcontacts=awaitnavigator.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 来完结极低推迟流的示例：

functiononDecoderError(error){...}
functionstreamEncodedChunks(decodeCallback){...}
constcanvasElement=document.getElementById("canvas");
constcanvasContext=canvas.getContext('2d',canvasOptions)
functionpaintFrameToCanvas(videoFrame){
canvasContext.drawImage(frame,0,0);
frame.close();
}
constvideoDecoder=newVideoDecoder({
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 象棋游戏能够经过符号提示轮到你下棋了；一些长耗时的后台任务能够经过符号告诉你任务现已成功 …

下面是一个简略的代码示例：

//设置徽章
constunreadCount=17;
navigator.setAppBadge(unreadCount).catch((error)=>{
//异常捕获...
});
//清除徽章
navigator.clearAppBadge().catch((error)=>{
//异常捕获...
});

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

形状检测【Chrome 83】

在曾经，咱们想在 Web 上读取一些图片上的数据是相当困难的，比方开发者想在客户端提取一些些特征来构建一个二维码阅读器，必需求依赖一个巨大的外部 JavaScript 库，而且功能或许很差。

可是，包含 Android、iOS 和 macOS 在内的操作系统，以及相机模块中的硬件芯片，通常现已具有高功能和高度优化的特征检测器，例如 Android 的 FaceDetector 或 iOS 的 CIDetector 通用特征检测器。

Shape Detection API 经过一组 JavaScript 接口公开了这些完结。现在支撑的功用有人脸检测、条码检测以及文字检测，这意味着咱们能够在 Web 上完结下面的功用：

• 购物网站能够让用户直接扫描商品条码查询商品信息；
• 社交网站能够检测人脸面部特征，自动增加墨镜、胡子等道具；
• 内容网站能够自动识别图片上的文本，例如餐厅菜单。

下面是一段简略的人脸识别代码：

//[ConardLi]
constfaceDetector=newFaceDetector({
//约束识别人脸的数量
maxDetectedFaces:5,
//下降精度提升速度
fastMode:false
});
try{
constfaces=awaitfaceDetector.detect(image);
faces.forEach(face=>drawMustache(face));
}catch(e){
console.error('Facedetectionfailed:',e);
}

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

获取验证码【Chrome 84】

当咱们在一些网站上进行注册或登录时，或许需求验证手机号。网页一般会发送一个验证码，咱们需求将验证码提交到网页上来完结验证。可是切到短信后仿制验证码，再回来提交整个过程是比较繁琐的。

WebOTP API 为浏览器供给了方便读取短信验证码的才干。

用法也十分简略，首要咱们能够为 input 增加一个 autocomplete 特点：

<form>
<inputautocomplete="one-time-code"required/>
<inputtype="submit">
</form>

然后调用 navigator.credentials 获取验证码信息：

if('OTPCredential'inwindow){
window.addEventListener('DOMContentLoaded',e=>{
constinput=document.querySelector('input[autocomplete="one-time-code"]');
if(!input)return;
constac=newAbortController();
constform=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 可体让浏览器在网页需求继续运转时防止调暗或锁定屏幕。

运用方式也很简略，能够直接调用 navigator.wakeLock.request() 办法，回来一个 WakeLockSentinel 对象。

据说在施行了 Screen Wake Lock API 后，美国主要烹饪网站 Betty Crocker 的用户购买意向指标增加了 300% …

了解更多：https://w3c.github.io/screen-wake-lock

文件拜访【Chrome 86】

在曾经，咱们只能经过 <input type="file"> 在浏览器上拜访文件，需求写出类似下面的代码：

constopenFile=async()=>{
returnnewPromise((resolve)=>{
constinput=document.createElement('input');
input.type='file';
input.addEventListener('change',()=>{
resolve(input.files[0]);
});
input.click();
});
};

File System Access API 为浏览器供给了更好的和文件系统交互的才干：

constopenFile=async()=>{
try{
//Alwaysreturnsanarray.
const[handle]=awaitwindow.showOpenFilePicker();
returnhandle.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 办法，下面是一个简略的代码示例：

constndef=newNDEFReader();
ndef.scan().then(()=>{
console.log("扫描开端");
ndef.onreadingerror=()=>{
console.log("无法读取NFC数据！");
};
ndef.onreading=event=>{
console.log("NFC数据读取成功...");
};
}).catch(error=>{
console.log(`Error!Scanfailedtostart:${error}.`);
});

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

人机接口设备【Chrome 89】

WebHID API 为浏览器供给了和人机接口设备（简称 HID）交互的才干。

比方键盘、鼠标、触摸板、游戏手柄等都归于 HID 设备，WebHID API 供给了一系列 JavaScript API 来和这些设备进行交互。而在曾经，你必需求有一个特定的游戏主机才干够…

幻想一下，今后再也不用纠结于国行外行了，由于你直接能够在网页里打开 Switch 游戏了…

下面是一个简略的代码示例：

//在具有SwitchJoy-ConUSB供货商/产品id的设备上进行筛选。
constfilters=[
{
vendorId:0x057e,//NintendoCo.,Ltd
productId:0x2006//Joy-ConLeft
},
{
vendorId:0x057e,//NintendoCo.,Ltd
productId:0x2007//Joy-ConRight
}
];
//提示用户挑选Joy-Con设备。
const[device]=awaitnavigator.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()=>{
//提示用户挑选串口
constport=awaitnavigator.serial.requestPort();
});

从串口读取数据：

constreader=port.readable.getReader();
//监听来自串行设备的数据
while(true){
const{value,done}=awaitreader.read();
if(done){
reader.releaseLock();
break;
}
console.log(value);
}

相同的，你也能够在 Chrome 的 about://device-log 对串口设备进行调试。

闲暇检测【Chrome 94】

Idle Detection API 为网站供给了检测用户当时是否闲暇（例如在一段时间内没有与键盘、鼠标、屏幕的交互）的才干。

例如，一个 Web 聊天室运用能够让你知道你的老友当时是否在线，下面是一个闲暇检测的简略示例：

//[ConardLi]创立闲暇探测器
constidleDetector=newIdleDetector();
//设置一个在用户闲暇时触发的监听器
idleDetector.addEventListener('change',()=>{
constuState=idleDetector.userState;
constsState=idleDetector.screenState;
console.log(`Idlechange:${uState},${sState}.`);
});
//开端监听
awaitidleDetector.start({
threshold:60000,
signal,
});

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

WebTransport【Chrome 97】

WebTransport 是一种新的 API，运用 HTTP/3 协议作为双向传输，为网站供给低推迟、双向、客户端-服务器音讯传递才干。

你或许会问和 WebSockets 的区别是啥？

WebSockets 的音讯流特点是单一、可靠、有序，这关于某些场景的通讯需求来说是很好的；可是 WebTransport 的数据的特点是低推迟，但不保证可靠性或排序，由于它底层运用的 QUIC 握手比经过 TLS 启动 TCP 更快。

如果你的数据通讯需求十分好的功能，可是对偶然的丢包和排序能够忍受，比方一些网页游戏的场景，WebTransport 是一个更好的挑选。

下面是一个简略的运用示例：

//向服务器发送数据
constwriter=transport.datagrams.writable.getWriter();
constdata1=newUint8Array([65,66,67]);
constdata2=newUint8Array([68,69,70]);
writer.write(data1);
writer.write(data2);
//从服务器读取数据
constreader=transport.datagrams.readable.getReader();
while(true){
const{value,done}=awaitreader.read();
if(done){
break;
}
//值为Uint8Array。
console.log(value);
}

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

多屏窗口放置【Chrome 100】

Multi-Screen Window Placement API 为网页了供给了枚举显现器并将窗口放置在特定屏幕上的才干。

下面是一个简略的监听屏幕数量变化的示例：

//获取一切屏幕
constscreenDetails=awaitwindow.getScreenDetails();
letcachedScreensLength=screenDetails.screens.length;
//监听屏幕变化
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

最后

当然，以上我提到的仅仅 Fugu 项目的很小一部分，咱们感兴趣能够去 Fugu 官网检查更多信息：「Fugu API Tracker」（https://fugu-tracker.web.app/#）

你觉得上面哪些才干对你最有用呢？

你觉得未来网页能够完全代替客户端么？

欢迎在谈论区和我留言。

如果这篇文章帮助到了你，欢迎点赞和重视。

如果你想参加高质量前端交流群，或许你有任何其他工作想和我交流也能够增加我的个人微信 ConardLi 。

抖音安全团队正在招聘前端，感兴趣请检查：抖音安全团队招聘前端工程师

点赞和在看是最大的支撑⬇️❤️⬇️