Compare commits
3 Commits
8560d61348
...
3db490a0bb
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 3db490a0bb | |
Fred Boniface | cd0e051a5a | |
Fred Boniface | 9e5d6d4732 |
|
@ -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>
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import Island from "$lib/islands/island.svelte";
|
import Island from "$lib/islands/island.svelte";
|
||||||
import Header from "$lib/navigation/header.svelte";
|
import Header from "$lib/navigation/header.svelte";
|
||||||
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() {
|
||||||
|
@ -12,13 +13,16 @@
|
||||||
return await res.json();
|
return await res.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
function U2L(input) {
|
function U2L(input: Date|number): string {
|
||||||
|
if (input instanceof Date) {
|
||||||
|
return input.toLocaleString();
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
const datetime = new Date(input * 1000);
|
const datetime = new Date(input * 1000);
|
||||||
return datetime.toLocaleString();
|
return datetime.toLocaleString();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
return false;
|
return "Unknown";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -61,6 +65,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 +147,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>
|
||||||
|
|
|
@ -3,8 +3,6 @@
|
||||||
import { build, files, version } from "$service-worker";
|
import { build, files, version } from "$service-worker";
|
||||||
|
|
||||||
const cacheName = `ob-${version}`;
|
const cacheName = `ob-${version}`;
|
||||||
const pointlessConstant = true;
|
|
||||||
console.log(`pointlessContant is ${pointlessConstant}`);
|
|
||||||
|
|
||||||
const assets = [...build, ...files, "/service-worker.js"];
|
const assets = [...build, ...files, "/service-worker.js"];
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue