App Install Prompt Patterns

Platform Instructions

A static platform instruction fallback shows Field Notes, iOS Safari, Share then Add to Home Screen step, and Manual instructions status.

Program

Manual instructions help when a platform uses browser UI instead of an automatic install prompt.

platform_instruction_fallback.html
Visuals: captured from real browser rendering
<section class="platform-fallback" aria-labelledby="platform-fallback-title"><h2 id="platform-fallback-title">Platform instruction fallback</h2><div class="instruction-card" aria-label="Static platform instruction">Share then Add to Home Screen</div><dl>
  <div><dt>App</dt><dd>Field Notes</dd></div>
  <div><dt>Platform</dt><dd>iOS Safari</dd></div><div><dt>Step</dt><dd>Share then Add to Home Screen</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Manual instructions</span></dd></div></dl>
  <p class="check">Learner check: the manual step is visible without detecting a platform.</p>
  <p class="note">Static platform instruction fallback 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>
  .platform-fallback { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .instruction-card { justify-self: start; border: 1px solid #1d4ed8; background: #ffffff; padding: 8px 12px; font-weight: 700; }
  .platform-fallback dl { display: grid; gap: 8px; margin: 0; }
  .platform-fallback dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .platform-fallback dt { color: #475569; }
  .platform-fallback dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the platform instruction fallback.

    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 platform and step rows.

    The platform and step are exact pinned data.
    The platform and step are exact pinned data.

  4. Render manual-instructions status.

    The status badge says these are manual instructions.
    The status badge says these are manual instructions.

  5. Check instruction readback.

    The check says the manual step is visible without detecting a platform.
    The check says the manual step is visible without detecting a platform.

  6. Check platform instruction honesty.

    App, platform, step, status, and no live install.
    App, platform, step, status, and no live install.
step flow step(1) labels the source, step(2) shows the app, step(3) shows platform and step rows, step(4) shows manual-instructions status, step(5) checks the fallback readback, and step(6) checks the honesty note.
platform instruction readback The section heading names the platform instruction fallback surface.
instruction rows App, Platform, Step, and Status values are exact pinned data.
no platform detection 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.