使用Web Push Notifications提升用户参与度和留存率

💓 博客主页：瑕疵的CSDN主页

📝 Gitee主页：瑕疵的gitee主页

⏩ 文章专栏：《热点资讯》

使用Web Push Notifications提升用户参与度和留存率

使用Web Push Notifications提升用户参与度和留存率
- 引言
- Web Push Notifications的基本概念
- - 什么是Web Push Notifications
  - Web Push Notifications的核心原理
  - Web Push Notifications的优势
- Web Push Notifications的实现方法
- - 1. 用户订阅
  - - HTML 示例
    - JavaScript 示例
  - 2. 服务工作线程（Service Worker）
  - - Service Worker 示例
  - 3. 服务器端实现
  - - Node.js 示例
- 实际案例：使用Web Push Notifications提升电商网站的用户参与度
- - 1. 创建HTML结构
  - 2. 编写JavaScript代码
  - 3. 编写服务工作线程代码
  - 4. 编写服务器端代码
  - 5. 测试推送通知
- 最佳实践
- - 1. 用户权限管理
  - 2. 内容相关性
  - 3. 频率控制
  - 4. 安全性
  - 5. 兼容性
- 结论
- 参考资料

引言

在当今竞争激烈的互联网环境中，提高用户参与度和留存率是每个网站和应用的关键目标。Web Push Notifications（网页推送通知）作为一种有效的工具，可以帮助网站和应用在用户未打开页面的情况下向用户发送通知，从而吸引用户回访，提高用户参与度和留存率。本文将详细介绍Web Push Notifications的基本概念、核心原理、实现方法以及一个实际的示例应用。

Web Push Notifications的基本概念

什么是Web Push Notifications

Web Push Notifications 是一种基于浏览器的技术，允许网站在用户未打开页面的情况下向用户发送通知。这些通知可以显示在用户的桌面或移动设备上，类似于原生应用的通知。

Web Push Notifications的核心原理

订阅：用户同意接收来自某个网站的通知。
推送服务：浏览器通过一个推送服务（如 Google Firebase Cloud Messaging, FCM）将订阅信息发送到服务器。
发送通知：服务器通过推送服务向用户发送通知。
接收通知：浏览器接收到通知后，显示给用户。

Web Push Notifications的优势

提高用户参与度：通过及时的通知，吸引用户回访网站或应用。
提高留存率：定期发送有用的信息，保持用户对网站或应用的兴趣。
无需用户登录：用户只需一次订阅，即可在任何设备上接收通知。
低开销：推送通知的发送成本较低，适合大规模使用。

Web Push Notifications的实现方法

1. 用户订阅

用户需要先订阅通知，才能接收来自网站的通知。

HTML 示例

<button id="subscribeButton">Subscribe to Notifications</button>
<script src="service-worker.js"></script>
<script src="app.js"></script>

JavaScript 示例

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
      initializeUI();
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

function initializeUI() {
  const button = document.querySelector('#subscribeButton');
  button.addEventListener('click', () => {
    subscribeUser();
  });
}

async function subscribeUser() {
  const registration = await navigator.serviceWorker.getRegistration();
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
  });
  await sendSubscriptionToServer(subscription);
  console.log('User subscribed:', subscription);
}

function sendSubscriptionToServer(subscription) {
  // 发送订阅信息到服务器
  fetch('/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  })
  .then(response => response.json())
  .then(data => {
    console.log('Subscription saved on server:', data);
  })
  .catch(error => {
    console.error('Error sending subscription to server:', 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;
}

2. 服务工作线程（Service Worker）

服务工作线程（Service Worker）是Web Push Notifications的核心组件，负责处理推送通知的接收和显示。

Service Worker 示例

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon,
    image: data.image,
    badge: data.badge,
    vibrate: data.vibrate,
    tag: data.tag,
    renotify: data.renotify,
    actions: data.actions
  });
});

self.addEventListener('notificationclick', event => {  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(windowClients => {
      let matchingClient = null;
      for (let i = 0; i < windowClients.length; i++) {
        const windowClient = windowClients[i];
        if (windowClient.url === '/' && 'focus' in windowClient) {
          matchingClient = windowClient;
          break;
        }
      }
      if (matchingClient) {
        return matchingClient.focus();
      } else {
        return clients.openWindow('/');
      }
    })
  );
});

3. 服务器端实现

服务器端需要通过推送服务（如 FCM）向用户发送通知。

Node.js 示例

const webpush = require('web-push');

// 设置 VAPID 密钥
webpush.setVapidDetails(
  'mailto:your-email@example.com',
  'YOUR_PUBLIC_VAPID_KEY',
  'YOUR_PRIVATE_VAPID_KEY'
);

// 发送通知
app.post('/send-notification', (req, res) => {  const subscription = req.body.subscription;
  const payload = JSON.stringify({ title: 'New Notification', body: 'This is a test notification' });
  webpush.sendNotification(subscription, payload)
    .then(() => res.status(201).json({ success: true }))
    .catch(err => res.status(500).json({ success: false, error: err }));
});

图示：Web Push Notifications的核心原理及其在提高用户参与度和留存率中的应用

实际案例：使用Web Push Notifications提升电商网站的用户参与度

假设我们有一个电商网站，希望通过Web Push Notifications 提升用户的参与度和留存率。以下是具体的步骤和代码示例：

1. 创建HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-commerce Website</title>
  <script src="service-worker.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <h1>Welcome to Our E-commerce Website</h1>
  <button id="subscribeButton">Subscribe to Notifications</button>
</body>
</html>

2. 编写JavaScript代码

在 app.js 文件中编写 JavaScript 代码，实现用户订阅和发送通知的功能。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
      initializeUI();
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

function initializeUI() {
  const button = document.querySelector('#subscribeButton');
  button.addEventListener('click', () => {
    subscribeUser();
  });
}

async function subscribeUser() {
  const registration = await navigator.serviceWorker.getRegistration();
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
  });
  await sendSubscriptionToServer(subscription);
  console.log('User subscribed:', subscription);
}

function sendSubscriptionToServer(subscription) {
  // 发送订阅信息到服务器
  fetch('/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(subscription)
  })
  .then(response => response.json())
  .then(data => {
    console.log('Subscription saved on server:', data);
  })
  .catch(error => {
    console.error('Error sending subscription to server:', 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;
}

3. 编写服务工作线程代码

在 service-worker.js 文件中编写服务工作线程代码，处理推送通知的接收和显示。

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon,
    image: data.image,
    badge: data.badge,
    vibrate: data.vibrate,
    tag: data.tag,
    renotify: data.renotify,
    actions: data.actions
  });
});

self.addEventListener('notificationclick', event => {  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(windowClients => {
      let matchingClient = null;
      for (let i = 0; i < windowClients.length; i++) {
        const windowClient = windowClients[i];
        if (windowClient.url === '/' && 'focus' in windowClient) {
          matchingClient = windowClient;
          break;
        }
      }
      if (matchingClient) {
        return matchingClient.focus();
      } else {
        return clients.openWindow('/');
      }
    })
  );
});

4. 编写服务器端代码

使用 Node.js 和 web-push 库编写服务器端代码，实现发送通知的功能。

const express = require('express');
const bodyParser = require('body-parser');
const webpush = require('web-push');

const app = express();
app.use(bodyParser.json());

// 设置 VAPID 密钥
webpush.setVapidDetails(
  'mailto:your-email@example.com',
  'YOUR_PUBLIC_VAPID_KEY',
  'YOUR_PRIVATE_VAPID_KEY'
);

// 保存订阅信息
app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  // 保存订阅信息到数据库
  res.status(201).json({ success: true });
});

// 发送通知
app.post('/send-notification', (req, res) => {
  const subscription = req.body.subscription;
  const payload = JSON.stringify({ title: 'New Notification', body: 'This is a test notification' });
  webpush.sendNotification(subscription, payload)
    .then(() => res.status(201).json({ success: true }))
    .catch(err => res.status(500).json({ success: false, error: err }));
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

5. 测试推送通知

启动服务器：
```
node server.js
```
打开浏览器，访问包含上述 HTML 和 JavaScript 代码的页面。
点击“Subscribe to Notifications”按钮，订阅通知。
使用 Postman 或其他工具发送 POST 请求到 /send-notification，测试通知是否成功发送。

图示：使用Web Push Notifications实现电商网站用户参与度提升的具体步骤

最佳实践

1. 用户权限管理

确保用户明确知道他们订阅了哪些通知，并提供取消订阅的选项。

2. 内容相关性

发送的内容应与用户兴趣相关，避免发送无关或垃圾信息。

3. 频率控制

合理控制通知的频率，避免过度打扰用户。

4. 安全性

确保 VAPID 密钥的安全性，防止未经授权的访问。

5. 兼容性

虽然大多数现代浏览器支持 Web Push Notifications，但仍需进行兼容性检测。

if ('serviceWorker' in navigator && 'PushManager' in window) {
  // 使用 Web Push Notifications
} else {
  // 使用其他通知方式
}

结论

Web Push Notifications 是一种强大的工具，可以帮助网站和应用在用户未打开页面的情况下向用户发送通知，从而提高用户参与度和留存率。本文详细介绍了 Web Push Notifications 的基本概念、核心原理、实现方法以及一个实际的示例应用。希望本文能帮助读者更好地理解和应用 Web Push Notifications，构建高质量的网站和应用。