Improve WebSerial detection

Author: hhvrc

src/lib/constants/WebApiSupport.ts

@@ -0,0 +1,3 @@
+import { browser } from "$app/environment";
+
+export const isSerialSupported = browser && Object.hasOwn(navigator, 'serial') && typeof navigator.serial.getPorts === 'function' && typeof navigator.serial.requestPort === 'function' && typeof navigator.serial.addEventListener === 'function';

src/lib/stores/FlashManagersStore.ts

@@ -1,3 +1,4 @@
+import { isSerialSupported } from '$lib/constants/WebApiSupport';
 import FlashManager from '$lib/EspTool/FlashManager';
 import type { IEspLoaderTerminal } from 'esptool-js';
 import { get, writable } from 'svelte/store';
@@ -56,7 +57,7 @@ export const FlashManagerStore = {
 };
 
 export function initializeFlashManagersStore() {
-  if ('serial' in navigator) {
-    navigator.serial.addEventListener('disconnect', (e) => removePort(e.target as SerialPort));
-  }
+  if (isSerialSupported) return;
+
+  navigator.serial.addEventListener('disconnect', (e) => removePort(e.target as SerialPort));
 }

src/lib/stores/SerialPortsStore.ts

@@ -1,3 +1,4 @@
+import { isSerialSupported } from '$lib/constants/WebApiSupport';
 import { writable } from 'svelte/store';
 
 const { update, subscribe } = writable<SerialPort[]>([]);
@@ -11,15 +12,19 @@ function removePort(port: SerialPort) {
 
 export const SerialPortsStore = {
   requestPort: async (options: SerialPortRequestOptions) => {
+    if (!isSerialSupported) return null;
+
     const port = await navigator.serial.requestPort(options);
+
     addPort(port);
+
     return port;
   },
   subscribe,
 };
 
 export function initializeSerialPortsStore() {
-  if (!('serial' in navigator)) return;
+  if (!isSerialSupported) return;
 
   navigator.serial.addEventListener('connect', (e) => addPort(e.target as SerialPort));
   navigator.serial.addEventListener('disconnect', (e) => removePort(e.target as SerialPort));

src/routes/flashtool/+page.svelte

@@ -15,15 +15,14 @@
   import { Label } from '$lib/components/ui/label';
   import { Progress } from '$lib/components/ui/progress';
   import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/ui/sheet';
+  import { isSerialSupported } from '$lib/constants/WebApiSupport';
   import { FlashManagerStore } from '$lib/stores/FlashManagersStore';
   import Bowser from 'bowser';
   import FirmwareBoardSelector from './FirmwareBoardSelector.svelte';
   import FirmwareFlasher from './FirmwareFlasher.svelte';
   import HelpDialog from './HelpDialog.svelte';
   import SerialPortSelector from './SerialPortSelector.svelte';
 
-  const isSupported = browser && 'serial' in navigator;
-
   let port = $state<SerialPort | null>(null);
   let manager = $state<FlashManager | null>(null);
   let connectFailed = $state<boolean>(false);
@@ -191,7 +190,7 @@
 <Container>
   <Card.Header class="w-full flex flex-row justify-between">
     <Card.Title class="text-3xl">Flash Tool</Card.Title>
-    {#if isSupported}
+    {#if isSerialSupported}
       <div>
         <Button variant="outline" onclick={() => (terminalOpen = !terminalOpen)}>
           <SquareTerminal />
@@ -205,7 +204,7 @@
     {/if}
   </Card.Header>
   <Card.Content class="w-full flex flex-col gap-4">
-    {#if isSupported}
+    {#if isSerialSupported}
       {@render mainContent()}
     {:else if browser}
       {@render unsupportedBrowser()}