Polyfill web serial on Android

index.html

@@ -297,7 +297,7 @@
         Web Serial is available in Google Chrome and Microsoft Edge
         browsers<span class="not-supported-i hidden">
           (but not on your iOS device)</span
-        >. Android support should be possible but has not been implemented yet.
+        >. This includes Android.
       </p>
 
       <h3 id="improv">Configuring Wi-Fi</h3>

package-lock.json

@@ -14,7 +14,8 @@
         "improv-wifi-serial-sdk": "^2.5.0",
         "lit": "^3.1.2",
         "pako": "^2.1.0",
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.2",
+        "web-serial-polyfill": "^1.0.15"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.23.9",
@@ -25,6 +26,7 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
         "@types/w3c-web-serial": "^1.0.6",
+        "@types/w3c-web-usb": "^1.0.10",
         "prettier": "^3.2.5",
         "rollup": "^4.10.0",
         "serve": "^14.2.1",
@@ -3370,6 +3372,12 @@
       "integrity": "sha512-5IlDdQ2C56sCVwc7CUlqT9Axxw+0V/FbWRbErklYIzZ5mKL9s4l7epXHygn+4X7L2nmAPnVvRl55XUVo0760Rg==",
       "dev": true
     },
+    "node_modules/@types/w3c-web-usb": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.10.tgz",
+      "integrity": "sha512-CHgUI5kTc/QLMP8hODUHhge0D4vx+9UiAwIGiT0sTy/B2XpdX1U5rJt6JSISgr6ikRT7vxV9EVAFeYZqUnl1gQ==",
+      "dev": true
+    },
     "node_modules/@zeit/schemas": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
@@ -5300,6 +5308,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/web-serial-polyfill": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/web-serial-polyfill/-/web-serial-polyfill-1.0.15.tgz",
+      "integrity": "sha512-usZN7kGRkEWr8DzRWxW+og55L1fHo4hNIwxCSCfWKpM+i0L+2AwzupMvkDFxnJNqUFOhLaD3PlgAOJxUOUrAoA=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8011,6 +8024,12 @@
       "integrity": "sha512-5IlDdQ2C56sCVwc7CUlqT9Axxw+0V/FbWRbErklYIzZ5mKL9s4l7epXHygn+4X7L2nmAPnVvRl55XUVo0760Rg==",
       "dev": true
     },
+    "@types/w3c-web-usb": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.10.tgz",
+      "integrity": "sha512-CHgUI5kTc/QLMP8hODUHhge0D4vx+9UiAwIGiT0sTy/B2XpdX1U5rJt6JSISgr6ikRT7vxV9EVAFeYZqUnl1gQ==",
+      "dev": true
+    },
     "@zeit/schemas": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz",
@@ -9418,6 +9437,11 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "web-serial-polyfill": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/web-serial-polyfill/-/web-serial-polyfill-1.0.15.tgz",
+      "integrity": "sha512-usZN7kGRkEWr8DzRWxW+og55L1fHo4hNIwxCSCfWKpM+i0L+2AwzupMvkDFxnJNqUFOhLaD3PlgAOJxUOUrAoA=="
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/w3c-web-serial": "^1.0.6",
+    "@types/w3c-web-usb": "^1.0.10",
     "prettier": "^3.2.5",
     "rollup": "^4.10.0",
     "serve": "^14.2.1",
@@ -29,6 +30,7 @@
     "improv-wifi-serial-sdk": "^2.5.0",
     "lit": "^3.1.2",
     "pako": "^2.1.0",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "web-serial-polyfill": "^1.0.15"
   }
 }

src/install-button.ts

@@ -112,4 +112,20 @@ export class InstallButton extends HTMLElement {
   }
 }
 
-customElements.define("esp-web-install-button", InstallButton);
+function defineInstallButton() {
+  customElements.define("esp-tools-install-button", InstallButton);
+}
+
+async function polyfillWebSerial() {
+  const { serial } = await import("web-serial-polyfill");
+  // @ts-ignore-next-line
+  navigator.serial = serial;
+  InstallButton.isSupported = true;
+  defineInstallButton();
+}
+
+if (!navigator.serial && navigator.usb) {
+  polyfillWebSerial();
+} else {
+  defineInstallButton();
+}