Web push notifications

Re: #931
This commit is contained in:
3wc 2021-06-02 15:17:00 +02:00 committed by 3wc
parent 2f8510f297
commit 84c0bc8ed8
3 changed files with 81 additions and 3 deletions

View File

@ -2,7 +2,8 @@
"client": { "client": {
"name": "Sample of a functional Orbit", "name": "Sample of a functional Orbit",
"logo": "https://cdn.startinblox.com/logos/webp/startinblox.webp", "logo": "https://cdn.startinblox.com/logos/webp/startinblox.webp",
"server": "http://localhost:8000" "server": "http://localhost:8000",
"vapid_key": "BFZaZjfjx9RlH6v8AEmhMeJobFYm3gOJK4DvroHLE3Wc3sd66SEgGc6rp6hLvesFpfELjHI7MjOCnbth-sBnwf4"
}, },
"components": [{ "components": [{
"type": "registering", "type": "registering",

View File

@ -39,6 +39,63 @@ import(`https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-window
wb.addEventListener('externalwaiting', showSkipWaitingPrompt); wb.addEventListener('externalwaiting', showSkipWaitingPrompt);
wb.register().then((r) => registration = r); wb.register().then((r) => registration = r);
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 options = {
userVisibleOnly: true,
// if key exists, create applicationServerKey property
...(orbit.client.vapid_key && {applicationServerKey: urlB64ToUint8Array(orbit.client.vapid_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,
};
const res = await fetch(orbit.client.server + "/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);
};
navigator.serviceWorker.getRegistration().then(function(reg) {
subscribe(reg);
});
}); });
} }
}); });

View File

@ -2,6 +2,26 @@ importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox
workbox.precaching.precacheAndRoute([]); workbox.precaching.precacheAndRoute([]);
addEventListener('push', function (event) {
// Retrieve the textual payload from event.data (a PushMessageData object).
// Other formats are supported (ArrayBuffer, Blob, JSON), check out the documentation
// on https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData.
const eventInfo = event.data.text();
const data = JSON.parse(eventInfo);
const head = data.head || 'New Notification 🕺🕺';
const body = data.body || 'This is default content. Your notification didn\'t have one 🙄🙄';
console.log('hello from sw.js: push');
// Keep the service worker alive until the notification is created.
event.waitUntil(
self.registration.showNotification(head, {
body: body,
icon: 'https://i.imgur.com/MZM3K5w.png'
})
);
});
addEventListener('message', (event) => { addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') { if (event.data && event.data.type === 'SKIP_WAITING') {
skipWaiting(); skipWaiting();