service worker for pwa

2 files changed, 25 insertions, 9 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 5752491b..11e33dbf 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -168,14 +168,16 @@
         </a>
       {/if}
 
+      {#if user.username !== subject.username}
       <button
         type="button"
         on:click={toggleDetails}
         class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex justify-center w-full"
       >
-        <Icon icon="edit" style="w-8 mr-2" />
-        <div class="mt-1">{$t("user.details")}</div>
+        <Icon icon="profile" style="w-8 mr-2" />
+        <div class="mt-1">{$t("user.info")}</div>
       </button>
+      {/if}
 
       {#if user?.admin && user.username !== subject.username}
         <form class="w-full flex" on:submit|preventDefault={reset}>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index f0ab743a..9443c063 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -102,6 +102,21 @@
   let reset = () =>
     (dragDisabled =
       user?.username !== subject?.username || window.innerWidth < 768);
+
+  let installPrompt;
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("beforeinstallprompt", (event) => {
+      event.preventDefault();
+      installPrompt = event;
+    });
+  });
+
+  let install = async () => {
+    if (!installPrompt) return;
+    await installPrompt.prompt();
+    installPrompt = null;
+  };
 </script>
 
 <svelte:window on:resize={reset} />
@@ -148,18 +163,17 @@
         </button>
       </a>
 
-      <a href={`/${user.username}/items/create`} class="contents">
+      {#if installPrompt}
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow basis-full"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow basis-full fixed bottom-16"
+          on:click={install}
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="plus" style="w-8 mx-auto" />
-            <div class="my-auto text-xl whitespace-nowrap">
-              {$t("items.add")}
-            </div>
+            <Icon icon="save" style="w-8 mx-auto invert" />
+            <div class="my-auto text-xl whitespace-nowrap">Install app</div>
           </div>
         </button>
-      </a>
+      {/if}
     </div>
   {/if}