推送通知设计布局/征求许可
在我的论坛中,用户会收到新事件的推送通知。新用户将被询问是否要允许或拒绝此页面的推送通知。所以我想用定制设计来设计这个问题。我已经在互联网上搜索了几周如何做到这一点。我搜索:
- 推送通知询问设计风格
- 服务工作者设计自定义
- 等。
不幸的是,我找不到任何说明来解释如何设置此浏览器问题的样式。我知道如何设计推送通知的样式,但我不知道如何设计许可问题。非常感谢您提供链接或让我找到正确的方向。
我使用这个服务人员:
(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();
}
});
});
})();
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();
}
});
});
})();
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论