111 lines
3.0 KiB
JavaScript
111 lines
3.0 KiB
JavaScript
const registerSw = async () => {
|
|
if ('serviceWorker' in navigator) {
|
|
const reg = await navigator.serviceWorker.register('/sw.js');
|
|
initialiseState(reg)
|
|
|
|
} else {
|
|
showNotAllowed("You can't send push notifications ☹️😢")
|
|
}
|
|
};
|
|
|
|
const initialiseState = (reg) => {
|
|
if (!reg.showNotification) {
|
|
showNotAllowed('Showing notifications isn\'t supported ☹️😢');
|
|
return
|
|
}
|
|
if (Notification.permission === 'denied') {
|
|
showNotAllowed('You prevented us from showing notifications ☹️🤔');
|
|
return
|
|
}
|
|
if (!'PushManager' in window) {
|
|
showNotAllowed("Push isn't allowed in your browser 🤔");
|
|
return
|
|
}
|
|
subscribe(reg);
|
|
}
|
|
|
|
const showNotAllowed = (message) => {
|
|
const button = document.querySelector('form>button');
|
|
button.innerHTML = `${message}`;
|
|
button.setAttribute('disabled', 'true');
|
|
};
|
|
|
|
|
|
|
|
// urlB64ToUint8Array is a magic function that will encode the base64 public key
|
|
// to Array buffer which is needed by the subscription option
|
|
function urlB64ToUint8Array2(base64String) {
|
|
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
|
|
const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
|
|
const rawData = atob(base64)
|
|
const outputArray = new Uint8Array(rawData.length)
|
|
for (let i = 0; i < rawData.length; ++i) {
|
|
outputArray[i] = rawData.charCodeAt(i)
|
|
}
|
|
return outputArray
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function urlB64ToUint8Array(base64String) {
|
|
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
|
const base64 = (base64String + padding)
|
|
.replace(/\-/g, '+')
|
|
.replace(/_/g, '/');
|
|
|
|
const rawData = window.atob(base64);
|
|
const outputArray = new Uint8Array(rawData.length);
|
|
const outputData = outputArray.map((output, index) => rawData.charCodeAt(index));
|
|
|
|
return outputData;
|
|
}
|
|
|
|
const subscribe = async (reg) => {
|
|
const subscription = await reg.pushManager.getSubscription();
|
|
if (subscription) {
|
|
sendSubData(subscription);
|
|
return;
|
|
}
|
|
|
|
const vapidMeta = document.querySelector('meta[name="vapid-key"]');
|
|
const key = vapidMeta.content;
|
|
const options = {
|
|
userVisibleOnly: true,
|
|
// if key exists, create applicationServerKey property
|
|
...(key && {applicationServerKey: urlB64ToUint8Array2(key)})
|
|
};
|
|
|
|
const sub = await reg.pushManager.subscribe(options);
|
|
sendSubData(sub)
|
|
};
|
|
|
|
const sendSubData = async (subscription) => {
|
|
const browser = navigator.userAgent.match(/(firefox|msie|chrome|safari|trident)/ig)[0].toLowerCase();
|
|
const data = {
|
|
status_type: 'subscribe',
|
|
subscription: subscription.toJSON(),
|
|
browser: browser,
|
|
user_agent: browser,
|
|
};
|
|
|
|
const res = await fetch('/webpush/save_information', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
headers: {
|
|
'content-type': 'application/json',
|
|
|
|
},
|
|
credentials: "include"
|
|
});
|
|
|
|
handleResponse(res);
|
|
};
|
|
|
|
const handleResponse = (res) => {
|
|
console.log(res.status);
|
|
};
|
|
|
|
registerSw(); |