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:

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.

npmyarnpnpmbun

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:

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.

npmyarnpnpmbun

npm run dev

yarn dev

pnpm run dev

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.

Service Worker ​

1. Setup ​

2. Hello World ​

Using fire() ​

3. Run ​

Service Worker

1. Setup

2. Hello World

Using `fire()`

3. Run