PWA notice for unsupported browser (#4120)

* PWA notice for unsupported browser

* Upper case browser names

* Cleanup

locales/en/messages.json

@@ -42,7 +42,6 @@
         "message": "You need to refresh the page to get the latest changes. Refreshing it now will reload the page and you will lose any unsaved changes and will abort any operation in progress.<br><br>Do you want to refresh it now? You can also dismiss this message and refresh the page manually later.",
         "description": "Text of the window that appears when the app needs to be refreshed to get the latest changes"
     },
-
     "pwaOnOffilenReadyTitle": {
         "message": "The application is ready to be used offline",
         "description": "Title of the window that appears when the app is ready to be installed and used offline"

src/js/utils/checkBrowserCompatibilty.js

@@ -0,0 +1,33 @@
+export  function checkBrowserCompatibility() {
+    const compatible = "serial" in navigator;
+
+    if (!compatible) {
+        const errorMessage = "Betaflight app requires Chrome, Chromium, Edge or Vivaldi browser.";
+        const newDiv = document.createElement("div");
+
+        $('body')
+        .empty()
+        .css({
+            "height": "100%",
+            "display": "grid",
+            "background-image": "url(../images/osd-bg-1.jpg",
+            "background-size": "cover",
+            "background-repeat": "no-repeat",
+        })
+        .append(newDiv);
+
+        $('div')
+        .append(errorMessage)
+        .css({
+            "font-size": "16px",
+            "background-color": "var(--surface-200)",
+            "color": "var(--text)",
+            "padding": "1rem",
+            "margin": "auto",
+            "border-radius": "0.75rem",
+            "border": "2px solid var(--surface-500)",
+        });
+
+        throw new Error("No compatible browser found.");
+    }
+}

src/js/webSerial.js

@@ -1,4 +1,5 @@
 import { webSerialDevices, vendorIdNames } from "./serial_devices";
+import { checkBrowserCompatibility } from "./utils/checkBrowserCompatibilty";
 
 async function* streamAsyncIterable(reader, keepReadingFlag) {
     try {
@@ -17,6 +18,9 @@ async function* streamAsyncIterable(reader, keepReadingFlag) {
 class WebSerial extends EventTarget {
     constructor() {
         super();
+
+        checkBrowserCompatibility();
+
         this.connected = false;
         this.openRequested = false;
         this.openCanceled = false;