app/nextjs/components/organisms/PWAInstallSnack.js

import React, { Component, Fragment } from 'react';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import Collapse from '@material-ui/core/Collapse';

const styles = theme => ({
    Snackbar: {
        zIndex: 10001,
    },
    cardSnack: {
        maxWidth: 345,
    },
    media: {
        height: 140,
    },
    askToInstallText: {
        fontSize: '1.4em',
        fontWeight: '600',
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    },
    installApp: {
        width: '100%',
    },
    installStepText: {
        fontSize: '1.2em',
        fontWeight: '500',
        color: theme.palette.primary.main,
    },
    button: {
        color: theme.palette.primary.main,
        borderColor: theme.palette.primary.main,
        width: '50%',
    },
    buttonCompris: {
        width: '100%',
    },
});

class PWAInstallSnack extends Component {
    state = {
        openSnack: false,
        buttonDisplay: false
    }

    isAvailable = () => {
        return this.state.buttonDisplay;
    }

    initInstall = () => {
        this.setState({ openSnack: true })
    }
    getStateAndHelpers() {
        return {
            on: this.state.openSnack,
            initInstall: this.initInstall,
        }
    }
    iOS() {

        var iDevices = [
            'iPad Simulator',
            'iPhone Simulator',
            'iPod Simulator',
            'iPad',
            'iPhone',
            'iPod'
        ];

        if (!!navigator.platform) {
            while (iDevices.length) {
                if (navigator.platform === iDevices.pop()) { return true; }
            }
        }

        return false;
    }

    BeforePromptInstallTrigger() {
        this.setState({ buttonDisplay: true })
    }

    componentDidMount() {
        window.addEventListener('beforeinstallprompt', () => {
            this.BeforePromptInstallTrigger()
        })

        if (!!window.deferredPrompt)
            this.setState({ buttonDisplay: true });

        if (typeof window !== 'undefined') {
            // don't show if we are in App
            if (window.navigator.standalone ||
                window.matchMedia('(display-mode: standalone)').matches) {
                this.setState({ openSnack: false, buttonDisplay: false })
            }
            // else if (window.deferredPrompt === null) {
            //     this.setState({ openSnack: false, buttonDisplay: false })
            // }
            else if (this.IsSafari()) {
                this.setState({ openSnack: false, buttonDisplay: false })

                if (this.iOS())
                    {
                        this.setState({ openSnack: false, buttonDisplay: true })}
            }

        }
    }

    componentWillUnmount() {

        window.removeEventListener('beforeinstallprompt', () => {
            this.BeforePromptInstallTrigger()
        })
    }

    //A2HS 'Add 2 Home Screen'
    PromptA2HS = (event, reason) => {

        this.setState({ openSnack: false })
        if (typeof window !== 'undefined') {
            window.promptInstall();
        }
    }
    IsSafari = () => {
        if (typeof window !== 'undefined') {
            var isSafari = /Safari/.test(window.navigator.userAgent) && /Apple Computer/.test(window.navigator.vendor);
            return isSafari;
        } else
            return false;
    }
    handleClose = () => {
        this.setState({ openSnack: false });
    }

    render() {
        const { classes } = this.props;
        var safariSnack = (<Card className={classes.cardSnack}>
            <CardActionArea>
                <CardContent>
                    <Typography gutterBottom component="h2">
                        Suivez les instructions ci -dessous :
                    </Typography>
                    <Typography gutterBottom align="center" component="h2" className={ classes.installStepText }>
                        Etape 1 : 
                    </Typography>
                    <img alt="installer-pwa" src='/static/images/help/safari-actions.png' className={classes.installApp} />
                    <Typography gutterBottom align="center" component="h2" className={ classes.installStepText }>
                        Etape 2 : 
                    </Typography>
                    <img alt="installer-pwa" src='/static/images/help/safari-install-app.png' className={classes.installApp} />
                </CardContent>
                <CardActions>
                    <Button name="compris" className={classes.buttonCompris} color="primary"  onClick={this.handleClose}>
                        j'ai compris
                </Button>
                </CardActions>
            </CardActionArea>
        </Card>);

        var usualSnack = (<Card className={classes.cardSnack}>
            <CardActionArea>
                <CardContent>
                    <Typography gutterBottom component="h2" className={ classes.askToInstallText }>
                        Voulez-vous installer notre application  ?
                    </Typography>
                </CardContent>
            </CardActionArea>
            <CardActions>
                <Button className={classes.button} color="primary" name='oui' size="small" onClick={this.PromptA2HS}>
                    oui
                </Button>
                <Button className={classes.button} color="primary" name='non' size="small" onClick={this.handleClose}>
                    non
                </Button>
            </CardActions>
        </Card>);



        return <Fragment>
            <Snackbar
                className={ classes.Snackbar }
                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                open={this.state.openSnack}
                onClose={this.handleClose}
                ContentProps={{
                    'aria-describedby': 'message-id',
                }}>
                {this.IsSafari() ? safariSnack : usualSnack}
            </Snackbar>
            <Collapse in={this.state.buttonDisplay}>
                {this.state.buttonDisplay && this.props.children(this.getStateAndHelpers())}
            </Collapse>
        </Fragment>

    }
}


export default withStyles(styles)(PWAInstallSnack)