Add feature detect information to statistics page

This commit is contained in:
Fred Boniface 2024-06-23 23:43:16 +01:00
parent 9e5d6d4732
commit cd0e051a5a
3 changed files with 102 additions and 18 deletions

View File

@ -47,18 +47,3 @@ export function featureDetect(): FeatureDetectionResult {
return result; 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
}
*/

View File

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

View File

@ -4,6 +4,7 @@
import Loading from "$lib/navigation/loading.svelte"; import Loading from "$lib/navigation/loading.svelte";
import Nav from "$lib/navigation/nav.svelte"; import Nav from "$lib/navigation/nav.svelte";
import { getApiUrl } from "$lib/scripts/upstream"; import { getApiUrl } from "$lib/scripts/upstream";
import { featureDetect } from "$lib/scripts/featureDetect";
const title = "Statistics"; const title = "Statistics";
async function getData() { async function getData() {
@ -61,6 +62,73 @@
</Island> </Island>
{/await} {/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 /> <Nav />
<style> <style>
@ -76,4 +144,35 @@
margin-bottom: 2px; margin-bottom: 2px;
margin-top: 8px; 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> </style>