HonoでService Workerを扱いやすくする

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/sw',
  type: 'module',
  updateViaCache: 'none',
});

// https://github.com/microsoft/TypeScript/issues/14877
declare const self: ServiceWorkerGlobalScope;

import { Hono } from 'hono';
import { handle } from 'hono/service-worker';

const app = new Hono().basePath('/sw'); // クライアント側のService Workerのスコープを指定
app.get('/', (c) => c.text('Hello World'));

self.addEventListener('fetch', handle(app));

import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';
import { Hono } from 'hono';
import { stream } from 'hono/streaming';
import { handle } from 'hono/vercel';

export const runtime = 'edge';

const openai = createOpenAI({
  compatibility: 'strict',
  organization: "xxx",
  project: "xxx",
  apiKey: "xxx",
  baseURL: "xxx",
});

const app = new Hono().basePath('/api');

app.post('/chat', async (c) => { // /api/chatでストリームを返す
  const r = await c.req.json();
  return stream(c, async (stream) => {
    const result = await streamText({
      model: openai('gpt-4o-mini'),
      messages: r.messages,
    });
    await stream.pipe(result.toDataStream());
  });
});

export const GET = handle(app);
export const POST = handle(app);

'use client';
import { useChat } from 'ai/react';
// 略

export default function Page() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/sw/chat', // Service Workerで定義したエンドポイントを叩く
  });

  useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("/sw.js", { scope: "/", type: "module" }) // Service Workerを登録
        .then(
          function (_registration) {
            console.log("Service Workerの登録に成功しました");
          },
          function (_error) {
            console.log("Service Workerの登録に失敗しました");
          }
        );
    }
  }, []);

 // 省略
}

import { Hono } from "hono";
import { handle } from "hono/service-worker";
import { streamText } from "hono/streaming";

// https://github.com/microsoft/TypeScript/issues/14877
declare const self: ServiceWorkerGlobalScope;

const app = new Hono().basePath("/sw");

app.post("/chat", async (c) => {  // /sw/chatにリクエストが来た場合にインターセプト
  const { messages } = await c.req.json();
  return streamText(c, async (stream) => {
    const response = await fetch('/api/chat', { // API Routesのchatエンドポイントにリクエストをプロキシ
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ messages }),
    });

    if (!response.body) {
      await stream.write('data: [ERROR] レスポンスボディが存在しません\n\n');
      return;
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const text = decoder.decode(value, { stream: true });
        await stream.write(text);
      }
    } finally {
      await stream.write('data: [DONE]\n\n');
      reader.releaseLock();
    }
  });
});

self.addEventListener("fetch", handle(app));