Compare commits
3 Commits
8560d61348
...
3db490a0bb
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 3db490a0bb | |
Fred Boniface | cd0e051a5a | |
Fred Boniface | 9e5d6d4732 |
|
@ -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
|
||||
}
|
||||
*/
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
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() {
|
||||
|
@ -12,13 +13,16 @@
|
|||
return await res.json();
|
||||
}
|
||||
|
||||
function U2L(input) {
|
||||
function U2L(input: Date|number): string {
|
||||
if (input instanceof Date) {
|
||||
return input.toLocaleString();
|
||||
}
|
||||
try {
|
||||
const datetime = new Date(input * 1000);
|
||||
return datetime.toLocaleString();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return false;
|
||||
return "Unknown";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -61,6 +65,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 +147,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>
|
||||
|
|
|
@ -3,8 +3,6 @@
|
|||
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"];
|
||||
|
||||
|
|
Loading…
Reference in New Issue