推送通知设计布局/征求许可

发布于 2025-01-16 20:52:53 字数 4203 浏览 1 评论 0原文

在我的论坛中,用户会收到新事件的推送通知。新用户将被询问是否要允许或拒绝此页面的推送通知。所以我想用定制设计来设计这个问题。我已经在互联网上搜索了几周如何做到这一点。我搜索:

  • 推送通知询问设计风格
  • 服务工作者设计自定义
  • 等。

不幸的是,我找不到任何说明来解释如何设置此浏览器问题的样式。我知道如何设计推送通知的样式,但我不知道如何设计许可问题。非常感谢您提供链接或让我找到正确的方向。

我使用这个服务人员:

(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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文