当前位置：首页 > JavaScript

js实现app推送

2026-03-01 12:42:31JavaScript

使用 Firebase Cloud Messaging (FCM) 实现推送

Firebase Cloud Messaging (FCM) 是 Google 提供的跨平台消息推送服务，适用于 Web 和移动端。以下是在 JavaScript 中实现 FCM 推送的基本步骤。

<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    projectId: "YOUR_PROJECT_ID",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

请求通知权限并获取设备令牌
在用户交互（如按钮点击）后请求通知权限，成功后会生成设备令牌（Token），用于定向推送：

const messaging = firebase.messaging();
messaging.requestPermission()
  .then(() => messaging.getToken())
  .then(token => console.log("Device Token:", token))
  .catch(err => console.error("Permission denied:", err));

监听推送消息
通过 onMessage 监听前台消息，setBackgroundMessageHandler 处理后台消息：

js实现app推送

messaging.onMessage(payload => {
  console.log("Foreground message:", payload);
  new Notification(payload.notification.title, {
    body: payload.notification.body
  });
});

// 在Service Worker中注册后台处理
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(payload => {
  return self.registration.showNotification(
    payload.notification.title,
    { body: payload.notification.body }
  );
});

使用 Service Worker 增强推送能力

Service Worker 是浏览器在后台运行的脚本，可拦截网络请求和推送事件。以下是注册和使用的关键代码。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
    .then(registration => console.log("SW registered:", registration))
    .catch(err => console.error("SW registration failed:", err));
}

处理推送事件
在 Service Worker 中监听 push 事件，自定义通知行为：

js实现app推送

self.addEventListener('push', event => {
  const payload = event.data.json();
  event.waitUntil(
    self.registration.showNotification(payload.notification.title, {
      body: payload.notification.body,
      icon: payload.notification.icon
    })
  );
});

服务器端发送推送消息

通过 Firebase Admin SDK 或 HTTP 请求从服务器发送推送。以下是 Node.js 示例：

安装 Firebase Admin SDK

npm install firebase-admin

发送推送消息

const admin = require('firebase-admin');
const serviceAccount = require('./service-account-key.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

const message = {
  token: 'DEVICE_TOKEN', // 目标设备令牌
  notification: {
    title: '新消息',
    body: '您有一条未读通知'
  }
};

admin.messaging().send(message)
  .then(response => console.log('Success:', response))
  .catch(error => console.error('Error:', error));