Service Worker

Un Service Worker est un script qui s'exécute en arrière-plan du navigateur pour gérer des tâches telles que le cache et les notifications push. Avec un adaptateur Service Worker, vous pouvez exécuter des applications Hono comme gestionnaires de FetchEvent dans le navigateur.

Cette page présente un exemple de création de projet avec Vite.

1. Configuration

Créez d'abord le répertoire du projet, puis ouvrez-le :

mkdir my-app
cd my-app

Créez les fichiers nécessaires au projet. Créez un fichier package.json contenant :

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

De même, créez un fichier tsconfig.json contenant :

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

Installez ensuite les modules nécessaires.

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. Bonjour le monde

Modifiez 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 est le script qui enregistre le 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()

Dans sw.ts, créez une application Hono et enregistrez-la pour l'événement fetch avec la fonction handle de l'adaptateur Service Worker. Cela permet à l'application Hono d'intercepter les accès à /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))

Utiliser fire()

La fonction fire() appelle automatiquement addEventListener('fetch', handle(app)), ce qui rend le code plus concis.

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. Exécution

Démarrez le serveur de développement.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm run dev

bun

bun run dev

Par défaut, le serveur de développement écoute sur le port 5173. Ouvrez http://localhost:5173/ dans votre navigateur pour terminer l'enregistrement du Service Worker. Ouvrez ensuite /sw pour voir la réponse de l'application Hono.