Hono

Appearance

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:

sh
mkdir my-app cd my-app

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

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

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

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

Next, install the necessary modules.

sh
npm i hono npm i -D vite
sh
yarn add hono yarn add -D vite
sh
pnpm add hono pnpm add -D vite
sh
bun add hono bun add -D vite

2. Hello World ​

Edit index.html:

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:

ts
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.

ts
// 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.

ts
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.

sh
npm run dev
sh
yarn dev
sh
pnpm run dev
sh
bun run dev

By default, the development server will run on port 5173. Access http://localhost:5173/ in your browser to complete the Service Worker registration. Then, access /sw to see the response from the Hono application.