|
// vim: set et ts=3 sw=3 sts=3:
|
|
// Startdate: 2023-11-09 18:36
|
|
// Purpose: Reference implementation for sending a notification with a colorized image from this server
|
|
// Reference:
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
|
|
// https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html
|
|
// https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string
|
|
|
|
const img = "/calendar/images/banner_calendar.svg";
|
|
const notification_attempts = 10;
|
|
const notification_ms = 200;
|
|
// Due to how browsers/css work with colors, you can pass #000000 or web safe color names.
|
|
var colors = Array("red","orange","yellow","green","blue","purple","black","white","brown");
|
|
|
|
function colorizeSvg(inSvg, oldColor, newColor) {
|
|
// In case we have to do more than `s//g` in the future.
|
|
return inSvg.replaceAll(oldColor, newColor);
|
|
}
|
|
|
|
function SendColorizedNotification(_title, _body, _icon, _tag, _color) {
|
|
// given _icon as path on server, get contents and adjust the main color in it to desired color.
|
|
// The 585858 is the specific color of the calendar.svg we intend to replace.
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET",_icon);
|
|
xhr.onload = () => {
|
|
newSvg = colorizeSvg(xhr.responseText,"#585858",_color);
|
|
encodedData = window.btoa(newSvg); // turn it into the base64 stream
|
|
encodedData = "data:image/svg+xml;base64," + encodedData; // prepend the type of stream
|
|
SendNotification(_title, _body, encodedData, _tag, _color);
|
|
}
|
|
xhr.send();
|
|
}
|
|
|
|
function SendNotification(_title, _body, _icon, _tag) {
|
|
// From: https://developer.mozilla.org/en-US/docs/Web/API/notification
|
|
if (!("Notification" in window)) {
|
|
// Check if the browser supports notifications
|
|
alert("This browser does not support desktop notification");
|
|
} else if (Notification.permission === "granted") {
|
|
// Check whether notification permissions have already been granted;
|
|
// if so, create a notification
|
|
const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
|
|
// …
|
|
} else if (Notification.permission !== "denied") {
|
|
// We need to ask the user for permission
|
|
Notification.requestPermission().then((permission) => {
|
|
// If the user accepts, let's create a notification
|
|
if (permission === "granted") {
|
|
const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
|
|
// …
|
|
}
|
|
});
|
|
}
|
|
// At last, if the user has denied notifications, and you
|
|
// want to be respectful there is no need to bother them anymore.
|
|
}
|
|
|
|
function SendNotificationManyTimes(_title, _body, _icon, _tag) {
|
|
// From: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
|
|
if (Notification?.permission === "granted") {
|
|
// If the user agreed to get notified
|
|
// Let's try to send ten notifications
|
|
let i = 0;
|
|
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
|
|
const interval = setInterval(() => {
|
|
// Thanks to the tag, we should only see the "Hi! 9" notification
|
|
const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
|
|
//const n = new Notification(`Hi! breakfast ${i}`, { tag: "soManyNotification", body: "this is body?", icon: img });
|
|
if (i === (notification_attempts-1)) {
|
|
clearInterval(interval);
|
|
}
|
|
i++;
|
|
}, notification_ms);
|
|
} else if (Notification && Notification.permission !== "denied") {
|
|
// If the user hasn't told if they want to be notified or not
|
|
// Note: because of Chrome, we are not sure the permission property
|
|
// is set, therefore it's unsafe to check for the "default" value.
|
|
Notification.requestPermission().then((status) => {
|
|
// If the user said okay
|
|
if (status === "granted") {
|
|
let i = 0;
|
|
// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
|
|
const interval = setInterval(() => {
|
|
// Thanks to the tag, we should only see the "Hi! 9" notification
|
|
const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });
|
|
if (i === (notification_attempts-1)) {
|
|
clearInterval(interval);
|
|
}
|
|
i++;
|
|
}, notification_ms);
|
|
} else {
|
|
// Otherwise, we can fallback to a regular modal alert
|
|
alert(String(_title)+": "+String(_body));
|
|
}
|
|
});
|
|
} else {
|
|
// If the user refuses to get notified, we can fallback to a regular modal alert
|
|
alert(String(_title)+": "+String(_body));
|
|
}
|
|
}
|
|
|
|
function getRandomColor() {
|
|
return colors[Math.floor(Math.random()*colors.length)];
|
|
}
|
|
|
|
window.addEventListener("load", () => {
|
|
const button = document.querySelector("button");
|
|
button.addEventListener("click", () => {
|
|
SendColorizedNotification("sample calendar appointment","in 10 minutes",img,"",getRandomColor());
|
|
});
|
|
});
|
