fix service worker and notifications init for FF and Safari
This commit is contained in:
+26
-26
@@ -111,35 +111,35 @@ self.addEventListener('notificationclick', event => {
|
||||
|
||||
event.waitUntil(self.clients.matchAll({
|
||||
type: 'window',
|
||||
includeUncontrolled: true
|
||||
}).then(windowClients => {
|
||||
let anyClient = null;
|
||||
for (let i = 0; i < windowClients.length; i++) {
|
||||
const url = new URL(windowClients[i].url);
|
||||
if (url.hash.includes(data.topic)) {
|
||||
// Found the Tinode tab with the right topic open.
|
||||
return windowClients[i].focus();
|
||||
} else {
|
||||
// This will be the least recently used tab.
|
||||
anyClient = windowClients[i];
|
||||
includeUncontrolled: true})
|
||||
.then(windowClients => {
|
||||
let anyClient = null;
|
||||
for (let i = 0; i < windowClients.length; i++) {
|
||||
const url = new URL(windowClients[i].url);
|
||||
if (url.hash.includes(data.topic)) {
|
||||
// Found the Tinode tab with the right topic open.
|
||||
return windowClients[i].focus();
|
||||
} else {
|
||||
// This will be the least recently used tab.
|
||||
anyClient = windowClients[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Found tab with Tinode on a different topic,
|
||||
// navigate to the right topic.
|
||||
if (anyClient) {
|
||||
const url = new URL(anyClient.url);
|
||||
// Found tab with Tinode on a different topic,
|
||||
// navigate to the right topic.
|
||||
if (anyClient) {
|
||||
const url = new URL(anyClient.url);
|
||||
url.hash = urlHash;
|
||||
return anyClient.focus().then(thisClient => {
|
||||
return thisClient.navigate(url);
|
||||
});
|
||||
}
|
||||
|
||||
// Did not find a Tinode browser tab. Open one.
|
||||
const url = new URL(self.location.origin);
|
||||
url.hash = urlHash;
|
||||
return anyClient.focus().then(thisClient => {
|
||||
return thisClient.navigate(url);
|
||||
});
|
||||
}
|
||||
|
||||
// Did not find a Tinode browser tab. Open one.
|
||||
const url = new URL(self.location.origin);
|
||||
url.hash = urlHash;
|
||||
return clients.openWindow(url);
|
||||
}));
|
||||
return clients.openWindow(url);
|
||||
}));
|
||||
});
|
||||
|
||||
// This is needed for 'Add to Home Screen'.
|
||||
|
||||
+34
-24
@@ -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}
|
||||
|
||||
+15
-18
@@ -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>
|
||||
}
|
||||
};
|
||||
|
||||
+19
-15
@@ -7961,11 +7961,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
this.tinode.onDataMessage = this.handleDataMessage;
|
||||
}).then(_ => {
|
||||
if (this.state.desktopAlertsEnabled) {
|
||||
this.initFCMessaging().then(_ => {
|
||||
if (this.state.desktopAlerts) {
|
||||
this.tinode.setDeviceToken(this.state.firebaseToken);
|
||||
}
|
||||
}).catch(_ => {});
|
||||
this.initFCMessaging().catch(_ => {});
|
||||
}
|
||||
const parsedNav = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].parseUrlHash(window.location.hash);
|
||||
this.resetContactList();
|
||||
@@ -8023,7 +8019,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
console.error(msg, err);
|
||||
this.handleError(formatMessage(messages.push_init_failed), 'err');
|
||||
this.setState({
|
||||
desktopAlertsEnabled: false,
|
||||
firebaseToken: null
|
||||
});
|
||||
_lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].updateObject('settings', {
|
||||
@@ -8032,14 +8027,20 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
};
|
||||
try {
|
||||
this.fcm = (0,firebase_messaging__WEBPACK_IMPORTED_MODULE_3__.getMessaging)((0,firebase_app__WEBPACK_IMPORTED_MODULE_2__.initializeApp)(FIREBASE_INIT, _config_js__WEBPACK_IMPORTED_MODULE_12__.APP_NAME));
|
||||
return navigator.serviceWorker.register('/service-worker.js').then(reg => {
|
||||
this.checkForAppUpdate(reg);
|
||||
reg.active.postMessage(JSON.stringify({
|
||||
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 => {
|
||||
console.log("SW active:", reg.active, "installing:", reg.installing);
|
||||
(reg.active || reg.installing).postMessage(JSON.stringify({
|
||||
locale: locale,
|
||||
version: _version_js__WEBPACK_IMPORTED_MODULE_14__.PACKAGE_VERSION
|
||||
}));
|
||||
return reg;
|
||||
}).then(reg => {
|
||||
return TinodeWeb.requestFCMToken(this.fcm, reg);
|
||||
}).then(token => {
|
||||
const persist = _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].getObject('keep-logged-in');
|
||||
@@ -8229,6 +8230,9 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
this.handleError(err.message, 'err');
|
||||
});
|
||||
}
|
||||
if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) {
|
||||
this.initFCMessaging();
|
||||
}
|
||||
}
|
||||
handlePersistenceChange(persist) {
|
||||
if (persist) {
|
||||
@@ -9387,7 +9391,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
onRinging: this.handleCallRinging,
|
||||
onAcceptCall: this.handleCallAccept,
|
||||
onReject: this.handleCallHangup
|
||||
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_alert_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
|
||||
}) : null, this.state.alertVisible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_alert_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
|
||||
visible: this.state.alertVisible,
|
||||
title: this.state.alertParams.title,
|
||||
content: this.state.alertParams.content,
|
||||
@@ -9402,7 +9406,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
this.state.alertParams.onConfirm();
|
||||
},
|
||||
confirm: this.state.alertParams.confirm
|
||||
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidepanel_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
|
||||
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidepanel_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
|
||||
tinode: this.tinode,
|
||||
connected: this.state.connected,
|
||||
displayMobile: this.state.displayMobile,
|
||||
@@ -9718,7 +9722,7 @@ __webpack_require__.r(__webpack_exports__);
|
||||
|
||||
class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
|
||||
render() {
|
||||
return this.props.visible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "alert-container"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "alert"
|
||||
@@ -9746,7 +9750,7 @@ class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent)
|
||||
"type": 0,
|
||||
"value": "OK"
|
||||
}]
|
||||
}))))) : null;
|
||||
})))));
|
||||
}
|
||||
}
|
||||
;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+7
-4
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user