-
Notifications
You must be signed in to change notification settings - Fork 2.7k
PLT-8231: Add landing page when deep linking to native app #208
Changes from 1 commit
05f9be0
d37f4fb
54a631d
9fc7a24
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Add protocol detection for desktop app - fixup to protocol - Moved logic to new router - Renamed folder to be more descriptive. Created proper PureComponent. Fix all issues related to string replacements. Fixed timeOut not working.
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
// See LICENSE.txt for license information. | ||
|
||
import React, {PureComponent} from 'react'; | ||
import {FormattedMessage} from 'react-intl'; | ||
import safeOpenProtocol from 'custom-protocol-detection'; | ||
|
||
import MattermostLogo from 'images/logo.png'; | ||
|
||
export default class GoNativeApp extends PureComponent { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
protocolUnsupported: false, | ||
browserUnsupported: false, | ||
}; | ||
} | ||
|
||
render() { | ||
const {protocolUnsupported, browserUnsupported} = this.state; | ||
|
||
let nativeLocation = window.location.href.replace('/vault#', ''); | ||
nativeLocation = nativeLocation.replace(/^(http|https)/, 'mattermost'); | ||
|
||
safeOpenProtocol(nativeLocation, | ||
() => this.setState({protocolUnsupported: true}), | ||
() => setTimeout(redirectWeb, 3000), | ||
() => this.setState({browserUnsupported: true}) | ||
); | ||
|
||
let goNativeAppMessage = null; | ||
if (protocolUnsupported) { | ||
goNativeAppMessage = ( | ||
<FormattedMessage | ||
id='get_app.protocolUnsupported' | ||
defaultMessage='Unable to open Mattermost.' | ||
/> | ||
); | ||
} else if (browserUnsupported) { | ||
goNativeAppMessage = ( | ||
<FormattedMessage | ||
id='get_app.browserUnsupported' | ||
defaultMessage='This browser does not support opening applications.' | ||
/> | ||
); | ||
} else { | ||
goNativeAppMessage = ( | ||
<FormattedMessage | ||
id='get_app.systemDialogMessage' | ||
defaultMessage='Please click `Open Mattermost` if you see the system dialog.' | ||
/> | ||
); | ||
} | ||
|
||
// prompt user to download in case they don't have the mobile app. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm guessing this is true for mobile and desktop apps, right? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, in case the user doesn't have it installed it should work for mobile and desktop apsp. |
||
return ( | ||
<div | ||
className='get-app get-android-app' | ||
style={{textAlign: 'center', marginTop: '50px'}} | ||
> | ||
<img | ||
src={MattermostLogo} | ||
className='get-app__logo' | ||
/> | ||
<div style={{fontSize: '30px', margin: '0 auto 65px'}}> | ||
<FormattedMessage | ||
id='get_app.launching' | ||
defaultMessage='Launching...' | ||
/> | ||
</div> | ||
<div style={{fontSize: '20px', margin: '0 auto 20px'}}> | ||
{goNativeAppMessage} | ||
</div> | ||
<div> | ||
<div style={{fontSize: '15px', width: '80%', margin: '0 auto'}}> | ||
<FormattedMessage | ||
id='get_app.ifNothingPrompts' | ||
defaultMessage='If nothing prompts from browser,' | ||
/> | ||
</div> | ||
<a | ||
href='/downloads' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this URL here should be taken from the config, also it would be ideal if we can detect if the browser is on desktop use the Also this option should be shown only if the setting for |
||
className='btn btn-primary get-android-app__open-mattermost' | ||
> | ||
<FormattedMessage | ||
id='get_app.downloadMattermost' | ||
defaultMessage='Download & run Mattermost' | ||
/> | ||
</a> | ||
</div> | ||
<a | ||
href='/' | ||
className='btn btn-secondary get-android-app__continue-with-browser' | ||
style={{marginTop: '30px'}} | ||
> | ||
<FormattedMessage | ||
id='get_app.continueToBrowser' | ||
defaultMessage='Continue to web site' | ||
/> | ||
</a> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
function redirectWeb() { | ||
window.location = window.location.href.replace('/vault#', ''); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
// See LICENSE.txt for license information. | ||
|
||
import {connect} from 'react-redux'; | ||
|
||
import GoToNativeApp from './go_to_native_app.jsx'; | ||
|
||
function mapStateToProps() { | ||
return {}; | ||
} | ||
|
||
export default connect(mapStateToProps)(GoToNativeApp); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,6 +10,7 @@ | |
"bootstrap-colorpicker": "2.5.2", | ||
"chart.js": "2.7.2", | ||
"compass-mixins": "0.12.10", | ||
"custom-protocol-detection": "uber-uchat/custom-protocol-detection", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is this a fork? if so, what is different from the original library? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, it's a fork and it adds |
||
"exif2css": "1.2.0", | ||
"fastclick": "1.0.6", | ||
"flux": "3.1.3", | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how do I get
/vault#
in any link, is it have to be added manually when sharing a link?Also I know the links are handled automatically by the mobile app but that is only true for self compiled apps, not for the mattermost app that is distributed through the app stores, I guess the idea would be to open this, but that keeps me thinking how is that going to be accomplished if the
/vault#
part of the URL needs to be there.