https://github.com/jacobdb/pwa-install-prompt
Prompt users to add your PWA to their home screen, since Apple won’t.
https://github.com/jacobdb/pwa-install-prompt
Last synced: over 1 year ago
JSON representation
Prompt users to add your PWA to their home screen, since Apple won’t.
- Host: GitHub
- URL: https://github.com/jacobdb/pwa-install-prompt
- Owner: JacobDB
- License: mit
- Created: 2018-10-22T21:28:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-12-03T14:55:08.000Z (over 5 years ago)
- Last Synced: 2025-03-10T21:49:55.363Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://jacobdb.github.io/pwa-install-prompt/demo/
- Size: 88.9 KB
- Stars: 127
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PWA Install Prompt
Prompt users to add your PWA to their home screen, since Apple won’t.
By default, this module checks if the user has not visited the site before, or if the last time they visited the site was more than 90 days ago, and if they are using iOS. If all conditions are met, then the prompt is shown. The conditions that get checked can be overridden in order to use this prompt for custom scenarios.
*[Inspired by Scott Batson @ DockYard](https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios)*
## Demo
https://jacobdb.github.io/pwa-install-prompt/demo/
## Installation
### via npm
```sh
npm install pwa-install-prompt --save
```
### via yarn
```sh
yarn add pwa-install-prompt
```
## Usage
```js
import pwaInstallPrompt from "pwa-install-prompt";
new pwaInstallPrompt(".pwa-install-prompt__container", {
active_class: "is-active",
closer: ".pwa-install-prompt__overlay",
condition: null,
expires: 180,
show_after: 90,
on: {
beforeOpen: function () {
console.log("before open!");
},
afterOpen: function () {
console.log("after open!");
},
beforeClose: function () {
console.log("before close!");
},
afterClose: function () {
console.log("after close!");
},
}
});
```
## Default Markup
```html
Close
Install {app_name}
Install this application on your home screen for quick and easy access when you’re on the go.
Just tap Share then “Add to Home Screen”
```
## Options
| Option | Type | Default | Description |
|----------------|------------|-----------------------------------------|-------------------------------------------------------------|
| `active_class` | `string` | `is-active` | Class name to be added when the prompt is visible |
| `closer` | `string` | `.pwa-install-prompt__overlay` | Query selector to target to handle closing the prompt |
| `condition` | `function` | `null` | Set a custom condition to determine when to show the prompt |
| `expires` | `number` | `180` | Number of days before the `last_visit` cookie expires |
| `show_after` | `number` | `90` | Number of days to wait before showing the prompt again |
| `on` | `object` | `null` | Register event handlers |
## Events
Events can be assigned in two ways:
1. Using on parameter on PWA Install Prompt initialization:
var prompt = new pwaInstallPrompt(".pwa-install-prompt__container", {
// ...
on: {
open: function () {
console.log("prompt opened!");
},
},
});
2. Using on method after PWA Install Prompt initialization.
var prompt = new pwaInstallPrompt(".pwa-install-prompt__container", {
// ...
});
prompt.on("open", function () {
console.log("prompt opened!");
});
| Name | Description |
|---------------|---------------------------------------------------|
| `beforeOpen` | Event will be fired right before prompt is opened |
| `afterOpen` | Event will be fired right after prompt is opened |
| `beforeClose` | Event will be fired right before prompt is closed |
| `afterClose` | Event will be fired right after prompt is closed |
## Contributors
- [Jacob Bearce](https://github.com/JacobDB) – [Commits](https://github.com/JacobDB/pwa-install-prompt/commits?author=JacobDB)
- [Sergio Arbeo](https://github.com/Serabe) – [Commits](https://github.com/JacobDB/pwa-install-prompt/commits?author=Serabe)