From 74e5a36e6346ce8790c09d3b492554eb5284f8a6 Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Thu, 8 Aug 2024 22:05:57 +0200
Subject: [PATCH] PWA notice for unsupported browser (#4120)

* PWA notice for unsupported browser

* Upper case browser names

* Cleanup
---
 locales/en/messages.json                 |  1 -
 src/js/utils/checkBrowserCompatibilty.js | 33 ++++++++++++++++++++++++
 src/js/webSerial.js                      |  4 +++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/js/utils/checkBrowserCompatibilty.js

diff --git a/locales/en/messages.json b/locales/en/messages.json
index ed5c1ad39f..6ffb5f893d 100755
--- a/locales/en/messages.json
+++ b/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"
diff --git a/src/js/utils/checkBrowserCompatibilty.js b/src/js/utils/checkBrowserCompatibilty.js
new file mode 100644
index 0000000000..6481f1c56c
--- /dev/null
+++ b/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.");
+    }
+}
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index c0de6e9d38..0492c1cfe2 100644
--- a/src/js/webSerial.js
+++ b/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;