Try to persist data when installed as a PWA

webapp/src/lib/layouts/Main.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { Separator } from '$lib/components/ui/separator'
 import { createConversionConfig } from '$lib/contexts/config.svelte'
 import { createDeviceContext } from '$lib/contexts/device.svelte'
 import { createFilesContext } from '$lib/contexts/files.svelte'
@@ -9,7 +8,9 @@ import { createRenderedContext } from '$lib/contexts/rendered.svelte'
 import ConnectSection from '$lib/layouts/connect/ConnectSection.svelte'
 import EditSection from '$lib/layouts/edit/EditSection.svelte'
 import WriteSection from '$lib/layouts/write/WriteSection.svelte'
+import { effect } from '$lib/utils.svelte'
 import { onMount } from 'svelte'
+import { MediaQuery } from 'svelte/reactivity'
 import PermissionDeniedDialog from './dialog/PermissionDeniedDialog.svelte'
 import PermissionRequestDialog from './dialog/PermissionRequestDialog.svelte'
 import UnsupportedDialog from './dialog/UnsupportedDialog.svelte'
@@ -21,6 +22,27 @@ const filesCtx = createFilesContext()
 const imageCtx = createImageContext(filesCtx)
 createRenderedContext(imageCtx, config)
 
+const isStandalone = new MediaQuery('(display-mode: standalone)')
+
+effect(
+  () => [isStandalone.current],
+  async () => {
+    console.log('App is running in standalone mode:', isStandalone.current)
+    if (!isStandalone.current) return
+    if (!navigator.storage || !navigator.storage.persist) return
+    if (await navigator.storage.persisted()) {
+      console.log('Storage is already persisted')
+      return
+    }
+    try {
+      const persisted = await navigator.storage.persist()
+      console.log('Storage persisted:', persisted)
+    } catch (e) {
+      console.error('Error while requesting storage persistence:', e)
+    }
+  },
+)
+
 onMount(async () => {
   await midiCtx.initialize()
 })