109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
|
import React from 'react'
|
|||
|
|
import PropTypes from 'prop-types'
|
|||
|
|
import Button from '../button'
|
|||
|
|
import Text from '../text'
|
|||
|
|
|
|||
|
|
class PWAInjection extends React.PureComponent {
|
|||
|
|
|
|||
|
|
deferredPrompt=null
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
window.addEventListener('beforeinstallprompt',(e) => {
|
|||
|
|
console.log("e:",e)
|
|||
|
|
// Prevent the mini-infobar from appearing on mobile
|
|||
|
|
e.preventDefault()
|
|||
|
|
// Stash the event so it can be triggered later.
|
|||
|
|
this.deferredPrompt=e
|
|||
|
|
// Update UI notify the user they can install the PWA
|
|||
|
|
// showInstallPromotion()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
window.addEventListener('appinstalled',(evt) => {
|
|||
|
|
// Log install to analytics
|
|||
|
|
console.log('INSTALL: Success')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
window.addEventListener('DOMContentLoaded',() => {
|
|||
|
|
let displayMode='browser tab'
|
|||
|
|
if(navigator.standalone) {
|
|||
|
|
displayMode='standalone-ios'
|
|||
|
|
}
|
|||
|
|
if(window.matchMedia('(display-mode: standalone)').matches) {
|
|||
|
|
displayMode='standalone'
|
|||
|
|
}
|
|||
|
|
// Log launch display mode to analytics
|
|||
|
|
console.log('DISPLAY_MODE_LAUNCH:',displayMode)
|
|||
|
|
|
|||
|
|
window.matchMedia('(display-mode: standalone)').addListener((evt) => {
|
|||
|
|
let displayMode='browser tab';
|
|||
|
|
if(evt.matches) {
|
|||
|
|
displayMode='standalone';
|
|||
|
|
}
|
|||
|
|
// Log display mode change to analytics
|
|||
|
|
console.log('DISPLAY_MODE_CHANGED',displayMode);
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleOnClick=() => {
|
|||
|
|
// Hide the app provided install promotion
|
|||
|
|
// hideMyInstallPromotion()
|
|||
|
|
// Show the install prompt
|
|||
|
|
this.deferredPrompt.prompt()
|
|||
|
|
// Wait for the user to respond to the prompt
|
|||
|
|
this.deferredPrompt.userChoice.then((choiceResult) => {
|
|||
|
|
if(choiceResult.outcome==='accepted') {
|
|||
|
|
console.log('User accepted the install prompt')
|
|||
|
|
} else {
|
|||
|
|
console.log('User dismissed the install prompt')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
|
|||
|
|
// : todo :
|
|||
|
|
return <div />
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={[_s.d,_s.w100PC,_s.px15,_s.mb15].join(' ')}>
|
|||
|
|
<div className={[_s.d,_s.w100PC,_s.py15,_s.px10,_s.boxShadowBlock,_s.radiusSmall,_s.bgPrimary].join(' ')}>
|
|||
|
|
<div className={[_s.d,_s.py15,_s.px10].join(' ')}>
|
|||
|
|
<Text size='large' align='center' className={_s.mb10}>
|
|||
|
|
We’re not on the app stores, but you can still get the Gab app on your phone.
|
|||
|
|
</Text>
|
|||
|
|
<Text size='large' align='center'>
|
|||
|
|
Click install to learn how.
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={[_s.d,_s.mt10,_s.mb5,_s.flexRow,_s.mlAuto,_s.mrAuto].join(' ')}>
|
|||
|
|
<Button
|
|||
|
|
backgroundColor='none'
|
|||
|
|
color='secondary'
|
|||
|
|
className={_s.mr15}
|
|||
|
|
>
|
|||
|
|
Not now
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
onClick={this.handleOnClick}
|
|||
|
|
>
|
|||
|
|
<Text color='inherit' weight='medium' className={_s.px10}>
|
|||
|
|
Install
|
|||
|
|
</Text>
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
PWAInjection.propTypes = {
|
|||
|
|
injectionId: PropTypes.string,
|
|||
|
|
isXS: PropTypes.string,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default PWAInjection
|