AG2L-pwa/components/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';

const styles = theme => ({
    cardSnack: {
        maxWidth: 345,
    },
    media: {
        height: 140,
    }
});

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

    isAvailable = () =>{
        console.log(this.buttonDisplay)
        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;
      }

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

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

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

        this.setState({ openSnack: false })
        console.log('prompted')
        if (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>
                <CardMedia
                    className={classes.media}
                    image="/static/images/help/addToHomeFull.png"
                    title="homeScreen"
                />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                    -> les PWA doivent encore s'installer manuellement sous IOS
                    </Typography>
                </CardContent>
                <CardActions>
                <Button name="compris" size="small" color="secondary" onClick={this.handleClose}>
                    j'ai compris
                </Button>
            </CardActions>
            </CardActionArea>
           
        </Card>);

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



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


export default withStyles(styles)(PWAInstallSnack)