<vcf-pwa-install-dialog>
Demo
https://vcf-pwa-install-dialog.netlify.com/
Installation
Install vcf-pwa-install-dialog
:
npm i @vaadin-component-factory/vcf-pwa-install-dialog --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-pwa-install-dialog';
And use it:
<vcf-pwa-install-dialog>
<div dialog-content>
Dialog content
</div>
</vcf-pwa-install-dialog>
Wrap the content of dialog in an element with dialog-content
attribute.
Styling
The following selectors are available for styling:
-
[part='wrapper']
: The element that wraps all the elements inside the dialog. -
[part='content']
: The element that wraps the contents of dialog.
How to provide styles of the content:
Create a dom-module
element like the following example and add your styles:
<dom-module id="my-pwa-styles" theme-for="vcf-pwa-install-dialog">
<template>
<style>
[part='wrapper'] {
padding: 1em;
}
[part='content'] {
max-width: 25em;
}
</style>
</template>
</dom-module>
Refer to demos for real-world examples.
Attributes
-
close-text
: The text for "Close" button. -
button-text
: The text for "Install" button. -
stop-showing-text
: The text for "Stop Showing" checkbox. -
opened
: Use it to toggle the dialog.
Events
The component fires 5 custom events:
-
vcf-pwa-prompt-shown
: when the dialog opens. -
vcf-pwa-prompt-dismissed
: when the dialog is closed. -
vcf-pwa-install-triggered
: when the user clicks the "install app" button. -
vcf-pwa-install-successful
: when the user installs the app. -
vcf-pwa-install-cancelled
: when the user cancels the installation of the app.
When the user checks the "Stop Showing" checkbox, a variable called vcf-pwa-stop-showing
is saved on localStorage. You can use this variable to avoid showing the dialog in future visits.
Refer to demos for an example.
Running demo
-
Fork the
vcf-pwa-install-dialog
repository and clone it locally. -
Make sure you have npm installed.
-
When in the
vcf-pwa-install-dialog
directory, runnpm install
to install dependencies. -
Run
npm start
to open the demo.
Contributing
To contribute to the component, please read the guideline first.
License
Apache License 2.0