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

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); });

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

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);
  }
}

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

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

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

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(() {});

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

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

// [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);
}

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

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);
    });
  });
}

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

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

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}.`);
});

// 在具有 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 });

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

const reader = port.readable.getReader();

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

// [ConardLi] 创建空闲探测器
const idleDetector = new IdleDetector();

// 设置一个在用户空闲时触发的监听器
idleDetector.addEventListener('change', () {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// 开始监听
await idleDetector.start({
  threshold: 60000,
  signal,
});

// 向服务器发送数据
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);
}

// 获取所有屏幕
const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
// 监听屏幕变化
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `屏幕数量从 ${cachedScreensLength} 变化到 ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});