首页 问答 正文

如何在WordPress中添加浏览器通知

注册会员 / 悠然自学 / 2023-06-12/ 浏览 84 次

要在WordPress中添加浏览器通知,可以使用Web推送API

1.首先,在WordPress中,必须包含Service Worker来处理push事件。

  1. 在functions.php中添加一个事件监听器,以便在用户同意接收通知时将其订阅到我们的通知服务的服务器上。
function register_sw(){
    wp_register_script( 'service-worker', get_template_directory_uri() . '/js/service-worker.js', array(), false, true );
    wp_enqueue_script( 'service-worker' );
    $vapid = array(
        'subject' => 'http://example.com',
        'publicKey' => '<Your public key here>',
        'privateKey' => '<Your private key here>',
    );
       wp_localize_script('service-worker', 'vapid', $vapid);
}
add_action( 'wp_enqueue_scripts', 'register_sw' ); 

在这个事件监听器中,我们将注册一个名为service-worker.js的JavaScript文件,它是我们的Service Worker文件,我们还将设置一个vapid数组,该数组包含我们的应用程序的Web应用程序清单(用于订阅通知)中使用的公钥和私钥。

  1. 在service-worker.js文件中,我们需要设置推送通知的行为。
self.addEventListener('push', function(event) {
  if (event.data) {
    var text = event.data.text();
    self.registration.showNotification('Title', {
      body: text,
      icon: 'icon.png'
    });
  } else {
    console.log('Push event but no data');
  }
}); 

在这个代码块中,我们注册了一个事件监听器,该监听器会在推送通知到达时被触发。我们设置了一个标题,将标头和主体设置为推送事件中的文本,并将一个图标分配给通知。

  1. 最后,在WordPress的页面上添加代码以获取用户的同意并订阅他们。
(function() {
if (!('Notification' in window)) {
    console.log('This browser does not support notifications!');
    return;
  }
  Notification.requestPermission().then(function(result) {
      if(result === 'granted') {
          navigator.serviceWorker.ready.then(function(registration) {
            const subscribeOptions = {
              userVisibleOnly: true,
              applicationServerKey: urlBase64ToUint8Array(vapid.publicKey)
            };
            registration.pushManager.subscribe(subscribeOptions);
          });
      } else {
          console.log('User does not want to receive notifications.');
      }
  });
})();

function urlBase64ToUint8Array(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);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
return outputArray;
} 

在这个代码块中,我们首先检查浏览器是否支持通知,然后请求用户的同意。如果用户同意接收通知,则订阅服务工作者,并使用vapid.publicKey设置推送标识符。

以上是添加浏览器通知的基本步骤,需要注意的是,每个浏览器都有自己的API和方法。因此,如果你的网站需要在多个浏览器中正确地推送通知,则需要学习每个浏览器的特定方法,并在代码中包含这些方法。

大家谈论
    我的见解