fix(service-worker): bind fetch to globalThis

src/adapter/service-worker/handler.test.ts

@@ -2,6 +2,30 @@ import { Hono } from '../../hono'
 import { handle } from './handler'
 import type { FetchEvent } from './types'
 
+beforeAll(() => {
+ // fetch errors when it's not bound to globalThis in service worker
+ // set a fetch stub to emulate that behavior
+ vi.stubGlobal(
+ 'fetch',
+ function fetch(this: undefined | typeof globalThis, arg0: string | Request) {
+ if (this !== globalThis) {
+ const error = new Error(
+ 'Failed to execute \'fetch\' on \'WorkerGlobalScope\': Illegal invocation'
+ )
+ error.name = 'TypeError'
+ throw error
+ }
+ if (arg0 instanceof Request && arg0.url === 'http://localhost/fallback') {
+ return new Response('hello world')
+ }
+ return Response.error()
+ }
+ )
+})
+afterAll(() => {
+ vi.unstubAllGlobals()
+})
+
 describe('handle', () => {
  it('Success to fetch', async () => {
  const app = new Hono()
@@ -20,6 +44,19 @@ describe('handle', () => {
  expect(json).toStrictEqual({ hello: 'world' })
  })
  it('Fallback 404', async () => {
+ const app = new Hono()
+ const handler = handle(app)
+ const text = await new Promise<Response>((resolve) => {
+ handler({
+ request: new Request('http://localhost/fallback'),
+ respondWith(res) {
+ resolve(res)
+ },
+ } as FetchEvent)
+ }).then((res) => res.text())
+ expect(text).toBe('hello world')
+ })
+ it('Fallback 404 with explicit fetch', async () => {
  const app = new Hono()
  const handler = handle(app, {
  async fetch() {

src/adapter/service-worker/handler.ts

@@ -16,8 +16,8 @@ export const handle = (
  opts: {
  fetch?: typeof fetch
  } = {
- // To use `fetch` on a Service Worker correctly, first refer to `self.fetch`.
- fetch: globalThis.self !== undefined ? globalThis.self.fetch : fetch,
+ // To use `fetch` on a Service Worker correctly, bind it to `globalThis`.
+ fetch: globalThis.fetch.bind(globalThis),
  }
 ): Handler => {
  return (evt) => {