|
|
@ -1,16 +1,14 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="mb-3"
|
|
|
|
type="button" :class="[
|
|
|
|
type="button" :class="[
|
|
|
|
'btn',
|
|
|
|
'btn',
|
|
|
|
canRegister ? 'btn-primary' : 'btn-danger'
|
|
|
|
canRegister ? 'btn-primary' : 'btn-danger'
|
|
|
|
]" :disabled="!canRegister || subscriptionReceived"
|
|
|
|
]" :disabled="!btnEnabled" @click="registerWebpush">
|
|
|
|
@click="registerWebpush"
|
|
|
|
|
|
|
|
class="mb-3">
|
|
|
|
|
|
|
|
<div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
|
|
|
|
<div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
|
|
|
|
<span v-else-if="subscriptionReceived" class="me-1">✓</span>
|
|
|
|
<span v-else-if="$parent.notification.subscription" class="me-1">✓</span>
|
|
|
|
{{ registerText }}
|
|
|
|
{{ btnText }}
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-3 form-text">
|
|
|
|
<div class="mb-3 form-text">
|
|
|
|
<a href="TODO" target="_blank">{{ $t("documentationOf", ["Webpush"]) }}</a>
|
|
|
|
<a href="TODO" target="_blank">{{ $t("documentationOf", ["Webpush"]) }}</a>
|
|
|
@ -21,21 +19,33 @@
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
subscription: '',
|
|
|
|
//store subscription info
|
|
|
|
registerText: '',
|
|
|
|
btnEnabled: false,
|
|
|
|
|
|
|
|
btnText: "",
|
|
|
|
processing: false,
|
|
|
|
processing: false,
|
|
|
|
|
|
|
|
//determines if browser supports service worker
|
|
|
|
canRegister: false,
|
|
|
|
canRegister: false,
|
|
|
|
subscriptionReceived: false,
|
|
|
|
//store public vapid key
|
|
|
|
publicVapidKey: "",
|
|
|
|
publicVapidKey: null,
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
if (("serviceWorker" in navigator)) {
|
|
|
|
// if already subscribed
|
|
|
|
this.registerText = "Allow Notifications";
|
|
|
|
if (this.$parent.notification.subscription) {
|
|
|
|
|
|
|
|
this.btnEnabled = false;
|
|
|
|
this.canRegister = true;
|
|
|
|
this.canRegister = true;
|
|
|
|
} else {
|
|
|
|
this.btnText = "Notifications Enabled";
|
|
|
|
this.registerText = "Browser not supported";
|
|
|
|
} else { //not subscribed
|
|
|
|
this.canRegister = false;
|
|
|
|
//check if browser supports service worker
|
|
|
|
|
|
|
|
if (("serviceWorker" in navigator)) {
|
|
|
|
|
|
|
|
this.btnText = "Allow Notifications";
|
|
|
|
|
|
|
|
this.canRegister = true;
|
|
|
|
|
|
|
|
this.btnEnabled = true;
|
|
|
|
|
|
|
|
} else { //browser does not support service worker
|
|
|
|
|
|
|
|
this.btnText = "Browser not supported";
|
|
|
|
|
|
|
|
this.canRegister = false;
|
|
|
|
|
|
|
|
this.btnEnabled = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
@ -52,9 +62,10 @@ export default {
|
|
|
|
resolve(resp.msg);
|
|
|
|
resolve(resp.msg);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//request permission to send notifications
|
|
|
|
const permission = await Notification.requestPermission();
|
|
|
|
const permission = await Notification.requestPermission();
|
|
|
|
if (permission !== 'granted') {
|
|
|
|
if (permission !== "granted") {
|
|
|
|
this.$root.toastRes({
|
|
|
|
this.$root.toastRes({
|
|
|
|
ok: false,
|
|
|
|
ok: false,
|
|
|
|
msg: "Unable to get permission to notify.",
|
|
|
|
msg: "Unable to get permission to notify.",
|
|
|
@ -63,23 +74,29 @@ export default {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//get service worker registration
|
|
|
|
const registration = await navigator.serviceWorker.ready;
|
|
|
|
const registration = await navigator.serviceWorker.ready;
|
|
|
|
|
|
|
|
//subscribe to push notifications
|
|
|
|
const subscription = await registration.pushManager.subscribe({
|
|
|
|
const subscription = await registration.pushManager.subscribe({
|
|
|
|
userVisibleOnly: true,
|
|
|
|
userVisibleOnly: true,
|
|
|
|
applicationServerKey: publicKey,
|
|
|
|
applicationServerKey: publicKey,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//store subscription info and update button
|
|
|
|
this.$parent.notification.subscription = subscription;
|
|
|
|
this.$parent.notification.subscription = subscription;
|
|
|
|
|
|
|
|
this.btnEnabled = false;
|
|
|
|
this.subscriptionReceived = true;
|
|
|
|
this.canRegister = true;
|
|
|
|
this.registerText = "Notifications Enabled";
|
|
|
|
this.btnText = "Notifications Enabled";
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error('Subscription failed:', error);
|
|
|
|
console.error("Subscription failed:", error);
|
|
|
|
this.$root.toastRes({ ok: false, msg: error });
|
|
|
|
this.$root.toastRes({
|
|
|
|
|
|
|
|
ok: false,
|
|
|
|
|
|
|
|
msg: error
|
|
|
|
|
|
|
|
});
|
|
|
|
} finally {
|
|
|
|
} finally {
|
|
|
|
this.processing = false;
|
|
|
|
this.processing = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|