Merge pull request #1 from oka4shi/feat/progress

oka4shi · web-flow · commit c8b6bf110089 · 2025-06-16T20:34:34.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)を探す
@@ -100,7 +117,6 @@ const main = async () => {
     // blobに変換して遷移
     const blob = new Blob([fileData], { type: "application/pdf" });
     const blobUrl = window.URL.createObjectURL(blob);
-    history.pushState(null, "", `?dist=${encodeURIComponent(url)}`);
     window.location.href = blobUrl;
 };
 
@@ -111,6 +127,7 @@ const main = async () => {
     }
 
     const error = await main();
+
     if (error) {
         if (elm) {
             elm.innerText = error;
diff --git a/workers/package.json b/workers/package.json
@@ -4,8 +4,8 @@
     "private": true,
     "scripts": {
         "deploy": "wrangler deploy",
-        "dev": "wrangler dev",
-        "start": "wrangler dev",
+        "dev": "wrangler dev --env local",
+        "start": "wrangler dev --env local",
         "test": "vitest",
         "cf-typegen": "wrangler types"
     },
