Remix PWA を試したい

cd ~/workspace
npm create remix@latest hello-remix-pwa
cd hello-remix-pwa
npm run dev

npm i --save-dev @remix-pwa/dev
npm i --save @remix-pwa/worker-runtime @remix-pwa/sw

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { remixPWA } from "@remix-pwa/dev";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
    remixPWA(),
  ],
});

npx remix-pwa sw

/// <reference lib="WebWorker" />

import { WorkerDataFunctionArgs } from "@remix-pwa/sw";

export {};

declare let self: ServiceWorkerGlobalScope;

self.addEventListener("install", (event) => {
  console.log("Service worker installed");

  event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", (event) => {
  console.log("Service worker activated");

  event.waitUntil(self.clients.claim());
});

export const defaultFetchHandler = async ({
  request,
}: WorkerDataFunctionArgs) => {
  const response = await fetch(request);
  console.log(request.url);
  return response;
};

npm i hono

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

app.get("/", (c) => c.text("Hello World"));

export const defaultFetchHandler = async ({
  request,
}: WorkerDataFunctionArgs) => {
  const res = await app.fetch(request);
  if (res.status === 404) {
    return await fetch(request);
  }
  return res;
};