AkkomaGang/masto-fe
2
2
Fork 0
Code Issues 3 Pull requests Projects Releases Wiki Activity

fix(web_push_notification): Do not hard reload tab (#4380)

Browse source 
* fix(web_push_notification): Do not hard reload tab

* fix(web_push_notification_worker): Guard against null subscription

* refactor: Incorporate pull request feedback
This commit is contained in:
Sorin Davidoi 2017-07-28 05:06:01 +02:00 committed by Eugen Rochko
parent 0f92119ceb
commit 3e01a7e677
2 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/javascript/mastodon/features/ui/index.js
View file

@ -49,6 +49,10 @@ const mapStateToProps = state => ({
@connect(mapStateToProps) @connect(mapStateToProps)
export default class UI extends React.PureComponent { export default class UI extends React.PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
}
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
children: PropTypes.node, children: PropTypes.node,
@ -123,6 +127,14 @@ export default class UI extends React.PureComponent {
this.setState({ draggingOver: false }); this.setState({ draggingOver: false });
} }
handleServiceWorkerPostMessage = ({ data }) => {
if (data.type === 'navigate') {
this.context.router.history.push(data.path);
} else {
console.warn('Unknown message type:', data.type); // eslint-disable-line no-console
}
}
componentWillMount () { componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true }); window.addEventListener('resize', this.handleResize, { passive: true });
document.addEventListener('dragenter', this.handleDragEnter, false); document.addEventListener('dragenter', this.handleDragEnter, false);
@ -131,6 +143,10 @@ export default class UI extends React.PureComponent {
document.addEventListener('dragleave', this.handleDragLeave, false); document.addEventListener('dragleave', this.handleDragLeave, false);
document.addEventListener('dragend', this.handleDragEnd, false); document.addEventListener('dragend', this.handleDragEnd, false);
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
}
this.props.dispatch(refreshHomeTimeline()); this.props.dispatch(refreshHomeTimeline());
this.props.dispatch(refreshNotifications()); this.props.dispatch(refreshNotifications());
} }

35
app/javascript/mastodon/service_worker/web_push_notifications.js
View file

@ -50,22 +50,37 @@ const makeRequest = (notification, action) =>
credentials: 'include', credentials: 'include',
}); });
const findBestClient = clients => {
const focusedClient = clients.find(client => client.focused);
const visibleClient = clients.find(client => client.visibilityState === 'visible');
return focusedClient || visibleClient || clients[0];
};
const openUrl = url => const openUrl = url =>
self.clients.matchAll({ type: 'window' }).then(clientList => { self.clients.matchAll({ type: 'window' }).then(clientList => {
if (clientList.length !== 0 && 'navigate' in clientList[0]) { // Chrome 42-48 does not support navigate if (clientList.length !== 0) {
const webClients = clientList const webClients = clientList.filter(client => /\/web\//.test(client.url));
.filter(client => /\/web\//.test(client.url))
.sort(client => client !== 'visible');
const visibleClient = clientList.find(client => client.visibilityState === 'visible'); if (webClients.length !== 0) {
const focusedClient = clientList.find(client => client.focused); const client = findBestClient(webClients);
const client = webClients[0] || visibleClient || focusedClient || clientList[0]; const { pathname } = new URL(url);
return client.navigate(url).then(client => client.focus()); if (pathname.startsWith('/web/')) {
} else { return client.focus().then(client => client.postMessage({
return self.clients.openWindow(url); type: 'navigate',
path: pathname.slice('/web/'.length - 1),
}));
}
} else if ('navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
const client = findBestClient(clientList);
return client.navigate(url).then(client => client.focus());
}
} }
return self.clients.openWindow(url);
}); });
const removeActionFromNotification = (notification, action) => { const removeActionFromNotification = (notification, action) => {