OwlBoard/web-pwa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add extra message to +error.svelte to handle, and clarify 'OFFLINE' error.

Browse Source
This commit is contained in:
Fred Boniface
2026-05-14 19:43:22 +01:00
parent 25b64edabd
commit 1105a9f7c5
6 changed files with 111 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/ui/station-board/StaffServicesTable.svelte
View File

@@ -248,10 +248,10 @@
font-size: 1.18rem; font-size: 1.18rem;
} }
} }
@media (min-width: 620px) { @media (min-width: 620px) {
.cancel-row td, .cancel-row td,
.delay-row td { .delay-row td {
font-size: 1.20rem; font-size: 1.2rem;
} }
} }
@@ -261,12 +261,12 @@
padding: 0; padding: 0;
color: rgb(187, 187, 255); color: rgb(187, 187, 255);
} }
@media(min-width: 400px) { @media (min-width: 400px) {
.toc-coach-row td { .toc-coach-row td {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
@media(min-width: 550px) { @media (min-width: 550px) {
.toc-coach-row td { .toc-coach-row td {
font-size: 0.85rem; font-size: 0.85rem;
} }

48
src/lib/preferences.svelte.ts
View File

@@ -1,43 +1,43 @@
import { browser } from '$app/environment'; import { browser } from '$app/environment';
export interface Preferences { export interface Preferences {
locationEnabled: boolean; locationEnabled: boolean;
} }
const STORAGE_KEY = 'ob_pref'; const STORAGE_KEY = 'ob_pref';
const DEFAULT_PREFS: Preferences = { const DEFAULT_PREFS: Preferences = {
locationEnabled: false, locationEnabled: false
}; };
function loadPrefs(): Preferences { function loadPrefs(): Preferences {
if (!browser) return DEFAULT_PREFS; if (!browser) return DEFAULT_PREFS;
const stored = localStorage.getItem(STORAGE_KEY); const stored = localStorage.getItem(STORAGE_KEY);
if (!stored) return DEFAULT_PREFS; if (!stored) return DEFAULT_PREFS;
try { try {
return { ...DEFAULT_PREFS, ...JSON.parse(stored) }; return { ...DEFAULT_PREFS, ...JSON.parse(stored) };
} catch { } catch {
return DEFAULT_PREFS; return DEFAULT_PREFS;
} }
} }
class PreferencesStore { class PreferencesStore {
current = $state<Preferences>(loadPrefs()); current = $state<Preferences>(loadPrefs());
constructor() { constructor() {
$effect.root(() => { $effect.root(() => {
$effect(() => { $effect(() => {
if (browser) { if (browser) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(this.current)); localStorage.setItem(STORAGE_KEY, JSON.stringify(this.current));
} }
}); });
}); });
} }
toggleLocation(enabled: boolean) { toggleLocation(enabled: boolean) {
this.current.locationEnabled = enabled; this.current.locationEnabled = enabled;
} }
} }
export const prefs = new PreferencesStore(); export const prefs = new PreferencesStore();

38
src/lib/quick-links.svelte.ts
View File

@@ -11,18 +11,18 @@ const MAX_ENTRIES: number = RETURNED_LENGTH * 4;
class QuickLinksService { class QuickLinksService {
#links = $state<QuickLink[]>([]); #links = $state<QuickLink[]>([]);
constructor() { constructor() {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const saved = localStorage.getItem('ql'); const saved = localStorage.getItem('ql');
if (saved) { if (saved) {
try { try {
this.#links = JSON.parse(saved); this.#links = JSON.parse(saved);
} catch { } catch {
this.#links = []; this.#links = [];
} }
} }
} }
} }
get list(): QuickLink[] { get list(): QuickLink[] {
return this.#links.slice(0, RETURNED_LENGTH); return this.#links.slice(0, RETURNED_LENGTH);
@@ -58,16 +58,16 @@ constructor() {
this.#links = sorted.slice(0, MAX_ENTRIES); this.#links = sorted.slice(0, MAX_ENTRIES);
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
localStorage.setItem('ql', JSON.stringify(this.#links)); localStorage.setItem('ql', JSON.stringify(this.#links));
} }
} }
reset() { reset() {
this.#links = []; this.#links = [];
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
localStorage.removeItem('ql'); localStorage.removeItem('ql');
} }
} }
} }
export const quickLinks = new QuickLinksService(); export const quickLinks = new QuickLinksService();

1
src/routes/+error.svelte
View File

@@ -12,6 +12,7 @@
<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" /> <img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
{:else if page.status == 499} {:else if page.status == 499}
<!-- Change to a GSM-R X Sign?? --> <!-- Change to a GSM-R X Sign?? -->
<span>OFFLINE!</span>
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" /> <img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
{:else} {:else}
<!-- STOP Error image --> <!-- STOP Error image -->

4
src/routes/+layout.svelte
View File

@@ -22,11 +22,11 @@
if (browser && 'serviceWorker' in navigator) { if (browser && 'serviceWorker' in navigator) {
try { try {
const registration = await navigator.serviceWorker.register('/service-worker.js', { const registration = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module', type: 'module'
}); });
console.info('OwlBoard Service Worker registered', registration.scope); console.info('OwlBoard Service Worker registered', registration.scope);
} catch (error) { } catch (error) {
console.error('Service Worker installation failed: ', error) console.error('Service Worker installation failed: ', error);
} }
} }
}); });

132
src/service-worker.ts
View File

@@ -7,87 +7,77 @@ import { build, files, version } from '$service-worker';
const sw = self as unknown as ServiceWorkerGlobalScope; const sw = self as unknown as ServiceWorkerGlobalScope;
const CACHE_NAME = `owlboard-cache-${version}`; const CACHE_NAME = `owlboard-cache-${version}`;
const ASSETS = [ const ASSETS = [
...build, ...build,
...files.filter(file => ...files.filter((file) => !file.endsWith('manifest.json') && !file.startsWith('/icons/')),
!file.endsWith('manifest.json') && '/'
!file.startsWith('/icons/')
),
'/',
]; ];
sw.addEventListener('install', (event) => { sw.addEventListener('install', (event) => {
sw.skipWaiting(); sw.skipWaiting();
event.waitUntil( event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
);
}); });
sw.addEventListener('activate', (event) => { sw.addEventListener('activate', (event) => {
event.waitUntil( event.waitUntil(
Promise.all([ Promise.all([
caches.keys().then((keys) => { caches.keys().then((keys) => {
return Promise.all( return Promise.all(
keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)) keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
); );
}), }),
sw.clients.claim() sw.clients.claim()
]) ])
); );
}); });
sw.addEventListener('fetch', (event) => { sw.addEventListener('fetch', (event) => {
const { request } = event; const { request } = event;
if (request.method !== 'GET') return; if (request.method !== 'GET') return;
const url = new URL(request.url);
// Uncached static assets const url = new URL(request.url);
if (url.pathname.endsWith('manifest.json') || url.pathname.includes('/icons/')) {
event.respondWith(fetch(request));
return;
}
// 1. Static Assets (Cache-First) // Uncached static assets
if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) { if (url.pathname.endsWith('manifest.json') || url.pathname.includes('/icons/')) {
event.respondWith( event.respondWith(fetch(request));
caches.match(request).then((res) => res || fetch(request)) return;
); }
return;
}
// 2. Offline API Fallback (Network-First) // 1. Static Assets (Cache-First)
if (url.pathname.startsWith('/api') || url.hostname.includes('api')) { if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) {
event.respondWith( event.respondWith(caches.match(request).then((res) => res || fetch(request)));
fetch(request).catch(() => { return;
const errorObject: ApiEnvelope.Envelope = { }
e: {
code: "NETWORK_DISCONNECTED",
msg: "Cannot connect to the OwlBoard server"
},
t: Math.floor(Date.now() / 1000)
};
return new Response(
JSON.stringify(errorObject),
{
status: 503,
headers: { 'Content-Type': 'application/json' }
}
);
})
);
return;
}
// 3. Navigation Fallback (The Offline 404 Catch-All) // 2. Offline API Fallback (Network-First)
// This catches top-level page navigations and hard refreshes if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) { event.respondWith(
event.respondWith( fetch(request).catch(() => {
fetch(request).catch(() => { const errorObject: ApiEnvelope.Envelope = {
// The network request failed entirely (offline). e: {
// Serve the cached root shell so SvelteKit can boot. code: 'NETWORK_DISCONNECTED',
return caches.match('/') as Promise<Response>; msg: 'Cannot connect to the OwlBoard server'
}) },
); t: Math.floor(Date.now() / 1000)
return; };
} return new Response(JSON.stringify(errorObject), {
}); status: 503,
headers: { 'Content-Type': 'application/json' }
});
})
);
return;
}
// 3. Navigation Fallback (The Offline 404 Catch-All)
// This catches top-level page navigations and hard refreshes
if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
event.respondWith(
fetch(request).catch(() => {
// The network request failed entirely (offline).
// Serve the cached root shell so SvelteKit can boot.
return caches.match('/') as Promise<Response>;
})
);
return;
}
});