What Web Can Do Today?

The Web Serial API allows Web applications to interact with the devices connected to the system via Serial Port. In order to authorize the application to get the access to the device, user needs to confirm the intent in the browser's UI that in turn may only be initiated with a gesture (for example, a button click, but not automatically by arbitrary JavaScript). The API exposes the connectivity via a pair of Streams – one for reading and one for writing into the serial port.

The specification, as of Spring 2020, is in design phase and early experimental implementations in Google Chrome only. Using it requires participation in Origin Trial program.

API glimpse

Live Demo

• JavaScript

  document.getElementById('connectButton').addEventListener('click', () => {
    if (navigator.serial) {
      connectSerial();
    } else {
      alert('Web Serial API not supported.');
    }
  });
  
  async function connectSerial() {
    const log = document.getElementById('target');
      
    try {
      const port = await navigator.serial.requestPort();
      await port.open({ baudRate: 9600 });
      
      const decoder = new TextDecoderStream();
      
      port.readable.pipeTo(decoder.writable);
  
      const inputStream = decoder.readable;
      const reader = inputStream.getReader();
      
      while (true) {
        const { value, done } = await reader.read();
        if (value) {
          log.textContent += value + '\n';
        }
        if (done) {
          console.log('[readLoop] DONE', done);
          reader.releaseLock();
          break;
        }
      }
    
    } catch (error) {
      log.innerHTML = error;
    }
  }

• HTML

  <button id="connectButton">Connect via Serial Port</button>
  
  <div id="target"></div>
  
  <p><small>Demo from <a href="https://codelabs.developers.google.com/codelabs/web-serial/" target="_blank" rel="noopener">Google Developers</a> codelabs.</small></p>

Resources

• Specification Draft
• Getting started with the Web Serial API – codelabs