• New Standards to Access User Device Hardware using JavaScript
  • Viduni Wickramarachchi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Badd
  • Proofreader: Chorer, KimYangOfCat

A new standard for accessing user device hardware with JavaScript

Have you ever had to develop a desktop application just to access user device hardware? You’re not the only one suffering. Not so long ago, accessing hardware with JavaScript was grudging and cumbersome. However, with recent updates to Chrome development tools, interacting with hardware in JavaScript is a dream come true.

Therefore, in this article, I will introduce three new JavaScript apis, WebHID, WebNFC, and WebUSB, that will be used to access device hardware. Let’s take a look at each of these new technology points.

1. What is WebHID?

When integrating a HID (Human Interface Device) into software, the main problem developers face is that they need to do a lot of compatibility work, including the compatibility of old/new devices, general/non-general models, etc.

WebHID solves this problem by providing an API that lets you implement device-specific logic in JavaScript.

As a simple example, if you want to play Chrome’s offline Little Dinosaurs 🦖 game with the Nintendo Switch’s Joy-Con gamepad, you can do it with WebHID. Isn’t that cool?

With this code, you can check whether your runtime environment supports WebHID.

if ("hid" in navigator) { /* Support the WebHID API. * / }
Copy the code

When an application uses WebHID to connect to a device, it displays a pop-up like the one below.

All you have to do is select the right device and click Connect. It’s that simple.

The WebHID API is asynchronous. So the interface is not blocked while waiting to connect to a new device or for user input.

Safety considerations

I know that when you look at what WebHID can do, security comes to mind.

The API was developed based on the core principles defined in the Chromium documentation for access control of powerful Web platform features, including user control, transparency, ergonomics, etc. More strictly, only one HID device is allowed to be connected at a time.

In addition, Chrome Developer Tools provides log output for the device to which the browser is currently connected, making it easier to debug device connections. This log can be seen in Chrome ://device-log (chrome internal page).

In this article, we will not cover the low-level implementation details. If you’d like to know the implementation details, please leave a comment in the comments section.

Browser compatibility

Chrome and Edge currently support WebHID on the desktop.

Then let’s look at WebNFC.

2. What is WebNFC?

I’m sure you’ve come across the acronym NFC before.

With WebNFC, you can read or write data to an NFC tag when it is within the range of your device’s recognition. This is achieved through NDEF (NFC Data Interchange Format) technology, which is a format supported by NFC labels.

Using WebNFC

Consider a scenario: You need to manage inventory in your own store. You can set up an inventory management site by using WebNFC to read/write data to NFC tags on inventory items.

The possibilities with WebNFC are endless. This is an opportunity to automate many processes and make routine tasks more efficient.

Similar to WebHID, you can check WebNFC support with the following code.

if ('NDEFReader' in window) { /* Scan and write NFC labels */ }
Copy the code

Safety considerations

To prevent this, only top-level frameworks and secure browsing environments (HTTPS only) can use WebNFC.

If a Web page with WebNFC functionality disappears or is not visible to the naked eye, all NFC tags connected to the web page are suspended. These connections are restored when the page becomes visible again. The page visibility API helps you identify the connection state of an NFC operation.

If you’re not familiar with the page visibility API, read this article.

Browser compatibility

Currently, only Chrome on Android supports WebNFC.

Let’s take a look at the WebUSB API.

3. What is WebUSB?

Starting with Chrome version 61, the WebUSB API lets you communicate with USB ports using JavaScript.

However, you might be wondering, how can we access the relevant drivers for each USB device, right? With WebHID API support, hardware vendors can develop cross-platform JavaScript SDKS for their own hardware devices.

Similar to the API above, we can use the following code to test WebUSB support.

if ("usb" in navigator) { /* Support the WebUSB API. * / }
Copy the code

security

There are a number of controls to secure unauthorized USB access, and it only operates in secure environments that allow only the HTTPS protocol to protect transferred data. In addition, there is a standard browser authorization process to request and grant access.

Debugging tasks related to the WebUSB API can also be seen on the Chrome :// Device-log page, which lists all currently connected USB devices and related events.

Browser compatibility

Chrome on the desktop, Edge, and Chrome on Android support WebUSB.

For more details on the WebUSB API, you can refer to the Web Access USB Device documentation.

conclusion

Whether you have a Web site that interacts with hardware, or you have hardware that interacts with Web applications, the new standard is a win-win because they don’t need to install special drivers or software to connect.

In my opinion, this new feature is so cool that it will make life easier.

Feel free to share your thoughts on this. Thanks for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.