Add feature detect information to statistics page
This commit is contained in:
parent
9e5d6d4732
commit
cd0e051a5a
@ -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
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user