In my forum users receive a push notification for new events. New users will be asked if they want to allow or deny push notifications for this page. So I would like to design this question with a custom design. I've been searching the internet for weeks on how to do this. I searched for:
- push notification ask design style
- service worker design custom
- etc.
Unfortunately, I can't find any instructions that explain how I can style this browser question. I know how to style the push notifications but I dont know how to design the question for permission. Thank you very much for a link or put me in the right direction.
I use this service worker:
(function() {
function registerServiceWorker() {
return navigator.serviceWorker.register("/notifications/push/push-notif.js")
.then(function(registration) {
console.log("Service worker successfully registered.");
return registration;
})
.catch(function(err) {
console.error("Unable to register service worker.", err);
});
}
const allOptionsNotification = function(registration) {
const title = "Web Push Book";
const options = {
actions: [
{
}
]
};
registration.showNotification(title, options);
};
const titleAndBodyNotification = function(registration) {
};
const longTitleAndBodyNotification = function(registration) {
};
const iconNotification = function(registration) {
};
const badgeNotification = function(registration) {
};
const imageNotification = function(registration) {
};
const vibrateNotification = function(registration) {
};
const soundNotification = function(registration) {
};
const dirLTRNotification = function(registration) {
};
const dirRTLNotification = function(registration) {
};
const timestampNotification = function(registration) {
};
const actionsNotification = function(registration) {
};
const notificationTag = function(registration) {
};
const renotifyNotification = function(registration) {
};
const silentNotification = function(registration) {
};
const requiresInteractionNotification = function(registration) {
};
const openWindow = function(registration) {
};
const focusWindow = function(registration) {
const options = {
body: "You have new notifications.",
icon: "https://example...",
badge: "https://example...",
tag: "focus-window"
};
registration.showNotification("News on this website", options);
};
const dataNotification = function(registration) {
};
const mergeNotification = function(registration) {
};
const mustShowNotification = function(registration) {
};
const sendMessageToPage = function(registration) {
};
const setUpSWMessageListener = function() {
};
const setUpNotificationButtons = function() {
setUpSWMessageListener();
const configs = [
{
className: "js-focus-window",
cb: focusWindow,
enabled: () => {
return true;
}
}
];
return registerServiceWorker()
.then(function(registration) {
configs.forEach(function(config) {
const button = document.querySelector(`.${config.className}`);
if (!button) {
console.error("No button found with classname: ", config.className);
return;
}
button.addEventListener("click", function() {
const promiseResult = config.cb(registration);
if (promiseResult) {
button.disabled = true;
promiseResult.then(() => {
button.disabled = false;
})
}
});
button.disabled = !config.enabled();
});
});
};
window.addEventListener("load", function() {
if (!("serviceWorker" in navigator)) {
// Service Worker isn"t supported on this browser, disable or hide UI.
return;
}
if (!("PushManager" in window)) {
// Push isn"t supported on this browser, disable or hide UI.
return;
}
let promiseChain = new Promise((resolve, reject) => {
const permissionPromise = Notification.requestPermission((result) => {
resolve(result);
});
if (permissionPromise) {
permissionPromise.then(resolve);
}
})
.then((result) => {
if (result === "granted") {
setUpNotificationButtons();
} else {
displayNoPermissionError();
}
});
});
})();