react-pwa-installer v1.3.4-0
react-pwa-installer
Turn your React Site into PWA App for Android, iOS and Desktop with a customizable banner.
đ What does this package do?
react-jwt-installer
allows you to easily inform visitors that your React Site is installable and a native-like app can be placed on a smartphone or desktop's home screen for a more integrated, fast and smooth access through the app. A banner will appear with a customizable title, icon and colors and offering your new App installation. You can also control when this component should appear and how. đ
đĨ Live Demo
You can see one example from the customized installation banner here: awesome-pwa-demo
đ Instructions
Note that this component's installation is a piece in the process of building a complete PWA App. I will write an article on Medium Media to a complete step-by-step to get it done from manifest.json
to service worker
that requires to run your app. Let me know if you have a genuine interest about that, contact me here: mr.febro@gmail.com
đ§ Installation
$ npm i --save react-pwa-installer
đ Usage
import PwaInstaller from 'react-jwt-installer';
Then add the component to the main component of your app:
...
<AllModals />
<PwaInstaller
title="<strong>Download your awesome app here</strong><br />and have a faster and awesome<br />access experience"
icon={`/icons/cool-192.png`}
/>
<Footer />
</BrowserRouter>
);
}
âī¸ API - props
These are props that allow you customize the component as follows:
Prop | Type | Default Value | Description |
---|---|---|---|
icon (mandatory) | string | - | Icon for banner. This need to be a relative path where your icon is located in your project |
title (optional) | string | add to homescreen | Your title for the banner. Note that you can add html tags to customize or even break rows with a HTML parser |
color (optional) | string | black | the color for both the closing button and action text to call your users to download your app |
backgroundColor (optional) | string | white | the background color can also be gradients or nice color patterns like those here |
run (optional) | boolean | true | this allow you run the banner programmatically. You can use something like useState to switch the state after some user's action (e.g after user registration) |
đĒ Contributing
I would appreciate feedbacks for improvements or new ideas... feel free to open an issue or a pull request here!
Šī¸ License
react-pwt-installer
was created by @luisFebro. It is available under the MIT license. See the LICENSE.md file for more info.
â ī¸ Disclaimer
Please, note that this package is still under construction and it may not work in your project as expected. Come back a few hours...