src/lib/scripts/featureDetect.ts

@@ -47,3 +47,18 @@ export function featureDetect(): FeatureDetectionResult {
 
     return result;
 }
+
+/*// Example usage
+      const featureSupport = featureDetect();
+      console.log(featureSupport);
+      
+      if (!featureSupport.critical) {
+        alert('Some critical features required for this application are not supported by your browser.');
+        // Handle lack of critical features appropriately
+      } else if (!featureSupport.nice) {
+        console.warn('Some nice-to-have features are not supported by your browser. The app will still function, but some features may be unavailable.');
+        // Optionally handle lack of nice-to-have features
+      } else {
+        // Proceed with the normal functionality of your app
+      }
+        */

src/routes/+page.svelte

@@ -31,9 +31,9 @@
         console.log(featureSupport);
 
         if (!featureSupport.critical) {
-            toast.error("Your browser is missing critical features, OwlBoard might not work properly.  See `Menu > Statistics` for more information.");
+            toast.error("Your browser is missing critical features, OwlBoard might not work properly.  Consider updating your browser.");
         } else if (!featureSupport.nice) {
-            toast.error("Your browser is missing some features, see `Menu > Statistics` for more information.");
+            toast.error("Your browser is missing some features, OwlBoard may run slower or be missing some features.");
         }
     });
 </script>

src/routes/more/statistics/+page.svelte

@@ -1,10 +1,9 @@
-<script lang="ts">
+<script>
     import Island from "$lib/islands/island.svelte";
     import Header from "$lib/navigation/header.svelte";
     import Loading from "$lib/navigation/loading.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
-    import { featureDetect } from "$lib/scripts/featureDetect";
     const title = "Statistics";
 
     async function getData() {
@@ -13,16 +12,13 @@
         return await res.json();
     }
 
-    function U2L(input: Date|number): string {
-        if (input instanceof Date) {
-            return input.toLocaleString();
-        }
+    function U2L(input) {
         try {
             const datetime = new Date(input * 1000);
             return datetime.toLocaleString();
         } catch (err) {
             console.log(err);
-            return "Unknown";
+            return false;
         }
     }
 </script>
@@ -65,73 +61,6 @@
     </Island>
 {/await}
 
-<h2>Browser Features</h2>
-{#await featureDetect()}
-    Checking browser features
-    {:then features}
-    <h3>Critical Features</h3>
-    {#if !features.critical}
-    <p>OwlBoard will not function properly without these browser features.  If you see any crosses here
-        you may need to update your browser or choose another browser.  Chrome, Edge, Firefox, Brave & Samsung Browser 
-        have been tested.
-        </p>
-        {/if}
-    <ul class="feature-list">
-        <li>
-          Fetch <span class="feature-status {features.missing.includes('fetch') ? 'cross' : 'tick'}">
-            {features.missing.includes('fetch') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Local Storage <span class="feature-status {features.missing.includes('localStorage') ? 'cross' : 'tick'}">
-            {features.missing.includes('localStorage') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Session Storage <span class="feature-status {features.missing.includes('sessionStorage') ? 'cross' : 'tick'}">
-            {features.missing.includes('sessionStorage') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Promises <span class="feature-status {features.missing.includes('promise') ? 'cross' : 'tick'}">
-            {features.missing.includes('promise') ? '✗' : '✓'}
-          </span>
-        </li>
-      </ul>
-    
-      <h3>Nice-to-have Features</h3>
-      {#if !features.nice}
-      <p>OwlBoard may run slowly or be missing some functions without these browser features.  If you see any crosses here
-        you may want to update your browser or choose another browser for improved performance.  Chrome, Edge, Firefox, 
-        Brave & Samsung Browser have been tested.
-        </p>
-        {/if}
-      <ul class="feature-list">
-        <li>
-          Geolocation <span class="feature-status {features.missing.includes('geolocation') ? 'cross' : 'tick'}">
-            {features.missing.includes('geolocation') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Service Worker <span class="feature-status {features.missing.includes('serviceWorker') ? 'cross' : 'tick'}">
-            {features.missing.includes('serviceWorker') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Dialog <span class="feature-status {features.missing.includes('dialog') ? 'cross' : 'tick'}">
-            {features.missing.includes('dialog') ? '✗' : '✓'}
-          </span>
-        </li>
-        <li>
-          Popover API <span class="feature-status {features.missing.includes('popover') ? 'cross' : 'tick'}">
-            {features.missing.includes('popover') ? '✗' : '✓'}
-          </span>
-        </li>
-      </ul>
-  {:catch error}
-    Failed to detect browser features: {error.message}
-  {/await}
-
 <Nav />
 
 <style>
@@ -147,35 +76,4 @@
         margin-bottom: 2px;
         margin-top: 8px;
     }
-    .feature-list {
-    list-style-type: none; /* Remove bullet points */
-    padding: 0;
-    text-align: center; /* Center the list */
-  }
-
-  .feature-list li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 8px 0;
-  }
-
-  .feature-status {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    border-radius: 50%;
-    color: white;
-    margin-left: 8px;
-  }
-
-  .tick {
-    background-color: green;
-  }
-
-  .cross {
-    background-color: red;
-  }
 </style>

src/service-worker.js

@@ -3,6 +3,8 @@
 import { build, files, version } from "$service-worker";
 
 const cacheName = `ob-${version}`;
+const pointlessConstant = true;
+console.log(`pointlessContant is ${pointlessConstant}`);
 
 const assets = [...build, ...files, "/service-worker.js"];