meteo-exam/web/index.html

<!doctype html>
<html lang="fr" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#020617" />
    <title>Météo Exam</title>

    <!-- PWA -->
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="apple-touch-icon" href="/icon-192.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Météo Exam" />
    <meta name="description" content="Le calendrier des évaluations scolaires, en bulletin météo interactif." />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
  </head>
  <body class="bg-slate-950 text-slate-100 font-sans h-full">
    <div id="app" class="flex items-center justify-center min-h-screen"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js').then((reg) => {
            // Si une nouvelle version du SW est disponible, on l'active.
            reg.addEventListener('updatefound', () => {
              const nw = reg.installing
              if (!nw) return
              nw.addEventListener('statechange', () => {
                if (nw.state === 'installed' && navigator.serviceWorker.controller) {
                  nw.postMessage({ type: 'SKIP_WAITING' })
                }
              })
            })
            // Quand un nouveau SW prend le contrôle, on recharge pour servir la nouvelle version.
            let refreshing = false
            navigator.serviceWorker.addEventListener('controllerchange', () => {
              if (refreshing) return
              refreshing = true
              window.location.reload()
            })
          }).catch(() => {})
        })
      }
    </script>
  </body>
</html>