Install the App block

The Install the App block (lh-web-application/install-button) puts a button on a page that opens the install sheet. Use it where asking makes sense on a particular site: a members’ page, a registration confirmation, a newsletter landing page. It adds to the automatic prompt rather than replacing it.

Settings

• Button text, typed on the button itself. Left empty, it reads Install the app.
• Alignment: left, centre or right, from the block toolbar.
• Trigger name (default block): reported as detail.trigger on the install sheet’s events, so analytics can tell one button from another. It is reduced to lower case letters, numbers, dashes and underscores.
• Hide once installed (on by default): hides the button in a browser that has installed the app.

How it works

• Rendered on the server as div.wp-block-lh-web-application-install-button holding button.wp-element-button with a data-lh-web-application-install attribute carrying the trigger name. The theme’s button styles apply; the install script opens the sheet from any element with that attribute.
• The button is always hidden inside the installed app, where it could do nothing (display-mode media queries, and the body class lh_web_application-is_standalone), and when printing.
• With Hide once installed on, the wrapper gets is-hidden-when-installed and is hidden while the body has lh_web_application-is_installed. The install script sets that class in a browser that has installed the app (remembered in localStorage) and clears it if the browser offers to install it again, meaning the app was removed. An install made on another device or before storage was cleared is not known, so the button shows there.
• Its small stylesheet loads only on pages that use the block. The editor script needs no build step.