The "beforeinstallprompt" event.
If you're adding the layer after the event got fired, you can catch the event on your own and provide it by using this property.
A css query selector which defines an element to which the focus will shift when the layer gets closed. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.
Did the user agreed to install the app or is it the installed app already?
Is the layer open?
Use the property to open/close the layer.
A css query which defines elements which will be aria-hidden="true" when the layer gets open. When closed again, the aria-hidden attribute is removed again.
If an element had aria-hidden="true" before opening the layer, it will keep aria-hidden="true" after closing the layer again.
Is it possible to install the app?
Added as "aria-label" to the close button.
A text which marks the ending of the layer. Only visible for screen readers.
Added as "aria-label" to the enclosing aside tag.
A text which marks the beginning of the layer. Only visible for screen readers.
Fires when the installation of the app is possible. Does not fire if this.installed == true.
Fires when the user agreed to install the app or it is the installed app?
Fires when the layer opened.
Generated using TypeDoc
A layer which explains to the user how to install the PWA or provides a button for installation if the browser supports it.
Judge, depending on the values of "possible" and "install", if you want to show the layer or a button which opens the layer. Usually you want possible == true and installed == false. These values can change -> listen to the events!
If the browser supports the "beforeinstallprompt", an installation button is shown. Since the button can only be used ones, a description is show on how to install the app after the button is used.
The layer comes with prerendered default content which can be overwritten. Here the slot names:
header -> the header
button -> the install button text
desktop-chrome -> installation instructions for chrome on desktop
desktop-edge -> installation instructions for new edge (chrome based) on desktop
desktop-edge-html -> installation instructions for old edge on desktop
mobile-chrome -> installation instructions for chrome on android
mobile-edge -> installation instructions for edge on android
mobile-opera -> installation instructions for opera on android
mobile-opera-mini -> installation instructions for opera mini on android
mobile-firefox -> installation instructions for firefox on android
mobile-samsung -> installation instructions for samsung browser on android
mobile-safari -> installation instructions for safari on mobile
button-used -> general installation instructions for a browser on android which fired the "beforeinstallprompt", therefore is able to install the PWA and showed the button but is not one of the browser above
The general slot contains general text.