PWA 中如何利用 Service Worker 进行推送消息的模式控制？-JavaScript中文网-JavaScript教程资源分享门户

前言

PWA（Progressive Web Apps）是一种新型的 Web 应用程序，它可以像原生应用程序一样提供离线访问、推送通知、添加到主屏幕等功能。其中，推送通知是 PWA 中非常重要的一个功能，可以让用户及时获得最新的消息、提醒和活动等。而 Service Worker 是 PWA 中实现推送通知的关键技术之一。本文将介绍 PWA 中如何利用 Service Worker 进行推送消息的模式控制。

Service Worker 简介

Service Worker 是一种 Web Worker，它可以在后台运行，独立于 Web 页面。Service Worker 可以拦截和处理网络请求，可以缓存资源以实现离线访问，还可以实现推送通知等功能。

Service Worker 的生命周期包括三个阶段：

注册：在 Web 页面中注册 Service Worker。
安装：Service Worker 第一次被安装时会触发 install 事件，可以在这个事件中进行一些初始化操作，比如缓存资源。
激活：Service Worker 安装完成后，需要等待所有已打开的页面都关闭后才能激活。激活后会触发 activate 事件，可以在这个事件中进行一些清理操作，比如删除旧的缓存。

推送通知模式

PWA 中实现推送通知需要使用 Push API 和 Notification API。Push API 用于向服务器注册推送服务，获取推送许可证，并将许可证发送到服务器。Notification API 用于显示推送通知。

在 PWA 中，推送通知有两种模式：默认模式和用户授权模式。

默认模式：当用户访问 PWA 页面时，Service Worker 会自动向服务器注册推送服务，并获取推送许可证。在此模式下，用户不需要进行任何授权，即可接收推送通知。
用户授权模式：当用户首次访问 PWA 页面时，Service Worker 会向用户请求授权。在此模式下，用户需要手动授权才能接收推送通知。

模式控制

在 PWA 中，可以通过 Service Worker 控制推送通知的模式。具体实现方式如下：

在 HTML 页面中注册 Service Worker：

// javascriptcn.com 代码示例
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功：', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker 注册失败：', error);
  });
}
</script>

安装 Service Worker

在 Service Worker 中安装时，可以根据需要选择推送通知的模式。如果选择默认模式，则在安装时就向服务器注册推送服务，并获取推送许可证。如果选择用户授权模式，则在安装时不向服务器注册推送服务，等待用户授权后再注册。

// javascriptcn.com 代码示例
self.addEventListener('install', function(event) {
  console.log('Service Worker 安装成功');

  // 默认模式
  self.registration.pushManager.getSubscription().then(function(subscription) {
    if (subscription) {
      console.log('已注册推送服务：', subscription.endpoint);
    } else {
      console.log('未注册推送服务，正在注册...');
      self.registration.pushManager.subscribe({ userVisibleOnly: true }).then(function(subscription) {
        console.log('推送服务注册成功：', subscription.endpoint);
      }).catch(function(error) {
        console.log('推送服务注册失败：', error);
      });
    }
  });

  // 用户授权模式
  // self.skipWaiting();
});

激活 Service Worker

在 Service Worker 激活时，可以选择删除旧的缓存和订阅。如果选择用户授权模式，则在激活时需要重新向用户请求授权。

// javascriptcn.com 代码示例
self.addEventListener('activate', function(event) {
  console.log('Service Worker 激活成功');

  // 删除旧的缓存
  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== CACHE_NAME) {
          return caches.delete(key);
        }
      }));
    })
  );

  // 删除旧的订阅
  event.waitUntil(
    self.registration.pushManager.getSubscription().then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe().then(function(successful) {
          console.log('旧的订阅已删除');
        }).catch(function(error) {
          console.log('旧的订阅删除失败：', error);
        });
      }
    })
  );

  // 用户授权模式
  // event.waitUntil(self.clients.claim());
});

推送消息

在服务器端发送推送消息时，需要将推送许可证发送到服务器。服务器可以根据推送许可证向指定用户发送推送消息。

// javascriptcn.com 代码示例
self.addEventListener('push', function(event) {
  console.log('收到推送消息：', event.data.text());

  var title = '推送通知';
  var options = {
    body: event.data.text(),
    icon: 'images/icon-192x192.png',
    badge: 'images/badge-72x72.png',
    data: {
      url: 'https://example.com'
    }
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

显示推送通知

在 Notification API 中可以控制推送通知的行为。例如，可以在点击推送通知时打开指定的 URL。

// javascriptcn.com 代码示例
self.addEventListener('notificationclick', function(event) {
  console.log('点击推送通知');

  event.notification.close();

  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url === event.notification.data.url && 'focus' in client) {
          return client.focus();
        }
      }
      if (clients.openWindow) {
        return clients.openWindow(event.notification.data.url);
      }
    })
  );
});

总结

本文介绍了 PWA 中如何利用 Service Worker 进行推送消息的模式控制。通过控制推送通知的模式，可以为用户提供更好的推送体验。同时，本文还提供了完整的示例代码，帮助读者更好地理解和实践。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6557198fd2f5e1655d1890ae