Web推送通知，Service Worker实战

Web推送通知（Web Push Notifications）是一种在用户的浏览器上接收并显示通知的技术，它允许网站在没有用户交互的情况下，向用户发送重要信息或更新，而Service Worker则是JavaScript在浏览器后台运行的脚本，可以拦截和处理网络请求、缓存资源等，从而提高网站的性能和用户体验。，本文将介绍如何使用Service Worker实现Web推送通知功能，需要注册一个Service Worker，并在其中处理推送消息的逻辑，需要在服务器端准备好要发送的消息和相关信息，当Service Worker成功注册后，它就可以在用户下次访问网站时，接收到服务器发送的推送消息，可以在网页中通过浏览器提供的API展示通知。

在现代互联网应用中,用户期望能够实时接收到各种信息，如新闻更新、消息提醒等，为了满足这一需求，Web推送通知成为了一种重要的交互方式，本文将深入探讨如何使用Service Worker实现Web推送通知功能，并通过实战案例为读者提供详细的指导。

Service Worker简介

Service Worker是一种运行在浏览器后台的脚本，它可以拦截和处理网络请求，管理应用的缓存，并在离线状态下提供应用的基本功能，Service Worker的出现为Web推送通知提供了重要的技术支持。

Web推送通知原理

Web推送通知是基于推送服务（如Firebase Cloud Messaging）将消息发送到用户的设备上，当应用程序处于后台或用户未打开应用时，浏览器会将这些消息通过推送服务传递给相应的客户端，并最终显示给用户。

Service Worker实现Web推送通知步骤

注册Service Worker

在应用程序的JavaScript代码中,首先需要注册一个Service Worker，注册成功后，可以在其中定义推送事件的处理函数。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function (registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function (error) {
      console.error('Service Worker registration failed:', error);
    });
}

请求用户许可

在发送推送通知之前,需要获取用户的许可，可以通过调用permissions.request()方法请求用户授权。

Notification.requestPermission().then(function (permission) {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
  } else {
    console.error('Notification permission denied.');
  }
});

订阅推送服务

使用推送服务的API订阅用户的设备,通常需要提供应用的相关信息，如应用ID、推送地址等。

navigator.serviceWorker.ready.then(function (registration) {
  const subscribeOptions = {
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_KEY'),
  };
  return registration.pushManager.subscribe(subscribeOptions);
}).then(function (subscription) {
  console.log('Subscription:', JSON.stringify(subscription));
}).catch(function (error) {
  console.error('Subscription failed:', error);
});

发送推送通知

当收到服务器发送的推送消息时,使用订阅信息向推送服务发送通知。

navigator.serviceWorker.ready.then(function (registration) {
  const pushNotification = new PushNotification('YOUR PUSH_SECRET', {
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_KEY'),
  });
  pushNotification.on('push', function (notification) {
    console.log('Push message:', notification.data);
    // 自定义通知样式
    var options = {
      body: 'Hello World!',
      icon: 'icon.png',
      badge: 'badge.png'
    };
    pushNotification.showOptionally(null, options);
  });
});

处理推送事件

在Service Worker的sw.js文件中，需要监听push事件并处理通知内容。

self.addEventListener('push', function (event) {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: data.icon,
    badge: data.badge
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

实战案例

以下是一个完整的Web推送通知实战案例：

在浏览器中打开一个Web应用。
注册Service Worker。
请求用户许可。
订阅推送服务。
接收服务器发送的推送消息,并在通知栏显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">Web Push Notification</title>
</head>
<body>
  <h1>Welcome to My Web App</h1>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
        .then(function (registration) {
          console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(function (error) {
          console.error('Service Worker registration failed:', error);
        });
    }
    Notification.requestPermission().then(function (permission) {
      if (permission === 'granted') {
        console.log('Notification permission granted.');
        const subscribeOptions = {
          userVisibleOnly: true,
          applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_KEY'),
        };
        return navigator.serviceWorker.ready.then(function (registration) {
          return registration.pushManager.subscribe(subscribeOptions);
        }).then(function (subscription) {
          console.log('Subscription:', JSON.stringify(subscription));
          const pushNotification = new PushNotification('YOUR PUSH_SECRET', {
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_KEY'),
          });
          pushNotification.on('push', function (notification) {
            console.log('Push message:', notification.data);
            var options = {
              body: notification.data.body,
              icon: notification.data.icon,
              badge: notification.data.badge
            };
            pushNotification.showOptionally(null, options);
          });
        }).catch(function (error) {
          console.error('Subscription failed:', error);
        });
      } else {
        console.error('Notification permission denied.');
      }
    });
  </script>
</body>
</html>

本文详细介绍了如何使用Service Worker实现Web推送通知功能，通过实战案例，读者可以清晰地了解从注册Service Worker到处理推送事件的完整流程，随着技术的不断发展，Web推送通知将成为Web应用中不可或缺的一部分，为开发者提供更多可能性。