pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix service worker and notifications init for FF and Safari

Browse Source
This commit is contained in:
or-else
2023-01-09 11:18:21 -08:00
parent 45fbff1b4a
commit ba94788fbe
9 changed files with 105 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/tinode-web.jsx
+34 -24
View File
@@ -299,11 +299,7 @@ class TinodeWeb extends React.Component {
}).then(_ => {
// Initialize desktop alerts.
if (this.state.desktopAlertsEnabled) {
this.initFCMessaging().then(_ => {
if (this.state.desktopAlerts) {
this.tinode.setDeviceToken(this.state.firebaseToken);
}
}).catch(_ => {
this.initFCMessaging().catch(_ => {
// do nothing: handled earlier.
// catch needed to pervent unnecessary logging of error.
});
@@ -370,20 +366,27 @@ class TinodeWeb extends React.Component {
const onError = (msg, err) => {
console.error(msg, err);
this.handleError(formatMessage(messages.push_init_failed), 'err');
this.setState({desktopAlertsEnabled: false, firebaseToken: null});
this.setState({firebaseToken: null});
LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
}
try {
this.fcm = firebaseGetMessaging(firebaseInitApp(FIREBASE_INIT, APP_NAME));
return navigator.serviceWorker.register('/service-worker.js').then((reg) => {
this.checkForAppUpdate(reg);
reg.active.postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));
return reg;
}).then((reg) => {
return navigator.serviceWorker.getRegistration('/service-worker.js').then(reg => {
if (reg) {
return reg
}
return navigator.serviceWorker.register('/service-worker.js').then(reg => {
this.checkForAppUpdate(reg);
return reg;
});
}).then(reg => {
// Pass locale and version config to the service worker.
console.log("SW active:", reg.active, "installing:", reg.installing);
(reg.active || reg.installing).postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));
// Request token.
return TinodeWeb.requestFCMToken(this.fcm, reg);
}).then((token) => {
}).then(token => {
const persist = LocalStorageUtil.getObject('keep-logged-in');
if (token != this.state.firebaseToken) {
this.tinode.setDeviceToken(token);
@@ -416,17 +419,17 @@ class TinodeWeb extends React.Component {
return firebaseGetToken(fcm, {
serviceWorkerRegistration: sw,
vapidKey: FIREBASE_INIT.messagingVapidKey
}).then((token) => {
}).then(token => {
if (token) {
return token;
} else {
// Try to request permissions.
return Notification.requestPermission().then((permission) => {
return Notification.requestPermission().then(permission => {
if (permission === 'granted') {
return firebaseGetToken(fcm, {
serviceWorkerRegistration: reg,
vapidKey: FIREBASE_INIT.messagingVapidKey
}).then((token) => {
}).then(token => {
if (token) {
return token;
} else {
@@ -576,6 +579,12 @@ class TinodeWeb extends React.Component {
this.handleError(err.message, 'err');
});
}
if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) {
// Firefox and Safari: "The Notification permission may only be requested from inside a
// short running user-generated event handler".
this.initFCMessaging();
}
}
// Enable or disable saving the password and IndexedDB.
@@ -1920,15 +1929,16 @@ class TinodeWeb extends React.Component {
:
null
}
<Alert
visible={this.state.alertVisible}
title={this.state.alertParams.title}
content={this.state.alertParams.content}
onReject={this.state.alertParams.onReject ? (_ => this.setState({alertVisible: false})) : null}
reject={this.state.alertParams.reject}
onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}}
confirm={this.state.alertParams.confirm}
/>
{this.state.alertVisible ?
<Alert
visible={this.state.alertVisible}
title={this.state.alertParams.title}
content={this.state.alertParams.content}
onReject={this.state.alertParams.onReject ? (_ => this.setState({alertVisible: false})) : null}
reject={this.state.alertParams.reject}
onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}}
confirm={this.state.alertParams.confirm}
/> : null}
<SidepanelView
tinode={this.tinode}
connected={this.state.connected}
src/widgets/alert.jsx
+15 -18
View File
@@ -3,26 +3,23 @@ import { FormattedMessage } from 'react-intl';
export default class Alert extends React.PureComponent {
render() {
return this.props.visible ?
<div className="alert-container">
<div className="alert">
<div className="title">{this.props.title}</div>
<div className="content">{this.props.content}</div>
<div className="dialog-buttons">
{this.props.onReject ?
<button className="outline" onClick={this.props.onReject}>
{this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
</button>
:
null
}
<button className="primary" onClick={this.props.onConfirm}>
{this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />}
<div className="alert-container">
<div className="alert">
<div className="title">{this.props.title}</div>
<div className="content">{this.props.content}</div>
<div className="dialog-buttons">
{this.props.onReject ?
<button className="outline" onClick={this.props.onReject}>
{this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
</button>
</div>
:
null
}
<button className="primary" onClick={this.props.onConfirm}>
{this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />}
</button>
</div>
</div>
:
null;
</div>
}
};