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: [e-mail]

🔧 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...