Spaces:

soiz1
/

dev-tools

Running

App Files Files Community

soiz1 commited on May 19

Commit

966f2f5

verified ·

1 Parent(s): e80644a

Update index.html

Browse files

Files changed (1) hide show

index.html +37 -85

index.html CHANGED Viewed

@@ -1,102 +1,54 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
-  <meta charset="UTF-8">
-  <title>1ファイル Service Worker 通信ログ</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>
 <body>
-  <h1>Service Worker 通信ログ</h1>
-  <div id="log">Service Worker を登録中...</div>
-  <!-- Service Worker Script as text -->
-  <script id="sw-script" type="javascript/worker">
-    self.addEventListener('fetch', event => {
-      const { request } = event;
-      const url = request.url;
-      const method = request.method;
-      event.respondWith(
-        fetch(request)
-          .then(response => {
-            const clone = response.clone();
-            clone.text().then(body => {
-              self.clients.matchAll().then(clients => {
-                clients.forEach(client => {
-                  client.postMessage({
-                    type: 'fetch-log',
-                    method,
-                    url,
-                    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',
-                  method,
-                  url,
-                  error: error.toString()
-                });
-              });
-            });
-            throw error;
-          })
-      );
-    });
-  </script>
-  <!-- Register Service Worker from inline script -->
   <script>
-    const swCode = document.getElementById('sw-script').textContent;
-    const blob = new Blob([swCode], { type: 'application/javascript' });
-    const swUrl = URL.createObjectURL(blob);
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register(swUrl).then(() => {
-        document.getElementById('log').innerHTML = '✅ Service Worker 登録完了。通信ログを表示します。';
-      }).catch(error => {
-        document.getElementById('log').innerHTML = '❌ 登録失敗: ' + error.message;
       });
-      navigator.serviceWorker.addEventListener('message', event => {
-        const data = event.data;
-        const div = document.createElement('div');
-        div.className = data.type === 'fetch-log' ? 'success' : 'error';
-        if (data.type === 'fetch-log') {
-          div.innerHTML = `
-            ✅ [${data.method}] ${data.url} — ${data.status}<br>
-            <pre>${data.body}</pre>
-          `;
-        } else if (data.type === 'fetch-error') {
-          div.innerHTML = `
-            ❌ [${data.method}] ${data.url}<br>
-            エラー: ${data.error}
-          `;
-        }
-        document.getElementById('log').appendChild(div);
-      });
     }
-  </script>
-  <!-- 通信テスト用 -->
-  <script>
-    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 Service Worker サンプル</title>
 </head>
 <body>
+  <h1>Blob Service Worker デモ</h1>
+  <button id="fetch-button">データ取得</button>
   <script>
+    // 1. Service Worker のコードを文字列として用意
+    const swCode = `
+      self.addEventListener('install', event => {
+        console.log('[SW] Installed');
+        self.skipWaiting(); // 即時有効化（開発用）
+      });
+      self.addEventListener('activate', event => {
+        console.log('[SW] Activated');
+        event.waitUntil(self.clients.claim());
       });
+      self.addEventListener('fetch', event => {
+        console.log('[SW] Fetch intercepted:', event.request.url);
+      });
+    `;
+    // 2. Blob を作成し、オブジェクトURLに変換
+    const blob = new Blob([swCode], { type: 'application/javascript' });
+    const blobUrl = URL.createObjectURL(blob);
+    // 3. Service Worker を登録
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register(blobUrl)
+        .then(reg => {
+          console.log('[Main] Service Worker registered from Blob:', reg.scope);
+        })
+        .catch(err => {
+          console.error('[Main] Registration failed:', err);
+        });
     }
+    // 4. デモ用：ボタンクリックで fetch 通信
+    document.getElementById('fetch-button').addEventListener('click', () => {
+      fetch('https://jsonplaceholder.typicode.com/posts/1')
+        .then(res => res.json())
+        .then(data => {
+          console.log('[Main] Fetched data:', data);
+        });
+    });
   </script>
 </body>
 </html>