Last Updated: 3/9/2026

Service Worker

Service Worker is a script that runs in the background of the browser to handle tasks like caching and push notifications. Using a Service Worker adapter, you can run applications made with Hono as FetchEvent handler within the browser.

This page shows an example of creating a project using Vite .

1. Setup

First, create and move to your project directory:


mkdir my-app
cd my-app

Create the necessary files for the project. Make a package.json file with the following:


{
  "name": "my-app",
  "private": true,
  "scripts": {
    "dev": "vite dev"
  },
  "type": "module"
}

Similarly, create a tsconfig.json file with the following:


{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "WebWorker"],
    "moduleResolution": "bundler"
  },
  "include": ["./"],
  "exclude": ["node_modules"]
}

Next, install the necessary modules.

::: code-group


npm i hono
npm i -D vite


yarn add hono
yarn add -D vite


pnpm add hono
pnpm add -D vite


bun add hono
bun add -D vite

:::

2. Hello World

Edit index.html:


<!doctype html>
<html>
  <body>
    <a href="/sw">Hello World by Service Worker</a>
    <script type="module" src="/main.ts"></script>
  </body>
</html>

main.ts is a script to register the Service Worker:


function register() {
  navigator.serviceWorker
    .register('/sw.ts', { scope: '/sw', type: 'module' })
    .then(
      function (_registration) {
        console.log('Register Service Worker: Success')
      },
      function (_error) {
        console.log('Register Service Worker: Error')
      }
    )
}
function start() {
  navigator.serviceWorker
    .getRegistrations()
    .then(function (registrations) {
      for (const registration of registrations) {
        console.log('Unregister Service Worker')
        registration.unregister()
      }
      register()
    })
}
start()

In sw.ts, create an application using Hono and register it to the fetch event with the Service Worker adapter’s handle function. This allows the Hono application to intercept access to /sw.


// To support types
// 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')
app.get('/', (c) => c.text('Hello World'))
 
self.addEventListener('fetch', handle(app))

Using `fire()`

The fire() function automatically calls addEventListener('fetch', handle(app)) for you, making the code more concise.


import { Hono } from 'hono'
import { fire } from 'hono/service-worker'
 
const app = new Hono().basePath('/sw')
app.get('/', (c) => c.text('Hello World'))
 
fire(app)

3. Run

Start the development server.