supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove DOM access from webpush

Browse Source
This commit is contained in:
Pavel Djundik 2019-11-04 16:11:17 +02:00
parent 8972242863
commit b164e95290
2 changed files with 62 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/components/Windows/Settings.vue
View File

@ -232,11 +232,21 @@
id="pushNotifications"
type="button"
class="btn"
:disabled="$store.state.pushNotificationState !== 'supported'"
data-text-alternate="Unsubscribe from push notifications"
:disabled="
$store.state.pushNotificationState !== 'supported' &&
$store.state.pushNotificationState !== 'subscribed'
"
@click="onPushButtonClick"
>
Subscribe to push notifications
<template v-if="$store.state.pushNotificationState === 'subscribed'">
Unsubscribe from push notifications
</template>
<template v-else-if="$store.state.pushNotificationState === 'loading'">
Loading…
</template>
<template v-else>
Subscribe to push notifications
</template>
</button>
<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
<strong>Warning</strong>: Push notifications are only supported over
@ -257,9 +267,9 @@
</div>
<div class="col-sm-12">
<label class="opt">
<!-- TODO: handle enabling/disabling notifications -->
<input
id="desktopNotifications"
:checked="$store.state.settings.desktopNotifications"
type="checkbox"
name="desktopNotifications"
/>

114
client/js/webpush.js
View File

@ -1,20 +1,22 @@
"use strict";
const $ = require("jquery");
const storage = require("./localStorage");
const socket = require("./socket");
const store = require("./store").default;
let pushNotificationsButton;
let clientSubscribed = null;
let applicationServerKey;
if ("serviceWorker" in navigator) {
navigator.serviceWorker.addEventListener("message", (event) => {
if (event.data && event.data.type === "open") {
$("#sidebar")
.find(`.chan[data-target="#${event.data.channel}"]`)
.trigger("click");
const channelTarget = document.querySelector(
"#sidebar .chan[data-target='#" + event.data.channel + "']"
);
if (channelTarget) {
channelTarget.click();
}
}
});
}
@ -27,22 +29,18 @@ module.exports.configurePushNotifications = (subscribedOnServer, key) => {
// If client has push registration but the server knows nothing about it,
// this subscription is broken and client has to register again
if (clientSubscribed === true && subscribedOnServer === false) {
pushNotificationsButton.prop("disabled", true);
store.commit("pushNotificationState", "loading");
navigator.serviceWorker.ready
.then((registration) => registration.pushManager.getSubscription())
.then((subscription) => subscription && subscription.unsubscribe())
.then((successful) => {
if (successful) {
alternatePushButton().prop("disabled", false);
}
store.commit("pushNotificationState", successful ? "supported" : "unsupported");
});
}
};
module.exports.initialize = () => {
pushNotificationsButton = $("#pushNotifications");
if (!isAllowedServiceWorkersHost()) {
store.commit("pushNotificationState", "nohttps");
return;
@ -59,13 +57,12 @@ module.exports.initialize = () => {
}
return registration.pushManager.getSubscription().then((subscription) => {
store.commit("pushNotificationState", "supported");
clientSubscribed = !!subscription;
if (clientSubscribed) {
alternatePushButton();
}
store.commit(
"pushNotificationState",
clientSubscribed ? "subscribed" : "supported"
);
});
})
.catch(() => {
@ -75,55 +72,48 @@ module.exports.initialize = () => {
};
module.exports.onPushButton = () => {
// TODO: move dom logic to Settings.vue
pushNotificationsButton = $("#pushNotifications");
pushNotificationsButton.prop("disabled", true);
store.commit("pushNotificationState", "loading");
navigator.serviceWorker.ready
.then((registration) =>
registration.pushManager
.getSubscription()
.then((existingSubscription) => {
if (existingSubscription) {
socket.emit("push:unregister");
registration.pushManager.getSubscription().then((existingSubscription) => {
if (existingSubscription) {
socket.emit("push:unregister");
return existingSubscription.unsubscribe();
}
return existingSubscription.unsubscribe().then(() => {
store.commit("pushNotificationState", "supported");
});
}
return registration.pushManager
.subscribe({
applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
userVisibleOnly: true,
})
.then((subscription) => {
const rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
const key = rawKey
? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
: "";
const rawAuthSecret = subscription.getKey
? subscription.getKey("auth")
: "";
const authSecret = rawAuthSecret
? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
: "";
return registration.pushManager
.subscribe({
applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
userVisibleOnly: true,
})
.then((subscription) => {
const rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
const key = rawKey
? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
: "";
const rawAuthSecret = subscription.getKey
? subscription.getKey("auth")
: "";
const authSecret = rawAuthSecret
? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
: "";
socket.emit("push:register", {
token: storage.get("token"),
endpoint: subscription.endpoint,
keys: {
p256dh: key,
auth: authSecret,
},
});
return true;
socket.emit("push:register", {
token: storage.get("token"),
endpoint: subscription.endpoint,
keys: {
p256dh: key,
auth: authSecret,
},
});
})
.then((successful) => {
if (successful) {
alternatePushButton().prop("disabled", false);
}
})
store.commit("pushNotificationState", "subscribed");
});
})
)
.catch(() => {
store.commit("pushNotificationState", "unsupported");
@ -132,14 +122,6 @@ module.exports.onPushButton = () => {
return false;
};
function alternatePushButton() {
const text = pushNotificationsButton.text();
return pushNotificationsButton
.text(pushNotificationsButton.data("text-alternate"))
.data("text-alternate", text);
}
function urlBase64ToUint8Array(base64String) {
const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");