feat: add warning for outdated browsers

package.json

@@ -40,6 +40,7 @@
         "axios": "^0.27.0",
         "codemirror": "^6.0.1",
         "core-js": "^3.16.0",
+        "detect-browser": "^5.3.0",
         "echarts": "^5.2.2",
         "echarts-gl": "^2.0.8",
         "hls.js": "^1.3.3",

src/locales/de.json

@@ -1,6 +1,10 @@
 {
     "App": {
         "Notifications": {
+            "BrowserWarnings": {
+                "Headline": "Veralteter Browser",
+                "Description": "Die verwendete {name} Version ({version}) ist veraltet und wird nicht vollständig unterstützt. Mainsail benötigt die Version {minVersion} oder höher."
+            },
             "DependencyDescription": "Die momentane {name} Version unterstützt nicht alle Funktionen von Mainsail. Aktualisiere {name} mindestens auf Version {neededVersion}.",
             "DependencyName": "Abhängigkeit: {name}",
             "DismissAll": "Alles verwerfen",

src/locales/en.json

@@ -1,6 +1,10 @@
 {
     "App": {
         "Notifications": {
+            "BrowserWarnings": {
+                "Headline": "Outdated Browser",
+                "Description": "{name} is outdated and not fully supported. The current version is {version}, but Mainsail requires version {minVersion} or higher."
+            },
             "DependencyDescription": "The current {name} version does not support all features of Mainsail. Update {name} to at least {neededVersion}.",
             "DependencyName": "Dependency: {name}",
             "DismissAll": "Dismiss all",

src/store/gui/notifications/getters.ts

@@ -5,6 +5,9 @@ import i18n from '@/plugins/i18n.js'
 import { RootStateDependency } from '@/store/types'
 import { sha256 } from 'js-sha256'
 import { PrinterStateKlipperConfigWarning } from '@/store/printer/types'
+import { detect } from 'detect-browser'
+import semver from 'semver'
+import { minBrowserVersions } from '@/store/variables'
 
 export const getters: GetterTree<GuiNotificationState, any> = {
     getNotifications: (state, getters) => {
@@ -22,12 +25,15 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         // moonraker warnings
         notifications = notifications.concat(getters['getNotificationsMoonrakerWarnings'])
 
-        // moonraker failed compontents
+        // moonraker failed components
         notifications = notifications.concat(getters['getNotificationsMoonrakerFailedComponents'])
 
         // klipper warnings
         notifications = notifications.concat(getters['getNotificationsKlipperWarnings'])
 
+        // browser warnings
+        notifications = notifications.concat(getters['getNotificationsBrowserWarnings'])
+
         const mapType = {
             normal: 2,
             high: 1,
@@ -270,6 +276,50 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         return notifications
     },
 
+    getNotificationsBrowserWarnings: (state, getters, rootState) => {
+        const notifications: GuiNotificationStateEntry[] = []
+
+        const browser = detect()
+        const date = rootState.server.system_boot_at ?? new Date()
+
+        // stop here, because no browser detected
+        if (browser === null) return notifications
+
+        // output browser information to console
+        window.console.debug(`Browser: ${browser.name} ${browser.version}, OS: ${browser.os}`)
+
+        // find browser requirement
+        const minBrowserVersion = minBrowserVersions.find(
+            (entry) => entry.name.toLowerCase() === browser.name.toLowerCase()
+        )
+
+        // stop here, because no browser requirement found
+        if (minBrowserVersion === undefined) return notifications
+
+        if (
+            semver.valid(browser.version) &&
+            semver.valid(minBrowserVersion.version) &&
+            semver.gt(minBrowserVersion.version, browser.version ?? '0.0.0')
+        ) {
+            notifications.push({
+                id: `browserWarning/${minBrowserVersion.name}/${minBrowserVersion.version}`,
+                priority: 'critical',
+                title: i18n.t('App.Notifications.BrowserWarnings.Headline').toString(),
+                description: i18n
+                    .t('App.Notifications.BrowserWarnings.Description', {
+                        name: minBrowserVersion.name,
+                        version: browser.version,
+                        minVersion: minBrowserVersion.version,
+                    })
+                    .toString(),
+                date,
+                dismissed: false,
+            } as GuiNotificationStateEntry)
+        }
+
+        return notifications
+    },
+
     getDismiss: (state, getters, rootState) => {
         const currentTime = new Date()
         const systemBootAt = rootState.server.system_boot_at ?? new Date()

src/store/variables.ts

@@ -3,6 +3,7 @@ export const defaultPrimaryColor = '#2196f3'
 
 export const minKlipperVersion = 'v0.11.0-97'
 export const minMoonrakerVersion = 'v0.8.0-38'
+export const minBrowserVersions = [{ name: 'safari', version: '16.5.2' }]
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']