<lm-installer-knapp> – Installer app-knapp / Install app button

Om komponenten

Kanonisk navn: <lm-installer-knapp>
Synonymer: installer app, legg til på hjem-skjerm, add to home screen, pwa install, beforeinstallprompt
Kategori: handling
ARIA-mønster: Ikke aktuelt - Komponenten er en vanlig knapp + et avsnitt med tekst - dekket fullt ut av native HTML-semantikk, uten noe eget interaksjonsmønster som trenger et APG-design pattern.
Parts: Ingen
Native-first-vurdering: Bruker utelukkende native plattform-API-er (beforeinstallprompt, appinstalled, matchMedia(display-mode), navigator.standalone) - det finnes ingen HTML-/CSS-alternativ til dette, siden installasjon krever et ekte, native browser-API-kall (event.prompt()).
Nettleserstøtte: beforeinstallprompt er kun implementert i Chromium-baserte nettlesere (Chrome, Edge, Android). Safari (iOS/macOS) og Firefox fyrer aldri eventen - iOS Safari får i stedet tekstlig veiledning, øvrige nettlesere uten støtte viser ingenting (ingen feil, kun fravær av installasjonsmulighet).
Design-tokens: var(--space-2xs, ...), var(--space-small, ...), var(--radius-medium, ...), var(--color-accent, ...), var(--color-surface, ...), var(--border-width, ...), var(--opacity-hover, ...), var(--font-size-small, ...), var(--opacity-muted, ...)
Sist endret: 20. september 2026
Brukt: 2 steder

Formål

Tilbyr brukeren å installere appen som en frittstående PWA, uten at hver app selv må implementere beforeinstallprompt-håndtering og iOS-spesifikk veiledning fra bunnen av.

Egner seg for

Innstillinger-/profilsider i installerbare PWA-er (manifest.webmanifest + service worker) som turer/ og okonomi/.
Steder der en tydelig, men ikke påtrengende, installasjonsmulighet gir mening (ikke som en forstyrrende modal ved første besøk).

Egner seg ikke for

Sider uten et gyldig manifest.webmanifest/service worker - da fyrer beforeinstallprompt aldri, og komponenten viser ingenting (ikke en feil i seg selv, men gir ingen verdi).
Påtrengende installasjonskampanjer rett ved sidelasting - plasser komponenten et sted brukeren aktivt oppsøker, som en innstillingsside.

Bruk

<script type="module" src="/designsystem/komponenter/handling/installer-knapp/installer-knapp.js"></script>

<lm-installer-knapp></lm-installer-knapp>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Slot	Beskrivelse
`knapp-tekst`	Knappeteksten som vises når beforeinstallprompt har fyrt (Chrome/Edge/Android). Standard: «Installer app».
`ios-tekst`	Veiledningsteksten som vises i stedet for knappen på iOS Safari, som aldri fyrer beforeinstallprompt. Standard forklarer Del -> Legg til på Hjem-skjerm.

Tilgjengelighet

Rendrer en vanlig <button> (tastaturoperabel, fokuserbar) som er skjult (hidden) helt til beforeinstallprompt faktisk fyrer - unngår et ubrukelig, deaktivert element i tab-rekkefølgen på nettlesere/plattformer uten støtte. iOS-veiledningen er vanlig avsnittstekst.

Bruker en vanlig, native <button> - ingen egen ARIA-rolle trengs.
Knappen er hidden (fjernet fra tab-rekkefølgen) helt til beforeinstallprompt faktisk fyrer.
Komponenten viser aldri noe hvis appen allerede kjører i frittstående/installert modus.

Detaljer

Lagrer det utsatte beforeinstallprompt-eventet og kaller event.prompt() ved klikk - eventet kan kun brukes én gang, så knappen skjules umiddelbart etter.
iOS-gjenkjenning skjer via navigator.userAgent utelukkende for å vise riktig, plattform-spesifikk veiledningstekst - ikke for å endre funksjonalitet for øvrig.
Sjekker matchMedia("(display-mode: standalone)") og navigator.standalone ved tilkobling for å unngå å tilby installasjon når appen allerede kjører installert.

Referanser

Brukes av:

turer/innstillinger/index.html - installasjonsmulighet for turer/ som PWA.
okonomi/innstillinger/index.html - installasjonsmulighet for okonomi/ som PWA.

Avhengigheter: designsystem/komponenter/ikon/ikon/