App Install Prompt Patterns

Install Preview

A static app install prompt preview shows Field Notes, Add to home screen action, Opens from app icon benefit, and Prompt preview status.

Program

Install prompt previews should explain what the install surface says before any browser prompt appears.

install_prompt_preview.html
Visuals: captured from real browser rendering
<section class="install-preview" aria-labelledby="install-preview-title"><h2 id="install-preview-title">Install prompt preview</h2><div class="install-card" aria-label="Static app install preview"><span class="app-icon">FN</span><span>Add to home screen</span></div><dl>
  <div><dt>App</dt><dd>Field Notes</dd></div>
  <div><dt>Action</dt><dd>Add to home screen</dd></div><div><dt>Benefit</dt><dd>Opens from app icon</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Prompt preview</span></dd></div></dl>
  <p class="check">Learner check: the install prompt is visible before any browser prompt.</p>
  <p class="note">Static install prompt preview only; no beforeinstallprompt event, appinstalled event, service worker, manifest fetch, install criteria check, platform detection, browser UI, route, API, network, storage, cookie, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, account/session behavior, app installation, bookmark creation, or live submission runs.</p></section>
<style>
  .install-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .install-card { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; justify-self: start; border: 1px solid #0f766e; background: #ffffff; padding: 8px 12px; }
  .app-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; background: #0f766e; color: #ffffff; font-weight: 700; }
  .install-preview dl { display: grid; gap: 8px; margin: 0; }
  .install-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .install-preview dt { color: #475569; }
  .install-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the install preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show app row.

    The app name is exact pinned data.
    The app name is exact pinned data.

  3. Show action and benefit rows.

    The action and benefit are exact pinned data.
    The action and benefit are exact pinned data.

  4. Render prompt-preview status.

    The status badge says this is a prompt preview.
    The status badge says this is a prompt preview.

  5. Check install preview readback.

    The check says the install prompt is visible before any browser prompt.
    The check says the install prompt is visible before any browser prompt.

  6. Check install preview honesty.

    App, action, benefit, status, and no live install.
    App, action, benefit, status, and no live install.
step flow step(1) labels the source, step(2) shows the app, step(3) shows action and benefit rows, step(4) shows prompt-preview status, step(5) checks the install preview readback, and step(6) checks the honesty note.
install preview readback The section heading names the install prompt preview surface.
install rows App, Action, Benefit, and Status values are exact pinned data.
no live install prompt The lesson should not imply beforeinstallprompt events, appinstalled events, service workers, manifest fetches, install criteria checks, platform detection, browser UI, routes, APIs, networks, storage, cookies, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, account/session behavior, app installation, bookmark creation, or live submissions.