UX/DX Checklist

Checklist

Here's a potential checklist for the user/developer experience of the <install> button:

As a user…

• when I click the <install> button in the browser and the app is not installed, it should install the app (either via a prompt, or directly, as Firefox does it when installed from the browser UI).
• when I click the <install> button in the browser and the app is already installed, it should invoke a reasonable action (e.g., launching the installed app or allowing to install the app again on WebKit, which intentionally allows multiple installs).
• when I click the <install> button in the installed app, it should invoke a reasonable action (e.g., uninstalling the app).

As a developer…

• when the app was successfully installed, I want to hide the install button (for example, via a media query or after an installed event was triggered, https://github.com/WICG/install-element/issues/12).
• when the app is launched in standalone mode, I want to hide the install button (for example, via a media query).
• I want to be able to feature-detect the possible "level" of installation (same-document, same-origin, cross-origin installs, see https://github.com/WICG/install-element/pull/11#issuecomment-3612050101).
• I want to have control over the styling of the button as much as possible (https://github.com/WICG/install-element/pull/11#issuecomment-3627929991).

UX/DX Comparison

For reference, here's my comparison sheet from TPAC regarding the different approaches:

Screen Recordings

The following recordings demonstrate the installation process across various platforms and browser engines. Additionally, they highlight where the browsing context is retained upon installation.

beforeinstallprompt (macOS, Chromium)

https://github.com/user-attachments/assets/2e04fc6b-7461-4a17-882a-75ab09f7f198

Installation (Android, Chrome)

https://github.com/user-attachments/assets/9cb3c779-40d3-4a6c-9eeb-f263ee821d58

Installation (Android, Edge)

https://github.com/user-attachments/assets/6ff417f0-cdad-4eb0-bf79-a271244205ae

Installation (Android, Firefox)

https://github.com/user-attachments/assets/436894d8-2454-4853-88db-be73beb5bae9

Installation (iOS, Safari)

https://github.com/user-attachments/assets/1a426a49-a22d-4106-8b9a-a2f609788b11

Installation (iOS, Chrome)

https://github.com/user-attachments/assets/0ed9234a-bf89-49a8-b150-5ab65be396d6

Installation (iOS, Edge)

https://github.com/user-attachments/assets/26e5ce38-5e11-4f73-98ab-d51cb8b4f27a

Installation (iOS, Firefox)

https://github.com/user-attachments/assets/2a4a5dde-4730-4eb7-b75a-a1961b0e94c2

Installation (macOS, Chromium)

https://github.com/user-attachments/assets/1e5f43ff-5828-4930-95c9-114bfd13e2c9

Installation (macOS, Safari)

https://github.com/user-attachments/assets/da6a7d84-ffbc-4834-a61f-e3939551e9ca

Installation (Windows, Firefox)

https://github.com/user-attachments/assets/abe07405-57b3-42f5-ad5d-de4dd07f13be

Start with the checklist, UX/DX comparison sheet, and platform screen recordings linked in the issue. Review the referenced beforeinstallprompt, WebKit, and install-element discussions to understand the unresolved installation behaviors and styling questions. Done would require turning the broad checklist into an agreed, implementable scope.