OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Add feature detect information to statistics page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/scripts/featureDetect.ts
View File

@ -46,19 +46,4 @@ 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
}
*/
}

4
src/routes/+page.svelte
View File

@ -31,9 +31,9 @@
console.log(featureSupport);
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) {
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>

99
src/routes/more/statistics/+page.svelte
View File

@ -4,6 +4,7 @@
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() {
@ -61,6 +62,73 @@
</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>
@ -76,4 +144,35 @@
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>