Service Worker

Service Worker 是运行在浏览器后台的一个脚本，用于处理缓存和推送通知等任务。通过使用 Service Worker 适配器，你可以让用 Hono 构建的应用作为浏览器中的 FetchEvent 处理器运行。

本页展示了一个使用 Vite 创建项目的示例。

1. 初始化 (Setup)

首先，创建并进入你的项目目录：

  1. mkdir my-app
  2. cd my-app

为项目创建必要的文件。创建一个 package.json 文件，内容如下：

  1. {
  2.   "name": "my-app",
  3.   "private": true,
  4.   "scripts": {
  5.     "dev": "vite dev"
  6.   },
  7.   "type": "module"
  8. }

同样，创建一个 tsconfig.json 文件，内容如下：

  1. {
  2.   "compilerOptions": {
  3.     "target": "ES2020",
  4.     "module": "ESNext",
  5.     "lib": ["ES2020", "DOM", "WebWorker"],
  6.     "moduleResolution": "bundler"
  7.   },
  8.   "include": ["./"],
  9.   "exclude": ["node_modules"]
  10. }

接下来安装必要的模块：

  1. npm i hono
  2. npm i -D vite
  1. yarn add hono
  2. yarn add -D vite
  1. pnpm add hono
  2. pnpm add -D vite
  1. bun add hono
  2. bun add -D vite

2. Hello World

编辑 index.html：

  1. <!doctype html>
  2. <html>
  3.   <body>
  4.     <a href="/sw">Hello World by Service Worker</a>
  5.     <script type="module" src="/main.ts"></script>
  6.   </body>
  7. </html>

main.ts 是一个用来注册 Service Worker 的脚本：

  1. function register() {
  2.   navigator.serviceWorker
  3.     .register('/sw.ts', { scope: '/sw', type: 'module' })
  4.     .then(
  5.       function (_registration) {
  6.         console.log('Register Service Worker: Success')
  7.       },
  8.       function (_error) {
  9.         console.log('Register Service Worker: Error')
  10.       }
  11.     )
  12. }
  13. function start() {
  14.   navigator.serviceWorker
  15.     .getRegistrations()
  16.     .then(function (registrations) {
  17.       for (const registration of registrations) {
  18.         console.log('Unregister Service Worker')
  19.         registration.unregister()
  20.       }
  21.       register()
  22.     })
  23. }
  24. start()

在 sw.ts 中，用 Hono 创建一个应用，并通过 Service Worker 适配器的 handle 函数将它注册到 fetch 事件上。这样，Hono 应用就可以拦截访问 /sw 的请求。

  1. // To support types
  2. // https://github.com/microsoft/TypeScript/issues/14877
  3. declare const self: ServiceWorkerGlobalScope
  5. import { Hono } from 'hono'
  6. import { handle } from 'hono/service-worker'
  8. const app = new Hono().basePath('/sw')
  9. app.get('/', (c) => c.text('Hello World'))
  11. self.addEventListener('fetch', handle(app))

使用 fire()

fire() 函数会自动帮你调用 addEventListener(‘fetch’, handle(app))，让代码更加简洁。

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

3. 运行 (Run)

启动开发服务器：

  1. npm run dev
  1. yarn dev
  1. pnpm run dev
  1. bun run dev

默认情况下，开发服务器会运行在 5173 端口。打开浏览器访问 http://localhost:5173/ 完成 Service Worker 注册，然后访问 /sw 查看 Hono 应用的响应。