react-pwa-add-to-homescreen
Version:
React Component install PWA - Add To Homescreen
56 lines (43 loc) • 3.42 kB
Markdown
A React Component providing add-to-home-screen functionality for PWA on IOS (IPhone) and Chrome (Android).
<img src="demo-screen-android.png" align="right" title="Screenshot" width="200px">
1. [What is it](
2. [Usage](
3. [Options](
4. [Example](
5. [Licence](
`react-pwa-add-to-homescreen` inform user that your applications is a PWA and installable on the iOS and Android home screen
Import component:
```
import { AddToHomeScreen } from 'react-pwa-add-to-homescreen';
```
Then add component to your app:
```
<AddToHomeScreen />
```
All props for components `AddToHomeScreen`
| Prop | Type | Description |Default |
| ------------------------ | -------- | -------------------------------- |-------------------------------- |
| delayNotify? | number | Show the message after some ms | `0` |
| skipFirstVisit? | boolean | Show message only to returning visitors | `true` |
| | | | |
| cookie? | object | Cookie params | `{}` |
| `cookie.name?` | string | Set cookie name | `add-to-home-screen-pwa` |
| `cookie.expireDays?` | number | Days to be notified again | `30` |
| styles? | object | Override or extend the styles applied to the component.| `{}` |
| | | | |
| translate? | object | Translate texts for notify components | `{}` |
| `translate.headline?` | string | Heading texts for notify components | `''` |
| `translate.bottomline?` | string | Bottom line texts for notify components | `''` |
| `translate.safariTapShare?` | string | Text tap share | `Tap "Share"` |
| `translate.safariAddHomeScreen?` | string | Text Safari "Add to Home Screen" | `select "Add to Home Screen"` |
| `translate.chromiumAddHomeScreen?`| string | Text Chrome "Add to Home Screen" | `Click "Add to Home Screen" in your browser menu` |
| `translate.chromiumInstall?` | string | Text Chrome Install | `The app icon will be displayed on your screen` |
| `translate.buttonInstall?` | string | Text Chrome Button Install | `install` |
Run the example locally with command `npm run start:example`. It is then available under `http://localhost:3000`
See the LICENSE file for more info.