javascript - PWA。 Service Worker 通知多次出现

Question

我的网站正在运行 Service Worker。我可以打印通知，效果很好，但我只需要显示一次通知。但是现在每次刷新页面时都会出现相同的消息。是否可以只显示一次通知？这是我的代码:

function displayNotification() {
  if (Notification.permission == 'granted') {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      var options = {
        body: 'Welcome!',
        icon: '/css/logo.png',
        vibrate: [100, 50, 100],
        data: {
          dateOfArrival: Date.now(),
          primaryKey: 1
        }
      };
      reg.showNotification('My name', options);
    });
  }
}


navigator.serviceWorker.register('/service-worker.js');
Notification.requestPermission(function(result) {
  if (result === 'granted') {
    navigator.serviceWorker.ready.then(function(registration) {
      displayNotification();
    });
  }
});

Answer 1

可以在服务 worker 执行的上下文中显示通知。当服务人员通过 push event 被“唤醒”时，您通常会这样做.

也可以在网页上下文中显示通知。这样做根本不需要服务 worker 。如果您的用例在用户授予通知权限后立即显示单个通知，则您可以使用相同的通知和权限 API，而根本不需要 Service Worker。

下面是一个示例，说明如何执行此操作。它有点作弊，因为它不会在第一次访问时 checkin ，它只会在通知权限更改为 'granted' 时显示通知。由于这通常只会发生一次而不是每次访问，所以它应该完成同样的事情。

if ('Notification' in window && 'permissions' in navigator) {
  function showNotification() {
    const title = 'The title';
    const options = {
      body: 'The body.',
    };
    new Notification(title, options);
  }

  navigator.permissions.query({name: 'notifications'}).then(status => {
    if (status.state === 'prompt') {
      status.onchange = () => {
        if (status.state === 'granted') {
          showNotification();
        }
      };

      document.querySelector('#notification')
        .addEventListener('click', () => Notification.requestPermission());
    }
  });  
}

<button id="notification">Enable Notification</button>