Added partial support for Web Serial API on Chromebooks (#544)

Added partial support for Web Serial API on Chromebooks.

Author: csarnataro

README.md

@@ -4,6 +4,14 @@
 # arduino-create-agent-js-client
 JS module providing discovery of the [Arduino Create Agent](https://github.com/arduino/arduino-create-agent) and communication with it
 
+
+## Changelog
+[2.8.0] - 2022-03-21
+
+### Added
+- Added support (still in Beta) for Chrome's Web Serial API on ChromeOS.
+  Other operating systems should not be affected.
+
 ## Installation
 
 ```bash

demo/app.jsx

@@ -27,6 +27,8 @@ import V2 from './v2/v2.jsx';
 
 const chromeExtensionID = 'hfejhkbipnickajaidoppbadcomekkde';
 
+const isChromeOs = () => window.navigator.userAgent.indexOf(' CrOS ') !== -1;
+
 const scrollToBottom = (target) => {
   if (target) {
     target.scrollTop = target.scrollHeight; // eslint-disable-line no-param-reassign
@@ -151,6 +153,17 @@ class App extends React.Component {
     }
   }
 
+  requestDevicePermission = () => {
+    if ('serial' in navigator) {
+      navigator.serial.requestPort([{ usbVendorId: 0x2341 }]).then((port) => {
+        daemon.devicesList.next({
+          serial: [port],
+          network: []
+        });
+      });
+    }
+  };
+
   showError(err) {
     this.setState({ error: err });
     scrollToBottom(document.body);
@@ -275,8 +288,10 @@ class App extends React.Component {
         </div>
 
         <div className="section">
-          <h2>Connected Devices</h2>
-
+          <div>
+            <h2 style={{ display: 'inline-block', marginRight: 10 } }>Connected Devices </h2>
+            { isChromeOs() && <button type="button" onClick={() => this.requestDevicePermission()}>Request access to serial port</button> }
+          </div>
           <strong>serial:</strong>
           <ul>
             { listSerialDevices }

demo/v2/install_tool.jsx

@@ -21,12 +21,14 @@ export class V2InstallTool extends React.Component {
   componentDidMount() {
     this.daemon = this.props.daemon;
 
-    this.daemon.agentV2Found.subscribe(daemonV2 => {
-      if (!daemonV2) {
-        return;
-      }
-      this.daemonV2 = daemonV2;
-    });
+    if (this.daemon.agentV2Found) { // agentV2Found not available for instance on chromebooks
+      this.daemon.agentV2Found.subscribe(daemonV2 => {
+        if (!daemonV2) {
+          return;
+        }
+        this.daemonV2 = daemonV2;
+      });
+    }
   }
 
   handleChange(event) {

demo/v2/v2.jsx

@@ -12,17 +12,19 @@ class V2 extends React.Component {
   componentDidMount() {
     this.daemon = this.props.daemon;
 
-    this.daemon.agentV2Found.subscribe(daemonV2 => {
-      if (!daemonV2) {
-        return;
-      }
-      this.daemonV2 = daemonV2;
-      this.daemonV2.installedTools().then(res => {
-        this.setState({
-          tools: res
+    if (this.daemon.agentV2Found) { // agentV2Found not available for instance on chromebooks
+      this.daemon.agentV2Found.subscribe(daemonV2 => {
+        if (!daemonV2) {
+          return;
+        }
+        this.daemonV2 = daemonV2;
+        this.daemonV2.installedTools().then(res => {
+          this.setState({
+            tools: res
+          });
         });
       });
-    });
+    }
   }
 
   render() {