← Back

vcf-pwa-install-dialog

Vaadin Component Factory PWA Install Dialog

Author

Rating

Popularity

<100

<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/vcf-pwa-install-dialog.js';

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, run npm install to install dependencies.
Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

@polymer/polymer#^3.0.0
@vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0
@vaadin/vaadin-button#2.2.0
@vaadin/vaadin-checkbox#^2.2.10
@vaadin/vaadin-dialog#^2.2.1
@vaadin/vaadin-element-mixin#^2.1.3
@vaadin/vaadin-lumo-styles#^1.5.0
@vaadin/vaadin-themable-mixin#^1.4.4

Released: 2019-09-03
Maturity: IMPORTED
License: Other

Compatibility

Framework: Polymer 3.0+
Browser: Browser Independent

vcf-pwa-install-dialog - Vaadin Add-on Directory

Vaadin Component Factory PWA Install Dialog

# <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/vcf-pwa-install-dialog.js'; ``` 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 ``` _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 Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE. Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Online Demo
View on GitHub
License
View on NPM

vcf-pwa-install-dialog version 0.1.0
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#^2.2.1 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.1.1
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.2.0
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.2.1
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.3.0
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.3.1
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.3.2
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.3.3
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 0.3.4
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-pwa-install-dialog version 1.0.0
### Dependencies * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-pwa-install-helpers#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-checkbox#^2.2.10 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-themable-mixin#^1.4.4

Directory