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

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

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

2. 在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应用程序清单（用于订阅通知）中使用的公钥和私钥。

3. 在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');
  }
}); 

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

4. 最后，在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和方法。因此，如果你的网站需要在多个浏览器中正确地推送通知，则需要学习每个浏览器的特定方法，并在代码中包含这些方法。