Amélioration de stockage local

Utilisation de l'API expérimentale StorageManager pour demander au navigateur un stockage plus pérenne.

Fixes #69

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<boolean | undefined> {
+	if (typeof navigator !== 'object' || !navigator.storage || !navigator.storage.persisted)
+		return undefined;
+	return !(await navigator.storage.persisted());
+}
+
+export async function storage_usage_ratio(): Promise<number | undefined> {
+	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<boolean> {
+	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<T>(key: string): Promise<T | undefined> {
+	if (typeof window !== 'object') return undefined; // Browser-only
+	const element = await (await localforage).getItem(key);
+	return element as T;
+}

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<string[]> {
-	if (typeof window !== 'object') return []; // Browser-only
-	return (await (await localforage).getItem('wallet')) || [];
+	return (await get_from_local_store<string[]>(WALLET_STORE_KEY)) || [];
 }
 
 function createWalletStore() {

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<ConfigProperties> {
 	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);

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();
 </script>
 
 <h3>Mon carnet</h3>
@@ -33,12 +35,39 @@
 			<Certificate {info} with_fullscreen={!$invitedTo.eventId} />
 		</div>
 	{/await}
+{/each}
+{#if $wallet.length > 0}
+	{#await is_volatile then can_loose_data}
+		{#if can_loose_data}
+			<div class="alert alert-warning row">
+				<p class="col-12">
+					<strong>Attention !</strong> Votre carnet n'est pas enregistré de manière permanente par votre
+					navigateur.
+				</p>
+				<button
+					class="btn btn-primary btn-sm col align-self-end"
+					on:click={async () => {
+						await navigator.storage.persist();
+						is_volatile = storage_is_volatile();
+					}}>Enregistrer</button
+				>
+			</div>
+		{/if}
+	{/await}
+	{#await storage_usage_ratio() then usage_ratio}
+		{#if usage_ratio && usage_ratio > 0.7}
+			<Alert color="warning" fade={false}>
+				<strong>Attention !</strong>
+				{(usage_ratio * 100).toFixed(0)}% du stockage disponible de votre navigateur est utilisé.
+			</Alert>
+		{/if}
+	{/await}
 {:else}
 	<p>
 		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.
 	</p>
-{/each}
+{/if}
 
 <CodeFound bind:codeFound />