Service Worker

Ein Service Worker ist ein Skript, das im Hintergrund des Browsers läuft, um Aufgaben wie Caching und Push-Benachrichtigungen zu übernehmen. Mit einem Service-Worker-Adapter kannst du mit Hono erstellte Anwendungen als FetchEvent-Handler im Browser ausführen.

Diese Seite zeigt ein Beispiel zur Projekterstellung mit Vite.

1. Einrichtung

Erstelle zunächst dein Projektverzeichnis und wechsle hinein:

mkdir my-app
cd my-app

Erstelle die erforderlichen Dateien für das Projekt. Erstelle eine Datei package.json mit folgendem Inhalt:

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

Erstelle ebenso eine Datei tsconfig.json mit folgendem Inhalt:

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

Installiere als Nächstes die erforderlichen Module.

npm

npm i hono @hono/service-worker
npm i -D vite

yarn

yarn add hono @hono/service-worker
yarn add -D vite

pnpm

pnpm add hono @hono/service-worker
pnpm add -D vite

bun

bun add hono @hono/service-worker
bun add -D vite

2. Hello World

Bearbeite 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 ist ein Skript zur Registrierung des Service Workers:

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()

Erstelle in sw.ts eine Anwendung mit Hono und registriere sie mit der Funktion handle des Service-Worker-Adapters für das Ereignis fetch. Dadurch kann die Hono-Anwendung Zugriffe auf /sw abfangen.

// 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))

fire() verwenden

Die Funktion fire() ruft automatisch addEventListener('fetch', handle(app)) für dich auf und macht den Code dadurch kürzer.

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. Ausführen

Starte den Entwicklungsserver.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm run dev

bun

bun run dev

Standardmäßig läuft der Entwicklungsserver auf Port 5173. Öffne http://localhost:5173/ in deinem Browser, um den Service Worker zu registrieren. Rufe anschließend /sw auf, um die Antwort der Hono-Anwendung zu sehen.