// ===== main.js =====
 
// Worker の生成
// worker.js はメインスクリプトとは別のファイルとして用意する
const worker = new Worker('worker.js');
 
// Worker にデータを送信
worker.postMessage({
  type: 'sort',
  data: generateLargeArray(1_000_000)
});
 
// Worker からの結果を受信
worker.onmessage = (event) => {
  const { type, result, duration } = event.data;
  console.log(`[${type}] 完了: ${duration}ms`);
  renderResult(result);
};
 
// Worker 内でのエラーをキャッチ
worker.onerror = (error) => {
  console.error('Worker error:', error.message);
  console.error('ファイル:', error.filename);
  console.error('行番号:', error.lineno);
};
 
// Worker が不要になったら終了（リソース解放）
// worker.terminate();
 
 
// ===== worker.js =====
 
// Worker 側のグローバルスコープは `self`（= DedicatedWorkerGlobalScope）
// `window` や `document` は存在しない
 
self.onmessage = (event) => {
  const { type, data } = event.data;
  const start = performance.now();
 
  switch (type) {
    case 'sort': {
      const sorted = data.sort((a, b) => a - b);
      const duration = Math.round(performance.now() - start);
      self.postMessage({ type, result: sorted, duration });
      break;
    }
    case 'filter': {
      const filtered = data.filter(x => x > 0);
      const duration = Math.round(performance.now() - start);
      self.postMessage({ type, result: filtered, duration });
      break;
    }
    default:
      self.postMessage({ type: 'error', message: `未知のタイプ: ${type}` });
  }
};
 
// Worker 内からの自発的な終了
// self.close();

// ===== main.js =====
 
// type: 'module' を指定すると ES Module として読み込まれる
const worker = new Worker('worker.js', { type: 'module' });
 
worker.postMessage({ numbers: [5, 3, 8, 1, 9, 2, 7] });
 
worker.onmessage = (event) => {
  console.log('統計結果:', event.data);
};
 
 
// ===== worker.js (Module Worker) =====
 
// ES Module の import が使える
import { mean, median, standardDeviation } from './statistics.js';
 
self.onmessage = (event) => {
  const { numbers } = event.data;
 
  const result = {
    mean: mean(numbers),
    median: median(numbers),
    stdDev: standardDeviation(numbers),
    count: numbers.length
  };
 
  self.postMessage(result);
};
 
 
// ===== statistics.js =====
 
export function mean(arr) {
  return arr.reduce((sum, v) => sum + v, 0) / arr.length;
}
 
export function median(arr) {
  const sorted = [...arr].sort((a, b) => a - b);
  const mid = Math.floor(sorted.length / 2);
  return sorted.length % 2 !== 0
    ? sorted[mid]
    : (sorted[mid - 1] + sorted[mid]) / 2;
}
 
export function standardDeviation(arr) {
  const avg = mean(arr);
  const squareDiffs = arr.map(v => (v - avg) ** 2);
  return Math.sqrt(mean(squareDiffs));
}

// Worker のコードを文字列として定義
function createInlineWorker(workerFunction) {
  const blob = new Blob(
    [`(${workerFunction.toString()})()`],
    { type: 'application/javascript' }
  );
  const url = URL.createObjectURL(blob);
  const worker = new Worker(url);
 
  // Blob URL はすぐに解放可能（Worker は既にロード済み）
  URL.revokeObjectURL(url);
 
  return worker;
}
 
// 使用例
const worker = createInlineWorker(function() {
  self.onmessage = (event) => {
    const { data } = event;
    // フィボナッチ数列の計算（再帰ではなく反復で実装）
    function fibonacci(n) {
      if (n <= 1) return n;
      let prev = 0, curr = 1;
      for (let i = 2; i <= n; i++) {
        [prev, curr] = [curr, prev + curr];
      }
      return curr;
    }
    self.postMessage({
      input: data.n,
      result: fibonacci(data.n)
    });
  };
});
 
worker.postMessage({ n: 45 });
worker.onmessage = (e) => console.log(e.data);
// { input: 45, result: 1134903170 }

// ===== WorkerPool.js =====
 
class WorkerPool {
  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
    this.poolSize = poolSize;
    this.workers = [];
    this.taskQueue = [];
    this.workerStatus = [];  // true = idle, false = busy
 
    // Worker をプールサイズ分生成
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerScript, { type: 'module' });
      this.workers.push(worker);
      this.workerStatus.push(true);  // 初期状態は idle
    }
  }
 
  // タスクを投入し、Promise で結果を返す
  exec(data) {
    return new Promise((resolve, reject) => {
      const task = { data, resolve, reject };
 
      // 空いている Worker を探す
      const idleIndex = this.workerStatus.indexOf(true);
      if (idleIndex !== -1) {
        this._runTask(idleIndex, task);
      } else {
        // 全 Worker がビジーならキューに入れる
        this.taskQueue.push(task);
      }
    });
  }
 
  _runTask(workerIndex, task) {
    this.workerStatus[workerIndex] = false;  // busy にする
    const worker = this.workers[workerIndex];
 
    const onMessage = (event) => {
      worker.removeEventListener('message', onMessage);
      worker.removeEventListener('error', onError);
      this.workerStatus[workerIndex] = true;  // idle に戻す
 
      task.resolve(event.data);
      this._processQueue();  // キューに待ちタスクがあれば処理
    };
 
    const onError = (error) => {
      worker.removeEventListener('message', onMessage);
      worker.removeEventListener('error', onError);
      this.workerStatus[workerIndex] = true;
 
      task.reject(error);
      this._processQueue();
    };
 
    worker.addEventListener('message', onMessage);
    worker.addEventListener('error', onError);
    worker.postMessage(task.data);
  }
 
  _processQueue() {
    if (this.taskQueue.length === 0) return;
    const idleIndex = this.workerStatus.indexOf(true);
    if (idleIndex === -1) return;
    const task = this.taskQueue.shift();
    this._runTask(idleIndex, task);
  }
 
  // 全 Worker を終了
  terminate() {
    this.workers.forEach(w => w.terminate());
    this.workers = [];
    this.workerStatus = [];
    // キュー内の未処理タスクを reject
    this.taskQueue.forEach(task =>
      task.reject(new Error('WorkerPool terminated'))
    );
    this.taskQueue = [];
  }
 
  // プールの状態を取得
  get stats() {
    return {
      poolSize: this.poolSize,
      idle: this.workerStatus.filter(s => s).length,
      busy: this.workerStatus.filter(s => !s).length,
      queued: this.taskQueue.length
    };
  }
}
 
 
// ===== 使用例 =====
 
const pool = new WorkerPool('compute-worker.js', 4);
 
// 100 個のタスクを並列実行（最大 4 並列）
const tasks = Array.from({ length: 100 }, (_, i) => ({
  id: i,
  type: 'heavyComputation',
  payload: generateData(i)
}));
 
const results = await Promise.all(
  tasks.map(task => pool.exec(task))
);
 
console.log(`全 ${results.length} タスク完了`);
console.log('プール状態:', pool.stats);
 
// 使い終わったらリソースを解放
pool.terminate();

// ===== message-protocol.js =====
 
// メッセージ型の定義（TypeScript 併用時は interface / type で定義）
const MessageType = {
  // メインスレッド → Worker
  REQUEST_COMPUTE: 'REQUEST_COMPUTE',
  REQUEST_CANCEL:  'REQUEST_CANCEL',
 
  // Worker → メインスレッド
  RESPONSE_SUCCESS: 'RESPONSE_SUCCESS',
  RESPONSE_ERROR:   'RESPONSE_ERROR',
  PROGRESS_UPDATE:  'PROGRESS_UPDATE',
};
 
// リクエスト ID を生成するユーティリティ
let requestIdCounter = 0;
function generateRequestId() {
  return `req_${Date.now()}_${++requestIdCounter}`;
}
 
// ===== main.js =====
 
const pendingRequests = new Map();
 
function sendRequest(worker, payload) {
  return new Promise((resolve, reject) => {
    const requestId = generateRequestId();
 
    pendingRequests.set(requestId, {
      resolve,
      reject,
      startTime: performance.now()
    });
 
    worker.postMessage({
      type: MessageType.REQUEST_COMPUTE,
      requestId,
      payload
    });
  });
}
 
worker.onmessage = (event) => {
  const { type, requestId, data, error, progress } = event.data;
 
  switch (type) {
    case MessageType.RESPONSE_SUCCESS: {
      const pending = pendingRequests.get(requestId);
      if (pending) {
        pendingRequests.delete(requestId);
        pending.resolve(data);
      }
      break;
    }
    case MessageType.RESPONSE_ERROR: {
      const pending = pendingRequests.get(requestId);
      if (pending) {
        pendingRequests.delete(requestId);
        pending.reject(new Error(error));
      }
      break;
    }
    case MessageType.PROGRESS_UPDATE: {
      console.log(`[${requestId}] 進捗: ${progress}%`);
      // UI のプログレスバーを更新するなど
      break;
    }
  }
};
 
// 使用例: Promise ベースで Worker を呼び出す
async function processData(rawData) {
  try {
    const result = await sendRequest(worker, {
      operation: 'analyze',
      data: rawData
    });
    console.log('結果:', result);
  } catch (err) {
    console.error('処理失敗:', err.message);
  }
}
 
 
// ===== worker.js =====
 
self.onmessage = (event) => {
  const { type, requestId, payload } = event.data;
 
  if (type === MessageType.REQUEST_COMPUTE) {
    try {
      const totalSteps = 100;
      let result = [];
 
      for (let i = 0; i < totalSteps; i++) {
        // 進捗を定期的に報告
        if (i % 10 === 0) {
          self.postMessage({
            type: MessageType.PROGRESS_UPDATE,
            requestId,
            progress: Math.round((i / totalSteps) * 100)
          });
        }
        // 実際の計算処理
        result.push(compute(payload.data, i));
      }
 
      self.postMessage({
        type: MessageType.RESPONSE_SUCCESS,
        requestId,
        data: result
      });
    } catch (err) {
      self.postMessage({
        type: MessageType.RESPONSE_ERROR,
        requestId,
        error: err.message
      });
    }
  }
};

// ===== Structured Clone（コピー）と Transfer（移転）の比較 =====
 
// --- 方法 1: Structured Clone（デフォルト） ---
const buffer1 = new ArrayBuffer(100 * 1024 * 1024); // 100MB
console.log('送信前:', buffer1.byteLength); // 104857600
 
worker.postMessage(buffer1);  // コピーが発生（数十 ms）
console.log('送信後:', buffer1.byteLength); // 104857600（元のデータは残る）
 
 
// --- 方法 2: Transfer（所有権の移転） ---
const buffer2 = new ArrayBuffer(100 * 1024 * 1024); // 100MB
console.log('送信前:', buffer2.byteLength); // 104857600
 
worker.postMessage(buffer2, [buffer2]);  // 所有権を移転（ほぼ 0ms）
console.log('送信後:', buffer2.byteLength); // 0 （もうアクセスできない）
 
// 移転後に buffer2 を使おうとするとエラーにはならないが、
// byteLength は 0 になり、TypedArray のビューも空になる

// ===== main.js: 画像のグレースケール変換を Worker に委譲 =====
 
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
 
async function processImage(imageElement) {
  // 画像を ImageBitmap に変換
  const bitmap = await createImageBitmap(imageElement);
 
  // OffscreenCanvas を使って ImageData を取得
  const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);
  const offCtx = offscreen.getContext('2d');
  offCtx.drawImage(bitmap, 0, 0);
  const imageData = offCtx.getImageData(0, 0, bitmap.width, bitmap.height);
 
  // ImageData の内部バッファを Transfer で Worker に送信
  // imageData.data は Uint8ClampedArray、その buffer が ArrayBuffer
  const buffer = imageData.data.buffer;
 
  worker.postMessage(
    {
      type: 'grayscale',
      width: imageData.width,
      height: imageData.height,
      buffer: buffer
    },
    [buffer]  // buffer を Transfer
  );
}
 
worker.onmessage = (event) => {
  const { width, height, buffer } = event.data;
  const resultData = new ImageData(
    new Uint8ClampedArray(buffer),
    width,
    height
  );
  ctx.putImageData(resultData, 0, 0);
};
 
 
// ===== worker.js =====
 
self.onmessage = (event) => {
  const { type, width, height, buffer } = event.data;
 
  if (type === 'grayscale') {
    const pixels = new Uint8ClampedArray(buffer);
 
    // グレースケール変換
    for (let i = 0; i < pixels.length; i += 4) {
      const r = pixels[i];
      const g = pixels[i + 1];
      const b = pixels[i + 2];
      // 輝度の加重平均（ITU-R BT.709）
      const gray = Math.round(0.2126 * r + 0.7152 * g + 0.0722 * b);
      pixels[i] = gray;
      pixels[i + 1] = gray;
      pixels[i + 2] = gray;
      // pixels[i + 3] はアルファ値（変更しない）
    }
 
    // 処理済みバッファを Transfer で返送
    self.postMessage(
      { width, height, buffer: pixels.buffer },
      [pixels.buffer]
    );
  }
};

// ===== main.js =====
 
// Cross-Origin Isolation が必要（HTTP ヘッダーの設定）
// Cross-Origin-Opener-Policy: same-origin
// Cross-Origin-Embedder-Policy: require-corp
 
// 共有メモリの確保
const sharedBuffer = new SharedArrayBuffer(4 * 1024); // 4KB
const sharedArray = new Int32Array(sharedBuffer);
 
// 初期値の設定
sharedArray[0] = 0; // カウンター
 
// Worker に共有メモリを渡す（Transfer ではなく共有）
worker.postMessage({ sharedBuffer });
 
// メインスレッドでカウンターを安全にインクリメント
function incrementCounter() {
  const oldValue = Atomics.add(sharedArray, 0, 1);
  console.log(`カウンター: ${oldValue} → ${oldValue + 1}`);
}
 
// カウンターの値を安全に読み取り
function readCounter() {
  return Atomics.load(sharedArray, 0);
}
 
 
// ===== worker.js =====
 
self.onmessage = (event) => {
  const { sharedBuffer } = event.data;
  const sharedArray = new Int32Array(sharedBuffer);
 
  // Worker 側でもカウンターを安全にインクリメント
  for (let i = 0; i < 1000; i++) {
    Atomics.add(sharedArray, 0, 1);
  }
 
  // Atomics.wait / Atomics.notify による同期
  // Worker スレッドで値が変わるのを待つ
  // （メインスレッドでは Atomics.wait は使用不可）
  const result = Atomics.wait(sharedArray, 1, 0);
  // result: 'ok' | 'not-equal' | 'timed-out'
 
  self.postMessage({ done: true, counter: Atomics.load(sharedArray, 0) });
};

// ===== main.js（各ページに配置） =====
 
// Shared Worker の生成
// 同じ URL を指定すると、既存の Shared Worker に接続される
const sharedWorker = new SharedWorker('shared-worker.js');
 
// Shared Worker との通信は port を介して行う
const port = sharedWorker.port;
 
// ポートを開始（onmessage を使う場合は自動で開始される）
// port.start();  // addEventListener を使う場合は明示的に呼ぶ
 
// メッセージの送信
port.postMessage({
  type: 'increment',
  tabId: crypto.randomUUID()
});
 
// メッセージの受信
port.onmessage = (event) => {
  const { type, count, connections } = event.data;
  console.log(`カウント: ${count}, 接続タブ数: ${connections}`);
  document.getElementById('counter').textContent = count;
  document.getElementById('tabs').textContent = connections;
};
 
 
// ===== shared-worker.js =====
 
// 接続中のポート一覧
const ports = new Set();
let counter = 0;
 
self.onconnect = (event) => {
  const port = event.ports[0];
  ports.add(port);
 
  console.log(`新しい接続。現在の接続数: ${ports.size}`);
 
  port.onmessage = (msgEvent) => {
    const { type, tabId } = msgEvent.data;
 
    switch (type) {
      case 'increment':
        counter++;
        // 全接続先に通知（ブロードキャスト）
        broadcastToAll({
          type: 'update',
          count: counter,
          connections: ports.size
        });
        break;
 
      case 'getState':
        // リクエスト元のみに返信
        port.postMessage({
          type: 'state',
          count: counter,
          connections: ports.size
        });
        break;
    }
  };
 
  // 接続が閉じられたときのクリーンアップ
  port.addEventListener('close', () => {
    ports.delete(port);
    console.log(`切断。残接続数: ${ports.size}`);
  });
 
  // 接続時に現在の状態を送信
  port.postMessage({
    type: 'state',
    count: counter,
    connections: ports.size
  });
 
  port.start();
};
 
function broadcastToAll(message) {
  for (const port of ports) {
    try {
      port.postMessage(message);
    } catch (e) {
      // ポートが閉じている場合は削除
      ports.delete(port);
    }
  }
}

// ===== app.js（メインスクリプト） =====
 
// Service Worker の登録
async function registerServiceWorker() {
  if (!('serviceWorker' in navigator)) {
    console.log('Service Worker 未対応のブラウザ');
    return;
  }
 
  try {
    const registration = await navigator.serviceWorker.register('/sw.js', {
      // スコープ: この SW が制御するパスのプレフィックス
      scope: '/'
    });
 
    console.log('SW 登録成功:', registration.scope);
 
    // 更新の検出
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      console.log('新しい SW を検出:', newWorker.state);
 
      newWorker.addEventListener('statechange', () => {
        console.log('SW 状態変更:', newWorker.state);
        if (newWorker.state === 'activated') {
          // 新しい SW がアクティブになった
          // ユーザーにリロードを促す UI を表示するなど
          showUpdateNotification();
        }
      });
    });
  } catch (error) {
    console.error('SW 登録失敗:', error);
  }
}
 
// ページ読み込み後に登録
window.addEventListener('load', registerServiceWorker);

// ===== sw.js =====
 
const CACHE_VERSION = 'v2';
const STATIC_CACHE = `static-${CACHE_VERSION}`;
const DYNAMIC_CACHE = `dynamic-${CACHE_VERSION}`;
 
// プリキャッシュする静的アセット
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png',
  '/offline.html'
];
 
// ===== Install: 静的アセットのプリキャッシュ =====
self.addEventListener('install', (event) => {
  console.log('[SW] Install');
  event.waitUntil(
    caches.open(STATIC_CACHE)
      .then(cache => {
        console.log('[SW] プリキャッシュ開始');
        return cache.addAll(STATIC_ASSETS);
      })
      .then(() => {
        // 待機状態をスキップ（即座にアクティブ化）
        return self.skipWaiting();
      })
  );
});
 
// ===== Activate: 古いキャッシュの削除 =====
self.addEventListener('activate', (event) => {
  console.log('[SW] Activate');
  event.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames
            .filter(name => name !== STATIC_CACHE && name !== DYNAMIC_CACHE)
            .map(name => {
              console.log(`[SW] 古いキャッシュ削除: ${name}`);
              return caches.delete(name);
            })
        );
      })
      .then(() => {
        // 全クライアントを即座に制御下に置く
        return self.clients.claim();
      })
  );
});
 
// ===== Fetch: リクエストのインターセプト =====
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);
 
  // API リクエストには Network First 戦略
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
    return;
  }
 
  // 静的アセットには Cache First 戦略
  if (STATIC_ASSETS.includes(url.pathname)) {
    event.respondWith(cacheFirst(request));
    return;
  }
 
  // その他のリクエストには Stale While Revalidate 戦略
  event.respondWith(staleWhileRevalidate(request));
});
 
 
// ===== キャッシュ戦略の実装 =====
 
// Cache First: キャッシュ優先、なければネットワーク
async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) {
    return cached;
  }
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(STATIC_CACHE);
      cache.put(request, response.clone());
    }
    return response;
  } catch (error) {
    return caches.match('/offline.html');
  }
}
 
// Network First: ネットワーク優先、失敗時キャッシュ
async function networkFirst(request) {
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(DYNAMIC_CACHE);
      cache.put(request, response.clone());
    }
    return response;
  } catch (error) {
    const cached = await caches.match(request);
    return cached || new Response(
      JSON.stringify({ error: 'オフラインです' }),
      { headers: { 'Content-Type': 'application/json' } }
    );
  }
}
 
// Stale While Revalidate: キャッシュを即時返却しつつバックグラウンドで更新
async function staleWhileRevalidate(request) {
  const cache = await caches.open(DYNAMIC_CACHE);
  const cached = await cache.match(request);
 
  const fetchPromise = fetch(request)
    .then(response => {
      if (response.ok) {
        cache.put(request, response.clone());
      }
      return response;
    })
    .catch(() => cached);
 
  // キャッシュがあれば即時返却、なければネットワークを待つ
  return cached || fetchPromise;
}

// ===== app.js（メインスクリプト） =====
 
async function sendMessage(message) {
  // IndexedDB にメッセージを保存
  await saveToOutbox(message);
 
  // Background Sync の登録
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register('outbox-sync');
    console.log('Background Sync 登録完了');
  } catch (err) {
    console.error('Background Sync 未対応:', err);
    // フォールバック: 即座に送信を試みる
    await sendPendingMessages();
  }
}
 
 
// ===== sw.js =====
 
// sync イベントはネットワーク復帰時に自動発火
self.addEventListener('sync', (event) => {
  if (event.tag === 'outbox-sync') {
    event.waitUntil(sendPendingMessages());
  }
});
 
async function sendPendingMessages() {
  const messages = await getFromOutbox(); // IndexedDB から取得
 
  const results = await Promise.allSettled(
    messages.map(async (msg) => {
      const response = await fetch('/api/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(msg)
      });
 
      if (response.ok) {
        await removeFromOutbox(msg.id); // 送信成功したら削除
        return { id: msg.id, status: 'sent' };
      }
      throw new Error(`送信失敗: ${response.status}`);
    })
  );
 
  const failed = results.filter(r => r.status === 'rejected');
  if (failed.length > 0) {
    throw new Error(`${failed.length} 件の送信に失敗`);
    // エラーを throw すると、ブラウザは後で再試行する
  }
}

// ===== app.js =====
 
async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
 
  // 通知の許可を取得
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.log('通知が許可されていません');
    return;
  }
 
  // Push サブスクリプションの作成
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // 可視通知のみ（Chrome の要件）
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
 
  // サーバーにサブスクリプション情報を送信
  await fetch('/api/push-subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}
 
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  const rawData = atob(base64);
  return Uint8Array.from([...rawData].map(c => c.charCodeAt(0)));
}
 
 
// ===== sw.js =====
 
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
 
  const options = {
    body: data.body || 'お知らせがあります',
    icon: '/images/notification-icon.png',
    badge: '/images/badge.png',
    vibrate: [200, 100, 200],
    data: {
      url: data.url || '/',
      timestamp: Date.now()
    },
    actions: [
      { action: 'open', title: '開く' },
      { action: 'dismiss', title: '閉じる' }
    ]
  };
 
  event.waitUntil(
    self.registration.showNotification(data.title || '通知', options)
  );
});
 
// 通知のクリックハンドリング
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
 
  if (event.action === 'dismiss') {
    return;
  }
 
  const targetUrl = event.notification.data.url;
 
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true })
      .then(clientList => {
        // 既に開いているタブがあればフォーカス
        for (const client of clientList) {
          if (client.url === targetUrl && 'focus' in client) {
            return client.focus();
          }
        }
        // なければ新しいタブで開く
        return clients.openWindow(targetUrl);
      })
  );
});

// ===== main.js =====
 
const workerA = new Worker('workerA.js');
const workerB = new Worker('workerB.js');
 
// MessageChannel を作成
const channel = new MessageChannel();
 
// port1 を workerA に、port2 を workerB に Transfer
workerA.postMessage({ type: 'setPort', port: channel.port1 }, [channel.port1]);
workerB.postMessage({ type: 'setPort', port: channel.port2 }, [channel.port2]);
 
// これ以降、workerA と workerB はメインスレッドを介さず直接通信可能
// メインスレッドはボトルネックにならない
 
 
// ===== workerA.js =====
 
let directPort = null;
 
self.onmessage = (event) => {
  if (event.data.type === 'setPort') {
    directPort = event.data.port;
    directPort.onmessage = (e) => {
      console.log('[WorkerA] WorkerB からの直接メッセージ:', e.data);
    };
    // WorkerB に直接メッセージを送信
    directPort.postMessage({ from: 'A', message: '直接通信テスト' });
  }
};
 
 
// ===== workerB.js =====
 
let directPort = null;
 
self.onmessage = (event) => {
  if (event.data.type === 'setPort') {
    directPort = event.data.port;
    directPort.onmessage = (e) => {
      console.log('[WorkerB] WorkerA からの直接メッセージ:', e.data);
      // 返信
      directPort.postMessage({
        from: 'B',
        message: '了解、直接通信成功'
      });
    };
  }
};

// ===== 任意のコンテキスト（ページでも Worker でも可） =====
 
// 同じチャネル名を指定すると自動的に接続される
const channel = new BroadcastChannel('app-events');
 
// メッセージの送信（全リスナーに配信される）
channel.postMessage({
  type: 'user-login',
  userId: 'user123',
  timestamp: Date.now()
});
 
// メッセージの受信
channel.onmessage = (event) => {
  const { type, userId } = event.data;
  if (type === 'user-login') {
    console.log(`ユーザー ${userId} がログインしました`);
    updateUI();
  }
};
 
// 不要になったら閉じる
// channel.close();

// ===== main.js =====
 
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('paint-worklet.js');
}
 
 
// ===== paint-worklet.js =====
 
class GradientBorderPainter {
  // CSS カスタムプロパティへの依存宣言
  static get inputProperties() {
    return [
      '--border-width',
      '--gradient-start',
      '--gradient-end'
    ];
  }
 
  paint(ctx, size, properties) {
    const borderWidth = parseInt(properties.get('--border-width')) || 4;
    const startColor = properties.get('--gradient-start').toString().trim()
      || '#ff6b6b';
    const endColor = properties.get('--gradient-end').toString().trim()
      || '#4ecdc4';
 
    // グラデーションボーダーを描画
    const gradient = ctx.createLinearGradient(0, 0, size.width, size.height);
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1, endColor);
 
    ctx.strokeStyle = gradient;
    ctx.lineWidth = borderWidth;
    ctx.strokeRect(
      borderWidth / 2,
      borderWidth / 2,
      size.width - borderWidth,
      size.height - borderWidth
    );
  }
}
 
registerPaint('gradient-border', GradientBorderPainter);
 
 
// ===== styles.css =====
/*
.card {
  --border-width: 4;
  --gradient-start: #ff6b6b;
  --gradient-end: #4ecdc4;
  background-image: paint(gradient-border);
}
*/

// ===== main.js =====
 
async function setupAudioWorklet() {
  const audioContext = new AudioContext();
 
  // Audio Worklet モジュールの登録
  await audioContext.audioWorklet.addModule('audio-processor.js');
 
  // カスタム AudioWorkletNode の生成
  const gainNode = new AudioWorkletNode(audioContext, 'custom-gain');
 
  // パラメータの制御
  const gainParam = gainNode.parameters.get('gain');
  gainParam.value = 0.5; // 音量を半分に
 
  // 入力 → カスタム処理 → 出力
  const source = audioContext.createMediaStreamSource(
    await navigator.mediaDevices.getUserMedia({ audio: true })
  );
  source.connect(gainNode).connect(audioContext.destination);
}
 
 
// ===== audio-processor.js =====
 
class CustomGainProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{
      name: 'gain',
      defaultValue: 1.0,
      minValue: 0.0,
      maxValue: 2.0,
      automationRate: 'a-rate' // サンプル単位で変化可能
    }];
  }
 
  process(inputs, outputs, parameters) {
    const input = inputs[0];
    const output = outputs[0];
    const gain = parameters.gain;
 
    for (let channel = 0; channel < input.length; channel++) {
      const inputChannel = input[channel];
      const outputChannel = output[channel];
 
      for (let i = 0; i < inputChannel.length; i++) {
        // gain パラメータが a-rate の場合、サンプルごとに異なる値を持つ
        const g = gain.length > 1 ? gain[i] : gain[0];
        outputChannel[i] = inputChannel[i] * g;
      }
    }
 
    return true; // true を返すと処理を継続
  }
}
 
registerProcessor('custom-gain', CustomGainProcessor);

// ===== BAD: タスクごとに Worker を生成・破棄 =====
 
async function processItems(items) {
  const results = [];
  for (const item of items) {
    // 毎回 Worker を生成（数 ms のオーバーヘッド x 1000回）
    const worker = new Worker('process.js');
 
    const result = await new Promise((resolve) => {
      worker.onmessage = (e) => {
        resolve(e.data);
        worker.terminate();  // 毎回終了
      };
      worker.postMessage(item);
    });
 
    results.push(result);
  }
  return results;
}
// 問題: Worker の生成・破棄コストが大きい
// 問題: 並列実行されない（逐次処理）
// 問題: メモリリークの可能性
 
 
// ===== GOOD: Worker プールで再利用 =====
 
const pool = new WorkerPool('process.js', 4);
 
async function processItems(items) {
  // 全タスクを並列にキューイング（最大 4 並列）
  const results = await Promise.all(
    items.map(item => pool.exec(item))
  );
  return results;
}
// Worker を再利用するため生成コストは初期化時のみ
// 最大並列数を制御可能
// 明示的な terminate で確実にリソース解放

// ===== BAD: 大きなバッファを毎回コピー =====
 
function processVideoFrame(frameBuffer) {
  // 100MB のバッファが毎フレームコピーされる
  worker.postMessage({ frame: frameBuffer });
  // frameBuffer はまだメインスレッドに残っている
  // GC されるまでメモリを二重消費
}
 
worker.onmessage = (event) => {
  // 結果もコピーで返される
  const processedFrame = event.data.result;
  renderFrame(processedFrame);
};
 
// 問題: 30fps で動画処理する場合、毎秒 6GB のメモリコピーが発生
// 問題: GC 圧力が高くなり、パフォーマンスが不安定に
 
 
// ===== GOOD: Transferable Objects で所有権を移転 =====
 
function processVideoFrame(frameBuffer) {
  // 所有権を Worker に移転（ゼロコピー）
  worker.postMessage(
    { frame: frameBuffer },
    [frameBuffer]  // Transfer リストに含める
  );
  // frameBuffer.byteLength === 0（もう使えない）
}
 
worker.onmessage = (event) => {
  // Worker からも Transfer で返送
  const processedFrame = event.data.result;
  renderFrame(processedFrame);
  // 次のフレーム処理のために再び Worker に Transfer
};
 
// ゼロコピーなので 30fps でも問題なし
// メモリ使用量も最小限
 
 
// ===== BETTER: SharedArrayBuffer で共有メモリ（CORS 設定が必要） =====
 
const frameBuffer = new SharedArrayBuffer(frameSize);
const mainView = new Uint8Array(frameBuffer);
const statusArray = new Int32Array(new SharedArrayBuffer(4));
// statusArray[0]: 0 = idle, 1 = processing, 2 = done
 
worker.postMessage({ frameBuffer, statusArray });
 
function processVideoFrame(rawFrame) {
  // 共有メモリに書き込み
  mainView.set(rawFrame);
  // Worker に処理開始を通知
  Atomics.store(statusArray, 0, 1);
  Atomics.notify(statusArray, 0);
}
 
// コピーもメモリ移転も発生しない

// ===== BAD: エラーが無視される =====
 
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  updateUI(e.data);
};
// Worker 内でエラーが発生しても何も起きない
// Promise が永遠に resolve されない可能性
 
 
// ===== GOOD: 包括的なエラーハンドリング =====
 
const worker = new Worker('worker.js');
 
// Worker 自体のエラー（構文エラー、未キャッチ例外）
worker.onerror = (error) => {
  console.error('[Worker Error]', error.message);
  console.error('ファイル:', error.filename, '行:', error.lineno);
  error.preventDefault(); // デフォルトのエラー報告を抑制
  showErrorUI('ワーカーで予期しないエラーが発生しました');
};
 
// Worker 内で messageerror（デシリアライズ失敗等）
worker.onmessageerror = (event) => {
  console.error('[Message Error] メッセージの復元に失敗');
};
 
// タイムアウト付きのリクエスト
function requestWithTimeout(worker, data, timeoutMs = 30000) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error(`Worker タイムアウト: ${timeoutMs}ms`));
    }, timeoutMs);
 
    const handler = (event) => {
      clearTimeout(timer);
      worker.removeEventListener('message', handler);
      if (event.data.error) {
        reject(new Error(event.data.error));
      } else {
        resolve(event.data);
      }
    };
 
    worker.addEventListener('message', handler);
    worker.postMessage(data);
  });
}
 
// 使用例
try {
  const result = await requestWithTimeout(worker, taskData, 10000);
  updateUI(result);
} catch (err) {
  console.error('処理失敗:', err.message);
  showErrorUI(err.message);
}

// ===== 問題: 大量の Worker 同時生成 =====
 
// 100 個の Worker を一度に生成しようとする
const workers = [];
for (let i = 0; i < 100; i++) {
  try {
    workers.push(new Worker('heavy-task.js'));
  } catch (e) {
    console.error(`Worker ${i} の生成に失敗:`, e);
    // ブラウザによっては 20〜50 個程度で制限に達する
    break;
  }
}
 
// 結果:
// - Chrome: 概ね動作するが、スレッド数過多でコンテキストスイッチが増大
// - Firefox: 一定数を超えるとキューイングされる
// - Safari: より早い段階で制限に達する傾向
// - 全ブラウザ: メモリ消費が急増（Worker 1 つあたり数 MB のスタック領域）
 
 
// ===== 対策: Worker プール + キューイング =====
 
// navigator.hardwareConcurrency で論理 CPU コア数を取得
const optimalPoolSize = Math.max(1, navigator.hardwareConcurrency - 1);
// メインスレッド用に 1 コア残すのが慣例
console.log(`最適プールサイズ: ${optimalPoolSize}`);
 
const pool = new WorkerPool('heavy-task.js', optimalPoolSize);
// 100 個のタスクを適切な並列度で実行
const results = await Promise.all(
  tasks.map(task => pool.exec(task))
);

// ===== Service Worker のスコープに関するルール =====
 
// 1. デフォルトスコープ = sw.js のディレクトリ
//    sw.js が /scripts/sw.js にある場合
//    → スコープは /scripts/ 以下のみ
 
// /sw.js → スコープ: / (ルート以下すべて)
navigator.serviceWorker.register('/sw.js');
 
// /scripts/sw.js → スコープ: /scripts/ 以下のみ
navigator.serviceWorker.register('/scripts/sw.js');
// /index.html へのリクエストはインターセプトされない
 
// 明示的にスコープを広げようとするとエラー
navigator.serviceWorker.register('/scripts/sw.js', {
  scope: '/'  // SecurityError: スクリプトのディレクトリより上位は指定不可
});
 
// 解決策 1: sw.js をルートに配置
navigator.serviceWorker.register('/sw.js', { scope: '/' });
 
// 解決策 2: Service-Worker-Allowed ヘッダーをサーバーで設定
// HTTP レスポンスヘッダー: Service-Worker-Allowed: /
// これにより /scripts/sw.js でもルートスコープを取得可能
navigator.serviceWorker.register('/scripts/sw.js', { scope: '/' });
 
 
// 2. 複数の Service Worker を異なるスコープで登録
navigator.serviceWorker.register('/sw-main.js', { scope: '/' });
navigator.serviceWorker.register('/blog/sw-blog.js', { scope: '/blog/' });
// /blog/ 以下のリクエストは sw-blog.js が優先
// それ以外のリクエストは sw-main.js が処理
 
// 3. Service Worker の更新判定
// ブラウザはバイト単位でスクリプトを比較し、1 バイトでも変わっていれば更新する
// 24 時間に 1 回、自動的に更新チェックが行われる
// registration.update() で手動チェックも可能

// Dedicated Worker: 画像処理など、単一ページの重い計算に使用
const worker = new Worker('image-processor.js');
worker.postMessage(imageData);
 
// Shared Worker: WebSocket 接続を複数タブで共有
const sharedWorker = new SharedWorker('websocket-manager.js');
sharedWorker.port.start();
sharedWorker.port.postMessage({ type: 'subscribe', channel: 'chat' });
 
// Service Worker: API レスポンスをキャッシュしてオフライン対応
navigator.serviceWorker.register('/sw.js').then(registration => {
  console.log('Service Worker registered with scope:', registration.scope);
});

// ===== 通常のコピー（遅い）=====
const largeBuffer = new ArrayBuffer(100 * 1024 * 1024); // 100MB
console.time('Copy');
worker.postMessage({ buffer: largeBuffer }); // 深いコピー発生（数百 ms）
console.timeEnd('Copy');
// メインスレッドでも largeBuffer は引き続き使用可能
 
// ===== Transferable Objects（速い）=====
const largeBuffer2 = new ArrayBuffer(100 * 1024 * 1024);
console.time('Transfer');
worker.postMessage(
  { buffer: largeBuffer2 },
  [largeBuffer2] // 第2引数で転送対象を指定
);
console.timeEnd('Transfer'); // 1ms 未満
// この後、メインスレッドで largeBuffer2 にアクセスすると TypeError
// console.log(largeBuffer2.byteLength); // Error: Detached ArrayBuffer

// Worker 側で処理後に返送
self.onmessage = (e) => {
  const buffer = e.data.buffer;
  // 処理実行
  processBuffer(buffer);
 
  // 処理済みバッファを転送で返す
  self.postMessage({ result: buffer }, [buffer]);
};

// Worker 側でログにタイムスタンプと Worker ID を付ける
const workerId = Math.random().toString(36).slice(2, 9);
 
self.onmessage = (e) => {
  console.log(`[Worker ${workerId}] ${Date.now()} - Received:`, e.data);
  const result = heavyComputation(e.data);
  console.log(`[Worker ${workerId}] ${Date.now()} - Sending result:`, result);
  self.postMessage(result);
};
 
// メインスレッド側でも対応するログ
worker.postMessage(data);
console.log(`[Main] ${Date.now()} - Sent to worker:`, data);
 
worker.onmessage = (e) => {
  console.log(`[Main] ${Date.now()} - Received from worker:`, e.data);
};