https://github.com/vaadin-component-factory/vcf-pwa-install-dialog
Vaadin Component Factory PWA Install Dialog
https://github.com/vaadin-component-factory/vcf-pwa-install-dialog
polymer3 pwa pwa-install-dialog pwa-installer vaadin webcomponent
Last synced: about 2 months ago
JSON representation
Vaadin Component Factory PWA Install Dialog
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-pwa-install-dialog
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2019-08-16T08:25:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-24T15:09:17.000Z (over 4 years ago)
- Last Synced: 2025-03-01T17:39:02.912Z (3 months ago)
- Topics: polymer3, pwa, pwa-install-dialog, pwa-installer, vaadin, webcomponent
- Language: JavaScript
- Homepage: https://vcf-pwa-install-dialog.netlify.com/
- Size: 48.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <vcf-pwa-install-dialog>
## Demo
https://vcf-pwa-install-dialog.netlify.com/
## Installation
Install `vcf-pwa-install-dialog`:
```sh
npm i @vaadin-component-factory/vcf-pwa-install-dialog --save
```
## Usage
Once installed, import it in your application:
```js
import '@vaadin-component-factory/vcf-pwa-install-dialog';
```
And use it:
```html
Dialog content
```
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:
```html
[part='wrapper'] {
padding: 1em;
}
[part='content'] {
max-width: 25em;
}
```
_Refer to [demos](https://vcf-pwa-install-dialog.netlify.com/) 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](https://vcf-pwa-install-dialog.netlify.com/) for an example._
## Running demo
1. Fork the `vcf-pwa-install-dialog` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vcf-pwa-install-dialog` directory, run `npm install` to install dependencies.
1. Run `npm start` to open the demo.
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
## License
Apache License 2.0