react-pwa-installer-prompt

react-pwa-installer-prompt

Provide your own custom install flow, directly within your app, Progressive Web App (PWA) directly within the user interface of your app makes easier for users to install your PWA on their mobile or desktop device.

Package is helpfull for

In-app install flow : Even though most of the browser provides an option to Add to home screen, some users don't realize that they can install a PWA. It can be helpful to provide an in-app experience. So, that you can promote and enable installation of your PWA.

This package reduces the pain of the development and gives you a wings to have your custom implementation to display promotion with a simple steps.

Pre-Requisites

Make sure that your PWA is installable and Proper configured Manifest file

Installation

npm i --save react-pwa-installer-prompt

Importing

import PWAInstallerPrompt from 'react-pwa-installer-prompt';

Usage

const App = () => {
  return (
    <PWAInstallerPrompt 
      render={({ onClick }) => (
        <button type="button" onClick={onClick}> // make sure you pass onClick
          Install
        </button>
      )}
      callback={(data) => console.log(data)} 
    />
  );
}
export default App;

Demo

Visit here for the demo. (Shows + icon in the omnibox).

For the good experience open-up in mobile https://naveenh.xyz. (Install option will be popped in the footer).

Props

Props	Type	Description
render	function	Your custom component as a function to show in-app promo. It is mandatory to pass onClick in the button or any element where click event triggers
callback	object	Package has identified the events which are being triggers during installation process, When ever an event changes the callback gives you the installation status.

Ex: You can have a custom component for in-app promo

import React from 'react';
import { Row, Col, Button } from 'antd';
import PWAInstallerPrompt from 'react-pwa-installer-prompt';

const Install = () => {       
  return (  
    <PWAInstallerPrompt 
      render={({ onClick }) => (
        <Row align="middle" justify="center">
          <Col span={16}>
              Keep App, For Offline & Quick Access!
          </Col>
          <Col span={6}>
            <Button type="dashed" onClick={onClick}>
              Install
            </Button>
          </Col>
        </Row>
      )}
      callback={(data) => console.log(data)} 
    />
  )
}
export default Install;

Callback properties:

{
   isInstallAllowed: true, // true, if app in not installed and when user has cancelled the request
   isInstallWatingConfirm: false, // true, if user has clicked on install and not confirmed 
   isInstalling: false, // true, if being installed
   isInstallCancelled: false, // true, if user has cancelled 
   isInstallSuccess: false, // true, if install success
   isInstallFailed: false // true, if installation is failed
}

Use Full Links

• Add a web app manifest
• Pattern for promoting

License

MIT © Naveen Heroorkar