Connection Status

En side som mister forbindelsen ser helt normal ut, men er frosset. Fyller brukeren ut et skjema inn i en død forbindelse, er alt borte når hun trykker send.

// main.ts, kjøres én gang når appen starter
import { defineFsConnectionStatus } from "@fristil/designsystem/connection-status"
import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/connection-status.css"

defineFsConnectionStatus()

Slik tar du den i bruk

Prøv den

Ren HTML

<!-- Stilarkene siden trenger. Uten byggesteg er det `<link>`, ikke
     `import`: en nettleser slår ikke opp et pakkenavn. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/frittstaende/connection-status/connection-status.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<fs-connection-status class="fs-connection-status" data-ignore-morph></fs-connection-status>

<!-- Én gang for hele appen, i sidemalen. Ikke én gang per komponent. -->
<script type="module">
  import { defineFsConnectionStatus } from
    "https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/components/frittstaende/connection-status/fs-connection-status.js"

  defineFsConnectionStatus()
</script>

<script type="module">
  const samband = document.querySelector("fs-connection-status")
  if (!samband) throw new Error("fant ikke elementet")

  async function lagre(body) {
    try {
      const svar = await fetch("/api/lagre", { method: "POST", body })
      if (!svar.ok) throw new Error(svar.statusText)
      samband.reportSuccess()
    } catch {
      samband.reportFailure()
    }
  }
</script>

React

// src/fristil.d.ts, gir <fs-connection-status> typer i JSX
import "@fristil/designsystem/react-jsx"

import "@fristil/designsystem/connection-status.css"
import { fs } from "@fristil/designsystem/react"
import {
  defineFsConnectionStatus,
  reportFailure,
  reportSuccess,
} from "@fristil/designsystem/connection-status"
import "@fristil/designsystem/tokens.css"

defineFsConnectionStatus()

export function Samband() {
  return <fs-connection-status {...fs.connectionStatus()} />
}

export async function lagre(body: BodyInit) {
  const samband = document.querySelector("fs-connection-status")
  if (!samband) throw new Error("fant ikke elementet")
  try {
    const svar = await fetch("/api/lagre", { method: "POST", body })
    if (!svar.ok) throw new Error(svar.statusText)
    await reportSuccess(samband)
  } catch {
    await reportFailure(samband)
  }
}

reportFailure(element) og reportSuccess(element) venter på at registreringen har kjørt før de kaller metoden. Et kall som kommer før defineFsConnectionStatus(), som den første meldingen fra en hendelsesstrøm, blir da gjort i det elementet er klart, i stedet for å feile.

Datastar

<!-- Datastar selv. Uten den gjør `data-`-attributtene under ingenting. -->
<script type="module"
        src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"></script>

<!-- Stilarkene siden trenger. Uten byggesteg er det `<link>`, ikke
     `import`: en nettleser slår ikke opp et pakkenavn. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/frittstaende/connection-status/connection-status.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<!-- Én gang for hele appen, i sidemalen. Ikke én gang per komponent. -->
<script type="module">
  import { defineFsConnectionStatus } from
    "https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/components/frittstaende/connection-status/fs-connection-status.js"

  defineFsConnectionStatus()
</script>

<fs-connection-status class="fs-connection-status" data-ignore-morph></fs-connection-status>

Datastar holder en langlevende strøm mot serveren. Ryker den, ser siden riktig ut, men slutter å oppdatere seg. Det er nettopp da denne linja er forskjellen på en bruker som vet det og en som ikke gjør det.

Hvorfor den eier sitt eget innhold

Serveren kan per definisjon ikke fortelle deg at den er utilgjengelig. Er den nede, kommer det ingenting derfra å rendre. Derfor lager komponenten innholdet selv, og byggefunksjonen setter data-ignore-morph så en senere patch ikke river linja bort i det øyeblikket forbindelsen er tilbake. Se Markup og oppførsel.

navigator.onLine er ikke nok

Nettleseren vet bare om maskinen har et nettverk, ikke om serveren svarer. Et kontornett uten utgang til internett, en server som er nede, eller en strøm som har røket teller alle som «online».

Derfor melder appen selv fra:

const samband = document.querySelector("fs-connection-status")
if (!samband) throw new Error("fant ikke elementet")

try {
  await fetch("/api/lagre", { method: "POST", body })
  samband.reportSuccess()
} catch {
  samband.reportFailure()
}

Metode	Når du kaller den
reportFailure()	Et kall til serveren feilet
reportSuccess()	Et kall lyktes igjen

reportFailure(element) og reportSuccess(element) fra @fristil/designsystem/connection-status gjør det samme, men venter først på at elementet er registrert.

Komponenten lytter i tillegg på nettleserens offline og online, så et nettverk som forsvinner fanges uten at du gjør noe.

Attributter og hendelser

Attributt	Standard
offline-text	«Ingen forbindelse. Det du skriver blir ikke lagret.»
online-text	«Forbindelsen er tilbake.»

Hendelse	Når
connection-lost	Linja kommer til syne. Én gang per utfall, uansett hvor mange offline-hendelser nettleseren sender
connection-restored	Forbindelsen er tilbake

Klasser du kan style

Klasse	Hva det er
.fs-connection-status	Vertselementet. Ligger som display: contents og tar ingen plass
.fs-connection-status__bar	Selve linja. Har data-state="offline" eller data-state="online"

Variabel	Reserve
--fs-connection-status-layer	1000
--fs-connection-status-padding	var(--fs-spacing-2) var(--fs-spacing-4)

.fs-connection-status__bar {
  --fs-connection-status-layer: 9999;
}

Tilgjengelighet

Linja er role="status" med aria-live="polite", ikke alert. Beskjeden er viktig, men skal ikke avbryte midt i et ord. Den blir stående til forbindelsen er tilbake, så den som leser sakte rekker den.

Fargen alene bærer ikke beskjeden: teksten sier hva som er galt. I Windows’ høykontrastmodus fjernes egne farger og bakgrunner, og linja får derfor en ramme i CanvasText, ellers ville den vært usynlig.