add file handler support to PWA

src/dong-io.ts

···
   });
 };
 
-const uint8array64 = (arru8: Uint8Array) => {
-  if ("toBase64" in arru8) return arru8.toBase64();
-
-  function _arrayBufferToBase64(bytes: Uint8Array) {
-    var binary = "";
-    var len = bytes.byteLength;
-    for (var i = 0; i < len; i++) {
-      binary += String.fromCharCode(bytes[i]);
-    }
-    return btoa(binary);
-  }
-  return _arrayBufferToBase64(arru8);
-};
-
 export const createDong = async (
   image: File,
   audio: File
···
 
 export async function readDong(dongFile: File): Promise<
   | {
-      image: { data: Uint8Array; b64?: string; mime: string };
-      audio: { data: Uint8Array; b64?: string; mime: string };
+      image: { data: Uint8Array; mime: string };
+      audio: { data: Uint8Array; mime: string };
     }
   | string
 > {
···
   return {
     image: {
       mime: imgMimeType,
-      data: uint8array64(imageBytes),
-      b64: uint8array64(imageBytes),
+      data: imageBytes,
     },
     audio: {
       mime: audMimeType,
-      data: uint8array64(audioBytes),
-      b64: uint8array64(audioBytes),
+      data: audioBytes,
     },
   };
 }

src/pages/index.astro

···
 <Base title="Dong Web">
   <script>
     import { createDong, download, readDong } from "../dong-io";
-    
+
     class CreateDong extends HTMLElement {
       connectedCallback() {
         // create input
···
     }
 
     class LoadDong extends HTMLElement {
+      // do not append as this is only for playing audio
+      // loaded here to prevent overlaying the sound
+      image = document.createElement("img");
+      audio = new Audio();
+
       connectedCallback() {
         // create input
         const form = document.createElement("form");
···
         const dongSelect = document.createElement("input");
         // image
         const errormsg = document.createElement("div");
-        const image = document.createElement("img");
-
-        // do not append as this is only for playing audio
-        // loaded here to prevent overlaying the sound
-        const audio = new Audio();
 
         dongSelect.type = "file";
         dongSelect.accept = ".dong";
···
         form.appendChild(dongLabel);
 
         this.appendChild(form);
-        this.appendChild(image);
+        this.appendChild(this.image);
         this.appendChild(errormsg);
 
         // functionality
···
             return;
           }
 
-          image.src = `data:${res.image.mime};base64,${res.image.b64}`;
+          this.image.src = URL.createObjectURL(new Blob([res.image.data]));
 
           // audio play
-          audio.src = `data:${res.audio.mime};base64,${res.audio.data}`;
-          audio.play();
+          this.audio.src = URL.createObjectURL(new Blob([res.audio.data]));
+          this.audio.play();
         });
       }
     }
 
     customElements.define("create-dong", CreateDong);
     customElements.define("load-dong", LoadDong);
+
+    async function handleFile(file: File) {
+      const load_dong = document.getElementById("load") as LoadDong;
+      const res = await readDong(file);
+      if (typeof res === "string") return;
+      load_dong.image.src = URL.createObjectURL(new Blob([res.image.data]));
+      load_dong.audio.src = URL.createObjectURL(new Blob([res.audio.data]));
+      load_dong.audio.play();
+    }
+
+    // if ("LaunchParams" in window && 'launchQueue' in window && 'files' in window.LaunchParams.prototype) {
+    //   window.launchQueue.setConsumer((launchParams) => {
+    //     if (launchParams.files && launchParams.files.length) {
+    //       handleFile(launchParams.files[0]);
+    //     }
+    //   });
+    // }
+
+    if ("launchQueue" in window && "LaunchParams" in window) {
+      (window as any).launchQueue.setConsumer(
+        async (launchParams: { files: any[] }) => {
+          if (!launchParams.files.length) {
+            return;
+          }
+          const fileHandle = launchParams.files[0];
+          const blob: Blob = await fileHandle.getFile();
+          handleFile(new File([blob], "", { type: blob.type }));
+        }
+      );
+    }
   </script>
 
   <style slot="head" is:inline>
···
   <hr />
 
   <!-- creation -->
-  <create-dong></create-dong>
+  <create-dong id="create"></create-dong>
 
   <hr />
 
   <!-- loading -->
-  <load-dong></load-dong>
+  <load-dong id="load"></load-dong>
 </Base>

src/pages/manifest.json.ts

···
       start_url: "/",
       display: "standalone",
       prefer_related_applications: false,
+      file_handlers: [
+        {
+          action: "/",
+          accept: {
+            "application/prs.vielle.dong": [".dong"], 
+          }
+        }
+      ]
     }),
     {
       headers: {