diff --git a/src/lib/storage.ts b/src/lib/storage.ts new file mode 100644 index 0000000..51d6cb4 --- /dev/null +++ b/src/lib/storage.ts @@ -0,0 +1,34 @@ +const localforage = import('localforage'); // Can fail on node + +async function ensure_persisted() { + if (typeof navigator !== 'object' || !navigator.storage || !navigator.storage.persist) + return false; + return await navigator.storage.persist(); +} + +export async function storage_is_volatile(): Promise { + if (typeof navigator !== 'object' || !navigator.storage || !navigator.storage.persisted) + return undefined; + return !(await navigator.storage.persisted()); +} + +export async function storage_usage_ratio(): Promise { + if (typeof navigator !== 'object' || !navigator.storage || !navigator.storage.estimate) + return undefined; + const { quota, usage } = await navigator.storage.estimate(); + if (!quota || !usage) return undefined; + return usage / quota; +} + +export async function store_locally(key: string, value: any): Promise { + if (typeof window !== 'object') return false; + const persisted = await ensure_persisted(); + await (await localforage).setItem(key, value); + return persisted; +} + +export async function get_from_local_store(key: string): Promise { + if (typeof window !== 'object') return undefined; // Browser-only + const element = await (await localforage).getItem(key); + return element as T; +} diff --git a/src/routes/_myWalletStore.ts b/src/routes/_myWalletStore.ts index 951d1a9..00265db 100644 --- a/src/routes/_myWalletStore.ts +++ b/src/routes/_myWalletStore.ts @@ -1,15 +1,14 @@ import { writable } from 'svelte/store'; +import { get_from_local_store, store_locally } from '$lib/storage'; -const localforage = import('localforage'); // Can fail on node +const WALLET_STORE_KEY = 'wallet'; async function walletSet(value: string[]) { - if (typeof window !== 'object') return; - await (await localforage).setItem('wallet', value); + await store_locally(WALLET_STORE_KEY, value); } async function walletGet(): Promise { - if (typeof window !== 'object') return []; // Browser-only - return (await (await localforage).getItem('wallet')) || []; + return (await get_from_local_store(WALLET_STORE_KEY)) || []; } function createWalletStore() { diff --git a/src/routes/borne/_config.ts b/src/routes/borne/_config.ts index 29d742d..04e97d7 100644 --- a/src/routes/borne/_config.ts +++ b/src/routes/borne/_config.ts @@ -1,18 +1,17 @@ import type { ConfigProperties } from '$lib/borne_config'; import { DEFAULT_CONFIG } from '$lib/borne_config'; +import { get_from_local_store, store_locally } from '$lib/storage'; -const localforage = import('localforage'); // Can fail on node const STORAGE_KEY = 'borne_config'; export async function save_config(config: ConfigProperties) { - if (typeof window !== 'object') return; - await (await localforage).setItem(STORAGE_KEY, config); + await store_locally(STORAGE_KEY, config); } export async function load_config(): Promise { if (typeof window !== 'object') return DEFAULT_CONFIG; try { - const config = await (await localforage).getItem(STORAGE_KEY); + const config = await get_from_local_store(STORAGE_KEY); return (config as ConfigProperties) || DEFAULT_CONFIG; } catch (e) { console.error('Unable to load config', e); diff --git a/src/routes/wallet.svelte b/src/routes/wallet.svelte index 021ac80..53101e2 100644 --- a/src/routes/wallet.svelte +++ b/src/routes/wallet.svelte @@ -7,8 +7,10 @@ import invitedTo from './_invitedToStore'; import wallet from './_myWalletStore'; + import { storage_is_volatile, storage_usage_ratio } from '$lib/storage'; let codeFound: string | undefined = undefined; + let is_volatile = storage_is_volatile();

Mon carnet

@@ -33,12 +35,39 @@ {/await} +{/each} +{#if $wallet.length > 0} + {#await is_volatile then can_loose_data} + {#if can_loose_data} +
+

+ Attention ! Votre carnet n'est pas enregistré de manière permanente par votre + navigateur. +

+ +
+ {/if} + {/await} + {#await storage_usage_ratio() then usage_ratio} + {#if usage_ratio && usage_ratio > 0.7} + + Attention ! + {(usage_ratio * 100).toFixed(0)}% du stockage disponible de votre navigateur est utilisé. + + {/if} + {/await} {:else}

Aucun certificat dans votre carnet pour le moment. Après avoir scanné un certificat, vous pourrez l'ajouter à votre carnet pour y avoir accès ici.

-{/each} +{/if}