创建计划的推送通知

定时推送通知：网页应用的新功能

“定时”是关键——这是一个相当新的功能！当推送通知被定时（例如，“服药时间到了”或“您将在3小时后登机”）时，即使用户离线，也能向用户显示通知。这改进了过去推送通知需要用户在线的限制。

那么，定时推送通知是如何工作的呢？我们将关注四个关键部分：

• 注册服务工作线程
• 添加和删除定时推送通知
• 使用操作按钮增强推送通知
• 在服务工作线程中处理推送通知

背景知识

推送通知是告知网站用户发生重要事件并可能需要再次打开我们的（网络）应用程序的好方法。借助通知 API（结合推送 API 和 HTTP 网络推送协议），网络成为了一种简单的方法，可以从服务器向应用程序发送推送通知并在设备上显示它。

您可能已经看到这种事情的演变。例如，您多久会看到某种提示来接受来自网站的通知？虽然浏览器厂商已经在努力寻找解决方案以减少这种烦扰（Firefox 和 Chrome 都已概述了计划），但 Chrome 80 才刚刚开始对新的通知触发器 API 进行源代码试用，该 API 允许我们创建由不同事件触发的通知，而不仅仅是服务器推送。但是，目前，基于时间的触发器是我们拥有的唯一受支持的事件。但是，其他事件，例如基于地理位置的触发器，已经在计划中。

在 JavaScript 中调度事件非常容易，但是存在一个问题。在我们的推送通知场景中，我们无法确定应用程序在我们想要显示通知的确切时刻是否正在运行。这意味着我们不能只在应用程序层进行调度。相反，我们需要在服务工作线程级别进行操作。这就是新的 API 发挥作用的地方。

通知触发器 API 处于早期反馈阶段。您需要在 Chrome 中启用 #enable-experimental-web-platform-features 标志，或者您应该为源代码试用注册您的应用程序。

此外，服务工作线程 API 需要通过 HTTPS 建立安全连接。因此，如果您在您的机器上试用它，您需要确保它通过 HTTPS 提供服务。

设置

我创建了一个非常基本的设置。我们有一个 application.js 文件、一个 index.html 文件和一个 service-worker.js 文件，以及一些图像资源。

<code>/project-folder
├── index.html
├── application.js
├── service-worker.js
└── assets
   ├─ badge.png
   └── icon.png</code>

您可以在 GitHub 上找到基本通知触发器 API 演示的完整示例。

注册服务工作线程

首先，我们需要注册一个服务工作线程。目前，它只记录注册成功。

// service-worker.js
// 监听安装事件
self.addEventListener('install', event => console.log('ServiceWorker installed'));

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

设置推送通知

在我们的应用程序中，我们需要请求用户的权限以显示通知。从那里，我们将获得我们的服务工作线程注册并为该范围注册一个新的通知。到目前为止，没有什么新东西。

很酷的部分是新的 showTrigger 属性。这允许我们定义显示通知的条件。目前，我们想要添加一个新的 TimestampTrigger，它接受一个时间戳。并且由于一切都在设备上直接发生，它也可以离线工作。

// application.js
document.querySelector('#notification-button').onclick = async () => {
  const reg = await navigator.serviceWorker.getRegistration();
  Notification.requestPermission().then(permission => {
    if (permission !== 'granted') {
      alert('您需要允许推送通知');
    } else {
      const timestamp = new Date().getTime()   5 * 1000; // 现在加上 5000 毫秒
      reg.showNotification(
        '演示推送通知',
        {
          tag: timestamp, // 唯一的 ID
          body: '你好，世界', // 推送通知的内容
          showTrigger: new TimestampTrigger(timestamp), // 设置推送通知的时间
          data: {
            url: window.location.href, // 将当前 url 传递给通知
          },
          badge: './assets/badge.png',
          icon: './assets/icon.png',
        }
      );
    }
  });
};

处理通知

现在，通知应该在指定的时间戳显示。但是现在我们需要一种与之交互的方法，这就是我们需要服务工作线程 notificationclick 和 notificationclose 事件的地方。

这两个事件都监听相关的交互，并且都可以使用服务工作线程的全部潜力。例如，我们可以打开一个新窗口：

// service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.openWindow('/'));
});

这是一个非常简单的例子。但是凭借服务工作线程的功能，我们可以做更多的事情。让我们检查所需的窗口是否已经打开，并且只有在未打开时才打开一个新的窗口。

// service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    if (clients.length) { // 检查是否至少有一个选项卡已经打开
      clients[0].focus();
    } else {
      self.clients.openWindow('/');
    }
  }));
});

通知操作

促进与用户的交互的另一种好方法是向通知添加预定义的操作。例如，我们可以让他们选择是否要关闭通知或打开应用程序。

// application.js
reg.showNotification(
  '演示推送通知',
  {
    tag: timestamp, // 唯一的 ID
    body: '你好，世界', // 推送通知的内容
    showTrigger: new TimestampTrigger(timestamp), // 设置推送通知的时间
    data: {
      url: window.location.href, // 将当前 url 传递给通知
    },
    badge: './assets/badge.png',
    icon: './assets/icon.png',
    actions: [
      {
        action: 'open',
        title: '打开应用'
      },
      {
        action: 'close',
        title: '关闭通知',
      }
    ]
  }
);

现在我们在服务工作线程中使用这些通知。

// service-worker.js
self.addEventListener('notificationclick', event => {
  if (event.action === 'close') {
    event.notification.close();
  } else {
    self.clients.openWindow('/');
  }
});

取消推送通知

也可以取消挂起的通知。在这种情况下，我们需要从服务工作线程获取所有挂起的通知，然后在它们发送到设备之前关闭它们。

// application.js
document.querySelector('#notification-cancel').onclick = async () => {
  const reg = await navigator.serviceWorker.getRegistration();
  const notifications = await reg.getNotifications({
    includeTriggered: true
  });
  notifications.forEach(notification => notification.close());
  alert(`${notifications.length} 个通知已取消`);
};

通信

最后一步是使用服务工作线程客户端上的 postMessage 方法来设置应用程序和服务工作线程之间的通信。假设我们想通知已经激活的选项卡推送通知点击事件发生了。

// service-worker.js
self.addEventListener('notificationclick', event => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    if (clients.length) { // 检查是否至少有一个选项卡已经打开
      clients[0].focus();
      clients[0].postMessage('推送通知已点击！');
    } else {
      self.clients.openWindow('/');
    }
  }));
});

// application.js
navigator.serviceWorker.addEventListener('message', event => console.log(event.data));

总结

通知 API 是增强 Web 应用程序移动体验的非常强大的功能。由于通知触发器 API 的出现，它刚刚得到了非常重要的改进。API 仍在开发中，因此现在是尝试它并向开发人员提供反馈的最佳时机。

如果您正在使用 Vue 或 React，我建议您查看我自己的渐进式 Web 应用演示。它包括使用 Vue 和 React 的通知触发器 API 的文档示例，如下所示：（此处省略Vue/React示例，因为原文未提供）

以上是创建计划的推送通知的详细内容。更多信息请关注PHP中文网其他相关文章！