Gemini API × PWA実装ガイド — Service Worker・オフラインAI・Web Push通知でApp Store品質のWebアプリを作る

// public/sw.js
 
const CACHE_VERSION = 'v2';
const GEMINI_CACHE = `gemini-cache-${CACHE_VERSION}`;
const STATIC_CACHE = `static-cache-${CACHE_VERSION}`;
const GEMINI_API_HOST = 'generativelanguage.googleapis.com';
 
// キャッシュ対象のプロンプトパターン（決定論的なリクエスト）
const CACHEABLE_PATTERNS = [
  /翻訳/,
  /translate/i,
  /定義/,
  /define/i,
  /要約して/,
  /summarize/i,
  /とはどういう意味/,
];
 
// キャッシュTTL: 24時間
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(STATIC_CACHE).then(cache =>
      cache.addAll([
        '/',
        '/index.html',
        '/offline.html',  // オフラインフォールバックページ
        '/src/main.js',
      ])
    )
  );
  // 旧バージョンを待機させずに即アクティブ化
  self.skipWaiting();
});
 
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys
          .filter(key => key \!== GEMINI_CACHE && key \!== STATIC_CACHE)
          .map(key => caches.delete(key))
      )
    )
  );
  self.clients.claim();
});
 
self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
 
  // Gemini API リクエストの処理
  if (url.hostname === GEMINI_API_HOST) {
    event.respondWith(handleGeminiRequest(event.request));
    return;
  }
 
  // 静的アセットはキャッシュファースト
  event.respondWith(
    caches.match(event.request).then(
      cached => cached ?? fetch(event.request)
        .catch(() => caches.match('/offline.html'))
    )
  );
});
 
async function handleGeminiRequest(request) {
  // POST リクエストのボディを読む（一度読むと再利用できないのでcloneする）
  const cloned = request.clone();
  let promptText = '';
 
  try {
    const body = await cloned.json();
    promptText = body?.contents?.[0]?.parts?.[0]?.text ?? '';
  } catch {
    // JSONパース失敗時はキャッシュしない
    return fetch(request);
  }
 
  const isCacheable = CACHEABLE_PATTERNS.some(p => p.test(promptText));
 
  if (\!isCacheable) {
    // キャッシュ不可なリクエストは通過させる（オフライン時はエラーを返す）
    return fetch(request).catch(() =>
      new Response(
        JSON.stringify({ error: 'オフラインのため、このリクエストは実行できません' }),
        { status: 503, headers: { 'Content-Type': 'application/json' } }
      )
    );
  }
 
  // キャッシュキーを生成（URLにプロンプトのハッシュを付与）
  const promptHash = await sha256(promptText);
  const cacheKey = `${request.url}?_ph=${promptHash.substring(0, 16)}`;
 
  const cache = await caches.open(GEMINI_CACHE);
  const cachedResponse = await cache.match(cacheKey);
 
  if (cachedResponse) {
    const cacheTime = parseInt(cachedResponse.headers.get('X-Cache-Time') || '0');
    const age = Date.now() - cacheTime;
 
    if (age < CACHE_TTL_MS) {
      console.log('[SW] キャッシュヒット:', promptText.slice(0, 30) + '...');
      return cachedResponse.clone();
    }
    // TTL切れの場合はキャッシュを削除して再取得
    await cache.delete(cacheKey);
  }
 
  // ネットワークから取得してキャッシュに保存
  try {
    const response = await fetch(request);
 
    if (response.ok) {
      const responseBody = await response.clone().arrayBuffer();
      const cachedResponse = new Response(responseBody, {
        status: response.status,
        headers: {
          ...Object.fromEntries(response.headers),
          'X-Cache-Time': Date.now().toString(),
          'X-Cached-Prompt': promptText.slice(0, 50),
        },
      });
      await cache.put(cacheKey, cachedResponse);
    }
 
    return response;
  } catch {
    return new Response(
      JSON.stringify({ error: 'ネットワークエラー。オフラインの可能性があります。' }),
      { status: 503, headers: { 'Content-Type': 'application/json' } }
    );
  }
}
 
// SHA-256ハッシュを生成（Cache APIのキー生成用）
async function sha256(message) {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

// src/db.ts
import Dexie, { Table } from 'dexie';
 
export interface Message {
  id?: number;
  sessionId: string;
  role: 'user' | 'model';
  text: string;
  timestamp: number;
  tokenCount?: number;
  cached?: boolean;  // Service Workerのキャッシュから取得したか
}
 
export interface Session {
  id: string;
  title: string;
  createdAt: number;
  updatedAt: number;
  messageCount: number;
}
 
export class GeminiDB extends Dexie {
  messages\!: Table<Message>;
  sessions\!: Table<Session>;
 
  constructor() {
    super('GeminiPWA');
    this.version(1).stores({
      messages: '++id, sessionId, timestamp',
      sessions: '&id, updatedAt',
    });
  }
}
 
export const db = new GeminiDB();
 
// 新しいセッションを作成
export async function createSession(firstMessage: string): Promise<string> {
  const id = `session_${Date.now()}_${Math.random().toString(36).slice(2)}`;
  const title = firstMessage.slice(0, 40) + (firstMessage.length > 40 ? '…' : '');
  await db.sessions.add({ id, title, createdAt: Date.now(), updatedAt: Date.now(), messageCount: 0 });
  return id;
}
 
// メッセージを追加
export async function appendMessage(
  sessionId: string,
  role: 'user' | 'model',
  text: string,
  tokenCount?: number,
  cached = false
): Promise<void> {
  await db.messages.add({ sessionId, role, text, timestamp: Date.now(), tokenCount, cached });
  await db.sessions.where('id').equals(sessionId).modify(s => {
    s.updatedAt = Date.now();
    s.messageCount += 1;
  });
}
 
// Gemini APIのhistory形式で取得（最新N件）
export async function getHistory(sessionId: string, limit = 20) {
  const msgs = await db.messages
    .where('sessionId').equals(sessionId)
    .sortBy('timestamp');
  // 最新のlimit件だけ使用（古いものから選ぶとコンテキストが失われる）
  const recent = msgs.slice(-limit);
  return recent.map(m => ({
    role: m.role,
    parts: [{ text: m.text }],
  }));
}
 
// セッション一覧を取得（更新日時の降順）
export async function getSessions(): Promise<Session[]> {
  return db.sessions.orderBy('updatedAt').reverse().limit(50).toArray();
}

// src/gemini.ts
import { GoogleGenerativeAI } from '@google/generative-ai';
import { appendMessage, createSession, getHistory } from './db';
 
// ⚠️ APIキーはService Worker内に直接書かない！
// PWAではバックエンドプロキシ経由でAPIを呼ぶことを推奨
// ここではVite環境変数から読み込む例を示す
const AI = new GoogleGenerativeAI(import.meta.env.VITE_GEMINI_API_KEY);
 
const model = AI.getGenerativeModel({
  model: 'gemini-2.5-pro',
  generationConfig: {
    maxOutputTokens: 2048,
    temperature: 0.7,
  },
});
 
export async function sendMessage(
  sessionId: string | null,
  userText: string
): Promise<{ sessionId: string; responseText: string }> {
  // セッションが新規の場合は作成
  const sid = sessionId ?? await createSession(userText);
 
  // ユーザーメッセージをDBに保存
  await appendMessage(sid, 'user', userText);
 
  // 会話履歴を取得（Gemini API形式）
  const history = await getHistory(sid);
 
  // 最後のユーザーメッセージを除いたhistoryでチャットを開始
  const chat = model.startChat({
    history: history.slice(0, -1),  // 最後の要素（今回のユーザーメッセージ）を除く
  });
 
  try {
    const result = await chat.sendMessage(userText);
    const response = await result.response;
    const text = response.text();
    const tokenCount = response.usageMetadata?.totalTokenCount;
 
    // モデルのレスポンスをDBに保存
    await appendMessage(sid, 'model', text, tokenCount);
 
    return { sessionId: sid, responseText: text };
  } catch (error) {
    // オフラインエラーの場合はDBにエラーメッセージを保存して再スロー
    if (\!navigator.onLine) {
      await appendMessage(sid, 'model', '[オフラインのため返信できませんでした。接続後にお試しください]');
    }
    throw error;
  }
}

// public/sw.js（Background Sync 追加部分）
 
// 送信待ちキューのストア名
const PENDING_QUEUE = 'pending-gemini-requests';
 
// Background Sync イベントハンドラ
self.addEventListener('sync', event => {
  if (event.tag === 'sync-gemini') {
    event.waitUntil(processPendingRequests());
  }
});
 
async function processPendingRequests() {
  // IndexedDBからpendingリクエストを全件取得
  const db = await openPendingDB();
  const tx = db.transaction(PENDING_QUEUE, 'readonly');
  const store = tx.objectStore(PENDING_QUEUE);
  const pending = await getAllFromStore(store);
 
  console.log(`[SW] Background Sync: ${pending.length}件のリクエストを処理`);
 
  for (const item of pending) {
    try {
      const response = await fetch('/api/gemini', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionId: item.sessionId, text: item.text }),
      });
 
      if (response.ok) {
        const result = await response.json();
        // 送信成功 → キューから削除してクライアントに通知
        await deletePending(db, item.id);
        await notifyClients({
          type: 'SYNC_COMPLETED',
          sessionId: item.sessionId,
          originalText: item.text,
          responseText: result.text,
        });
      } else {
        console.error('[SW] Sync failed with status:', response.status);
        // 4xxエラーは再試行しない（5xxは自動再試行される）
        if (response.status >= 400 && response.status < 500) {
          await deletePending(db, item.id);
        }
      }
    } catch (error) {
      console.error('[SW] Sync error:', error);
      // ネットワークエラーはBG Syncが自動リトライ
    }
  }
}
 
async function notifyClients(message) {
  const clients = await self.clients.matchAll({ type: 'window' });
  clients.forEach(client => client.postMessage(message));
}
 
// メインスレッド側: オフライン時にキューに追加
// src/offline-queue.ts
export async function queueMessage(sessionId: string, text: string): Promise<void> {
  const db = await openPendingDB();
  await addPending(db, { sessionId, text, timestamp: Date.now() });
 
  // Background Sync を登録
  const registration = await navigator.serviceWorker.ready;
  await (registration as any).sync.register('sync-gemini');
  console.log('📨 メッセージをオフラインキューに追加しました');
}
 
// SW からのメッセージを受信
navigator.serviceWorker.addEventListener('message', event => {
  if (event.data.type === 'SYNC_COMPLETED') {
    // UIを更新: キュー済みだったメッセージの返信を表示
    updateChatUI(event.data.sessionId, event.data.responseText);
    showToast('オフライン中のメッセージが送信されました');
  }
});

// src/push-notifications.ts
 
// プッシュ通知の許可を求める
export async function requestPushPermission(): Promise<boolean> {
  if (\!('Notification' in window) || \!('PushManager' in window)) {
    console.warn('Push通知はこのブラウザでサポートされていません');
    return false;
  }
 
  const permission = await Notification.requestPermission();
  if (permission \!== 'granted') return false;
 
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(
      import.meta.env.VITE_VAPID_PUBLIC_KEY
    ),
  });
 
  // サブスクリプション情報をバックエンドに送信
  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription),
  });
 
  return true;
}
 
// Service Worker 側: プッシュイベントを受信して通知を表示
// public/sw.js に追加
self.addEventListener('push', event => {
  if (\!event.data) return;
 
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192.png',
    badge: '/icons/badge-72.png',
    data: { url: data.url ?? '/' },
    actions: data.actions ?? [],
    // AIが生成した通知は少し違うスタイルにする
    tag: data.aiGenerated ? 'ai-notification' : 'default',
    renotify: true,
  };
 
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});
 
self.addEventListener('notificationclick', event => {
  event.notification.close();
  const url = event.notification.data?.url ?? '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      // 既存のウィンドウがあれば移動、なければ新規オープン
      const existing = clientList.find(c => c.url === url && 'focus' in c);
      if (existing) return existing.focus();
      return clients.openWindow(url);
    })
  );
});

// バックエンド: src/api/push-scheduler.ts（Node.js / Cloudflare Workers）
import webpush from 'web-push';
import { GoogleGenerativeAI } from '@google/generative-ai';
 
const ai = new GoogleGenerativeAI(process.env.GEMINI_API_KEY\!);
 
export async function sendPersonalizedNotification(
  subscription: webpush.PushSubscription,
  userContext: { lastActivity: string; studyGoal: string; daysSinceLastVisit: number }
): Promise<void> {
  // Gemini APIで通知文を生成
  const model = ai.getGenerativeModel({ model: 'gemini-2.5-pro' });
  const prompt = `
ユーザーへのプッシュ通知を1件生成してください。
・最後の学習内容: ${userContext.lastActivity}
・学習目標: ${userContext.studyGoal}
・最終訪問からの日数: ${userContext.daysSinceLastVisit}日
 
JSONで出力してください:
{"title": "通知タイトル（20文字以内）", "body": "通知本文（50文字以内）"}
  `;
 
  const result = await model.generateContent({
    contents: [{ role: 'user', parts: [{ text: prompt }] }],
    generationConfig: { responseMimeType: 'application/json' },
  });
 
  const notification = JSON.parse(result.response.text());
 
  await webpush.sendNotification(
    subscription,
    JSON.stringify({
      ...notification,
      aiGenerated: true,
      url: '/study',
    })
  );
}

// public/sw.js（計測の追加部分）
 
let hitCount = 0;
let missCount = 0;
 
// fetch ハンドラ内でキャッシュ判定したあとに呼ぶ
function recordCacheResult(isHit) {
  if (isHit) hitCount++;
  else missCount++;
 
  // 50件ごとにページへ集計を送る（送信コストを抑える）
  if ((hitCount + missCount) % 50 === 0) {
    self.clients.matchAll().then(clients => {
      for (const client of clients) {
        client.postMessage({
          type: 'cache-stats',
          hit: hitCount,
          miss: missCount,
          hitRate: hitCount / (hitCount + missCount),
        });
      }
    });
  }
}

// アプリ側（main.js など）
navigator.serviceWorker.addEventListener('message', event => {
  if (event.data?.type !== 'cache-stats') return;
 
  const { hit, miss, hitRate } = event.data;
  const saved = hit; // ヒット数 = 回避できたAPI呼び出し数
  console.log(
    `cache hit ${(hitRate * 100).toFixed(1)}% / 回避した呼び出し ${saved}回`
  );
 
  // 任意: 軽量ビーコンで自前の集計エンドポイントへ
  navigator.sendBeacon?.('/metrics/cache', JSON.stringify({ hit, miss }));
});

{
  "name": "My Gemini AI App",
  "short_name": "GeminiAI",
  "description": "Gemini APIを使ったAIアシスタント",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#1a73e8",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable any" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" }
  ],
  "screenshots": [
    {
      "src": "/screenshots/main.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "AIチャット画面"
    }
  ]
}