当前位置：首页 > JavaScript

js实现推送

2026-04-05 23:20:12JavaScript

使用Web Push API实现推送

Web Push API允许网页接收服务器推送的消息，即使网页未在前台运行或浏览器已关闭。实现步骤如下：

获取用户授权 需要先请求用户授权通知权限：

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
  }
});

注册Service Worker Service Worker是推送功能的核心，需在独立文件中注册：

js实现推送

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    return registration.pushManager.getSubscription();
  }).then(subscription => {
    if (!subscription) {
      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
      });
    }
    return subscription;
  }).then(subscription => {
    console.log('Push subscription:', subscription);
  });
}

处理推送事件 在Service Worker文件（sw.js）中监听推送事件：

self.addEventListener('push', event => {
  const payload = event.data ? event.data.text() : 'No payload';
  event.waitUntil(
    self.registration.showNotification('Push Notification', {
      body: payload,
      icon: '/icon.png'
    })
  );
});

发送推送消息 服务器端需使用Web Push库（如web-push）发送通知：

js实现推送

const webpush = require('web-push');
webpush.setVapidDetails(
  'mailto:contact@example.com',
  'YOUR_PUBLIC_VAPID_KEY',
  'YOUR_PRIVATE_VAPID_KEY'
);

const subscription = {/* 用户订阅对象 */};
webpush.sendNotification(subscription, 'Your push message');

使用第三方推送服务

Firebase Cloud Messaging (FCM) 适用于移动端和Web的跨平台推送方案：

// 初始化
firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  messagingSenderId: 'YOUR_SENDER_ID'
});

const messaging = firebase.messaging();
messaging.requestPermission().then(() => messaging.getToken())
  .then(token => console.log('FCM token:', token));

// 接收消息
messaging.onMessage(payload => {
  console.log('Message received:', payload);
});

OneSignal 提供完整的推送通知解决方案：

// 初始化SDK
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
  OneSignal.init({
    appId: "YOUR_APP_ID",
    safari_web_id: "YOUR_SAFARI_WEB_ID",
    notifyButton: { enable: true }
  });
});

// 检查订阅状态
OneSignal.push(function() {
  OneSignal.isPushNotificationsEnabled(function(isEnabled) {
    if (isEnabled) console.log("Push notifications are enabled!");
  });
});