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