PWA 应用如何实现 Web Push 推送功能？-JavaScript中文网-JavaScript教程资源分享门户

PWA（Progressive Web App，渐进式 Web 应用）是一种新型的 Web 应用模式，它借鉴了 native 应用的一些优秀特性，比如离线缓存、本地推送等。Web Push 推送是 PWA 中实现本地推送的一种方式，通过 Web Push，Web 应用可以像 native 应用一样在后台发送通知，向用户提示更新和提醒重要事件。

本文将介绍如何在 PWA 应用中实现 Web Push 推送功能，包括前置条件、实现流程和示例代码。

前置条件

在开始之前，我们需要确保以下条件已满足：

使用 HTTPS 协议：因为 Web Push 推送需要建立安全的连接，所以必须使用 HTTPS 协议；
获取推送权限：在向用户发送推送之前，必须先获取用户的推送权限；
支持 Service Worker：Web Push 推送必须使用 Service Worker 技术，所以应用必须支持 Service Worker。

实现流程

步骤一：检测浏览器是否支持 Web Push

在 Web Push 推送的实现中，浏览器的支持显得非常关键。为了确保应用可靠地运行，我们需要检测浏览器是否支持 Web Push。以下是一段检测的示例代码：

if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
  console.error('Web Push not supported');
  return;
}

步骤二：注册 Service Worker

如果浏览器支持 Web Push，我们就需要注册一个 Service Worker。以下是一段注册的示例代码：

// javascriptcn.com 代码示例
navigator.serviceWorker.register('/sw.js')
  .then(function (registration) {
    console.log('Service Worker registered:', registration);

    // 注册成功后要进行推送订阅，下面会讨论
  })
  .catch(function (error) {
    console.error('Service Worker registration fail:', error);
  });

步骤三：获取推送许可

在注册成功 Service Worker 后，我们需要获取用户的推送许可。这可以通过 Notification.requestPermission() 方法实现。以下是一段获取许可的示例代码：

// javascriptcn.com 代码示例
Notification.requestPermission()
  .then(function (permission) {
    if (permission === 'granted') {
      console.log('Notification permission granted');

      //如果用户允许推送，则进行订阅
    } else {
      console.warn('Notification permission not granted');
    }
  });

在用户允许推送后，我们就可以进行下一步的订阅操作了。

步骤四：订阅推送

为了向用户发送推送，我们必须订阅推送服务，获取 endpoint 和公钥等信息。下面是一段订阅示例代码：

// javascriptcn.com 代码示例
registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: convertedVapidKey
})
.then(function (subscription) {
  console.log('Push subscription created:', subscription);

  // 订阅成功，可以向用户发送推送了
})
.catch(function (error) {
  console.error('Push subscription fail:', error);
});

步骤五：向用户发送推送

订阅成功后，我们就可以向用户发送推送了。以下是一段向用户发送推送的示例代码：

// javascriptcn.com 代码示例
const payload = JSON.stringify({
  title: "Hello World",
  body: "This is a test push",
  icon: "/assets/icon.png",
  badge: "/assets/badge.png",
  data: {
    url: "https://www.example.com"
  },
  tag: "test-push",
});

fetch('/api/push', {
  method: 'POST',
  body: payload,
})
.then(function (response) {
  console.log('Push sent successfully:', response);
})
.catch(function (error) {
  console.error('Push sent fail:', error);
});

上述代码中，我们可以看到发送推送的过程实际上是一个向服务器发送请求的过程。这里我们假设服务器端已经实现了推送服务，我们只需要向服务器提交推送信息，服务器就会向目标客户端发送推送。

示例代码

下面是一份完整的 PWA 应用实现 Web Push 推送的示例代码。在这个例子中，我们实现了基本的订阅和推送功能。当用户允许推送并订阅成功后，我们可以在服务端向全部的订阅用户发送推送，并在客户端接收到推送通知。

// javascriptcn.com 代码示例
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PWA Push Demo</title>
  <script>
    if ('serviceWorker' in navigator && 'PushManager' in window) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(function (registration) {
          console.log('Service Worker registered:', registration);

          return registration.pushManager.getSubscription()
            .then(function (subscription) {
              if (subscription) {
                console.log('Push subscription found:', subscription);
                return;
              }

              const convertedVapidKey = urlBase64ToUint8Array('...');

              return registration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: convertedVapidKey
              });
            });
        })
        .then(function (subscription) {
          console.log('Push subscription created:', subscription);

          document.getElementById('subscribe-button').disabled = true;
          document.getElementById('push-button').disabled = false;
        })
        .catch(function (error) {
          console.error('Service Worker registration fail:', error);
        });

      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;
      }

      function sendPush() {
        const payload = JSON.stringify({
          title: "Hello World",
          body: "This is a test push",
          icon: "/assets/icon.png",
          badge: "/assets/badge.png",
          data: {
            url: "https://www.example.com"
          },
          tag: "test-push",
        });

        fetch('/api/push', {
          method: 'POST',
          body: payload,
        })
        .then(function (response) {
          console.log('Push sent successfully:', response);
        })
        .catch(function (error) {
          console.error('Push sent fail:', error);
        });
      }
    } else {
      console.error('Web Push not supported');
    }
  </script>
</head>
<body>
  <h1>PWA Push Demo</h1>

  <button id="subscribe-button" onclick="navigator.serviceWorker.ready.then(() => sendPush())">Subscribe Push</button>
  <button id="push-button" onclick="sendPush()" disabled>Send Push</button>
</body>
</html>

总结

Web Push 推送是 PWA 应用中实现本地推送的一种方式。它的实现过程相对较为复杂，需要用到 Service Worker 和其他一些技术。但是，一旦实现成功，Web Push 推送可以为应用带来许多 native 应用的体验。希望这篇文章可以帮助你更好地了解 Web Push 推送，并在你的 PWA 应用中成功地实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f8a959f6b2d6eab30919c9