add a progress bar of download

oka4shi · oka4shi · commit 410617c5b1e0 · 2025-06-16T20:32:11.000+09:00
diff --git a/app/index.html b/app/index.html
@@ -8,6 +8,7 @@
     <body>
         <h1>GitHub Artifact プレビュー</h1>
         <div>
+            <progress id="progress" value="0"></progress>
             <p id="result" />
         </div>
         <script type="module" src="/src/main.ts"></script>
diff --git a/app/src/lib/fetch.ts b/app/src/lib/fetch.ts
@@ -27,19 +27,46 @@ export const fetchDownloadUrl = async (
 
 export const downloadFile = async (
     url: string,
-): Promise<Result<ArrayBuffer>> => {
+    onProgress: (progress: number) => void = () => {},
+): Promise<Result<Response>> => {
     try {
         const resp = await fetch(url);
 
         if (!resp.ok) {
             return {
                 ok: false,
-                message: "zipファイルの取得に失敗しました",
+                message: `zipファイルの取得に失敗しました: ${resp.statusText}`,
                 error: new Error(`HTTP error!: ${resp.statusText}`),
             };
         }
 
-        return { ok: true, value: await resp.arrayBuffer() };
+        const size = Number(resp.headers.get("Content-Length") ?? "-1");
+
+        return {
+            ok: true,
+            value: new Response(
+                new ReadableStream({
+                    async start(controller) {
+                        const reader = resp.body?.getReader();
+                        let chunk = 0;
+
+                        async function read() {
+                            const result = await reader?.read();
+
+                            if (result && !result.done) {
+                                chunk += result.value.length;
+                                onProgress(chunk / size);
+
+                                controller.enqueue(result.value);
+                                return await read();
+                            }
+                        }
+                        await read();
+                        controller.close();
+                    },
+                }),
+            ),
+        };
     } catch (error) {
         return {
             ok: false,
diff --git a/app/src/main.ts b/app/src/main.ts
@@ -1,3 +1,4 @@
+import "./style.css";
 import { downloadFile, fetchDownloadUrl } from "./lib/fetch";
 
 const main = async () => {
@@ -10,13 +11,29 @@ const main = async () => {
         return result.message;
     }
 
+    const progressBar = document.getElementById("progress");
+    const status = document.getElementById("result");
+
     const downloadUrl = result.value;
-    const result1 = await downloadFile(downloadUrl);
+    const result1 = await downloadFile(downloadUrl, (progress) => {
+        if (progress < 0) {
+            return;
+        }
+
+        if (progressBar) {
+            progressBar.setAttribute("value", String(progress));
+            progressBar.innerText = `${Math.floor(progress * 100)}%`;
+        }
+        if (status) {
+            status.innerText = `ファイルをダウンロードしています……: ${Math.floor(progress * 100)}%`;
+        }
+    });
+
     if (!result1.ok) {
         return result1.message;
     }
 
-    const buf = result1.value;
+    const buf = await result1.value.arrayBuffer();
     const view = new DataView(buf);
 
     // end of central directory record(EOCD)を探す
