Spaces:

soiz1
/

dev-tools

Running

App Files Files Community

soiz1 commited on May 19

Commit

7ee2971

verified ·

1 Parent(s): b0f532e

Update index.html

Browse files

Files changed (1) hide show

index.html +55 -123

index.html CHANGED Viewed

@@ -1,140 +1,72 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
-  <meta charset="UTF-8" />
-  <title>1ファイル完結型 Service Worker via iframe+Blob</title>
-  <style>
-    body { font-family: sans-serif; padding: 1em; }
-    #log { margin-top: 1em; font-size: 14px; }
-    .success { color: green; margin-bottom: 1em; }
-    .error { color: red; margin-bottom: 1em; }
-    pre { background: #f9f9f9; padding: 0.5em; border: 1px solid #ccc; }
-  </style>
-</head><script src="/dev-tools.js"></script>
 <body>
-  <h1>1ファイルで完結する Service Worker (iframe + Blob)</h1>
-  <div id="log">Service Worker の登録を試みています…</div>
-  <script>
-    // iframe内のHTMLを文字列として用意（Service Workerスクリプト含む）
-    const iframeHTML = `
-      <!DOCTYPE html>
-      <html>
-      <head><title>SW iframe</title></head>
-      <body>
-        <script type="text/javascript">
-          // Service Worker スクリプトを文字列で用意
-          const swCode = \`
-            self.addEventListener('fetch', event => {
-              const url = event.request.url;
-              const method = event.request.method;
-              event.respondWith(
-                fetch(event.request)
-                  .then(response => {
-                    const clone = response.clone();
-                    clone.text().then(body => {
-                      self.clients.matchAll().then(clients => {
-                        clients.forEach(client => {
-                          client.postMessage({
-                            type: 'fetch-log',
-                            url,
-                            method,
-                            status: response.status,
-                            body: body.slice(0, 200)
-                          });
-                        });
-                      });
-                    });
-                    return response;
-                  })
-                  .catch(error => {
-                    self.clients.matchAll().then(clients => {
-                      clients.forEach(client => {
-                        client.postMessage({
-                          type: 'fetch-error',
-                          url,
-                          method,
-                          error: error.toString()
-                        });
-                      });
-                    });
-                    throw error;
-                  })
-              );
-            });
-          \`;
-          // Blob URLとして作成
-          const blob = new Blob([swCode], { type: 'application/javascript' });
-          const swBlobUrl = URL.createObjectURL(blob);
-          // Service Worker 登録
-          if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register(swBlobUrl)
-              .then(() => {
-                parent.postMessage({ type: 'sw-registered' }, '*');
-              })
-              .catch(err => {
-                parent.postMessage({ type: 'sw-error', error: err.toString() }, '*');
-              });
-            // Service Worker からのメッセージを受け取り親に中継
-            navigator.serviceWorker.addEventListener('message', event => {
-              parent.postMessage({ type: 'sw-message', data: event.data }, '*');
-            });
-          }
-        <\/script>
-      </body>
-      </html>
-    `;
-    // Blob URLとして iframe のページを作る
-    const iframeBlob = new Blob([iframeHTML], { type: 'text/html' });
-    const iframeUrl = URL.createObjectURL(iframeBlob);
-    // iframe要素作成
     const iframe = document.createElement('iframe');
     iframe.src = iframeUrl;
-    iframe.style.display = 'none'; // 表示不要
     document.body.appendChild(iframe);
-    // メッセージ受け取り処理
-    const logDiv = document.getElementById('log');
-    window.addEventListener('message', event => {
-      const data = event.data;
-      if (!data || !data.type) return;
-      if (data.type === 'sw-registered') {
-        logDiv.textContent = '✅ Service Worker 登録完了 (iframe 内)';
-      }
-      else if (data.type === 'sw-error') {
-        logDiv.textContent = '❌ Service Worker 登録失敗: ' + data.error;
-      }
-      else if (data.type === 'sw-message') {
-        const msg = data.data;
-        const div = document.createElement('div');
-        div.className = msg.type === 'fetch-log' ? 'success' : 'error';
-        if (msg.type === 'fetch-log') {
-          div.innerHTML = \`
-            ✅ [\${msg.method}] \${msg.url} — \${msg.status}<br>
-            <pre>\${msg.body}</pre>
-          \`;
-        } else if (msg.type === 'fetch-error') {
-          div.innerHTML = \`
-            ❌ [\${msg.method}] \${msg.url}<br>
-            エラー: \${msg.error}
-          \`;
-        }
-        logDiv.appendChild(div);
-      }
     });
-    // 動作確認用fetchを親ページから実行
-    fetch('https://jsonplaceholder.typicode.com/posts/1');
-    fetch('https://httpstat.us/404');
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ja">
 <head>
+  <meta charset="utf-8">
+  <title>Blob + iframe で Service Worker</title>
+  <style>pre{background:#f0f0f0;padding:4px;margin:4px 0;}</style>
+</head>
 <body>
+  <h1>通信ログ</h1>
+  <div id="log"></div>
+  <!-- ① SW コード埋め込み -->
+  <script id="sw-code" type="text/plain">
+self.addEventListener('fetch', event => {
+  const { request } = event;
+  event.respondWith(
+    fetch(request).then(res => {
+      res.clone().text().then(body => {
+        self.clients.matchAll().then(clients =>
+          clients.forEach(c =>
+            c.postMessage({ type:'log', url:request.url, status:res.status, snippet:body.slice(0,100) })
+          )
+        );
+      });
+      return res;
+    }).catch(err => {
+      self.clients.matchAll().then(clients =>
+        clients.forEach(c =>
+          c.postMessage({ type:'error', url:request.url, error:err.toString() })
+        )
+      );
+      throw err;
+    })
+  );
+});
+  </script>
+  <!-- ②–⑤ メインスクリプト -->
+  <script>
+    const swSource = document.getElementById('sw-code').textContent;
+    const swBlobUrl = URL.createObjectURL(new Blob([swSource], { type:'application/javascript' }));
+    const iframeHtml = `
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"></head><body>
+<script>
+  navigator.serviceWorker.register('${swBlobUrl}')
+    .catch(e=>console.error('SW登録失敗',e));
+</script>
+</body></html>`;
+    const iframeUrl = URL.createObjectURL(new Blob([iframeHtml], { type:'text/html' }));
     const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
     iframe.src = iframeUrl;
     document.body.appendChild(iframe);
+    navigator.serviceWorker.addEventListener('message', e => {
+      const d = e.data;
+      const pre = document.createElement('pre');
+      pre.textContent = d.type==='log'
+        ? `[${d.status}] ${d.url}\n…${d.snippet}`
+        : `⚠️ ERROR: ${d.url}\n→ ${d.error}`;
+      document.getElementById('log').appendChild(pre);
     });
+    // テスト fetch
+    fetch('https://jsonplaceholder.typicode.com/todos/1');
+    fetch('https://httpstat.us/500');
   </script>
 </body>
 </html>