当前位置：首页 > 文章列表 > 文章 > 前端 > JS怎么实现网页消息提醒？5种Web消息通知方式分享

JS怎么实现网页消息提醒？5种Web消息通知方式分享

2025-06-17 15:17:19 0浏览收藏

JS如何实现网页消息通知？本文详细介绍了5种Web消息通知的实现方式，助力前端开发者打造更友好的用户体验。首先，浏览器原生Notification API提供基础通知功能，但需用户授权。其次，WebSockets建立持久连接，适用于实时性高的应用场景，如聊天应用。Server-Sent Events (SSE)则实现服务器单向推送，更简单易用。此外，Firebase Cloud Messaging (FCM)等第三方服务提供强大的推送功能，但需一定配置成本。最后，轮询方式虽然简单，但效率较低。文章还探讨了如何处理浏览器通知权限问题，保持通知样式一致性，以及测试消息通知功能，帮助开发者选择合适的方案并解决实际问题。

消息通知功能在前端JS中主要通过5种方式实现。1. 使用浏览器原生Notification API，需请求用户权限并处理授权状态，适合简单通知场景；2. WebSockets建立持久连接，实现客户端与服务器的双向通信，适合实时性要求高的场景，如聊天应用；3. Server-Sent Events (SSE)，服务器单向推送数据，实现较简单但仅支持单向通信；4. 第三方服务如Firebase Cloud Messaging (FCM)，功能强大但需配置和学习成本，适合复杂推送需求；5. 轮询方式实现最简单但效率低、实时性差，适用于轻量级场景。每种方式各有优劣，应根据具体需求选择合适方案，并注意处理权限、样式一致性及多浏览器兼容性问题。

js怎样实现消息通知功能 Web消息通知的5种实现方式

消息通知功能的实现，在前端JS中，主要依赖于浏览器提供的Web API，以及一些第三方库或服务。目标是让用户在不离开当前页面的情况下，及时收到重要信息，比如新邮件、好友请求等等。

Web消息通知的5种实现方式

利用浏览器原生Notification API实现消息通知

这是最基础也最直接的方式。浏览器原生提供了Notification API，允许网页在用户允许的情况下，显示系统级别的通知。

// 请求权限
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    // 创建通知
    const notification = new Notification("您有新的消息！", {
      body: "这是一条测试消息。",
      icon: 'path/to/icon.png' // 可选，通知图标
    });

    // 点击事件处理
    notification.onclick = function(event) {
      event.preventDefault(); // 防止浏览器默认行为，例如某些浏览器会跳转到页面
      window.focus(); // 激活窗口
      this.close(); // 关闭通知
    }

    // 关闭事件处理
    notification.onclose = function() {
      console.log('通知已关闭');
    };
  } else {
    console.log("用户拒绝了通知权限。");
  }
});

注意，这个API的使用需要用户授权，而且不同浏览器对通知的显示方式和权限管理可能略有差异。权限被拒绝是常有的事，所以要做好相应的处理。

使用WebSockets实现实时消息推送

如果需要实时性很高的消息通知，比如聊天应用，WebSockets是更好的选择。WebSockets建立的是客户端和服务器之间的持久连接，服务器可以主动向客户端推送消息。

服务器端（Node.js示例）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  // 模拟服务器推送消息
  setInterval(() => {
    ws.send(JSON.stringify({ message: '服务器推送的消息：' + new Date() }));
  }, 5000);

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

客户端（JS）

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to WebSocket server');
};

ws.onmessage = event => {
  const data = JSON.parse(event.data);
  console.log('Received:', data.message);
  // 显示通知，可以使用Notification API
  new Notification('新消息', { body: data.message });
};

ws.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

ws.onerror = error => {
  console.error('WebSocket error:', error);
};

这种方式的优点是实时性高，缺点是需要维护一个WebSocket服务器。

利用Server-Sent Events (SSE) 实现消息通知

SSE 是一种服务器单向推送数据的技术，客户端通过 HTTP 连接到服务器，服务器可以随时向客户端推送数据。相比 WebSockets，SSE 更简单，不需要处理复杂的协议，但只能单向通信。

服务器端 (Node.js 示例)

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 模拟服务器推送消息
  setInterval(() => {
    const data = `data: ${JSON.stringify({ message: '服务器推送的消息：' + new Date() })}\n\n`;
    res.write(data);
  }, 5000);
}).listen(8080);

客户端 (JS)

const eventSource = new EventSource('http://localhost:8080');

eventSource.onmessage = event => {
  const data = JSON.parse(event.data);
  console.log('Received:', data.message);
  // 显示通知
  new Notification('新消息', { body: data.message });
};

eventSource.onerror = error => {
  console.error('SSE error:', error);
  eventSource.close();
};

SSE 的优点是实现简单，缺点是只能服务器向客户端推送数据，客户端不能主动向服务器发送消息。

使用第三方消息推送服务 (如 Firebase Cloud Messaging)

如果不想自己搭建服务器，或者需要更强大的消息推送功能，可以使用第三方消息推送服务，比如 Firebase Cloud Messaging (FCM)。

注册并配置 Firebase 项目：在 Firebase 控制台创建一个项目，并配置 Web 应用。
添加 Firebase SDK 到你的 Web 应用：

<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js"></script>

初始化 Firebase

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.requestPermission()
  .then(() => {
    console.log('Notification permission granted.');
    // 获取 token
    return messaging.getToken();
  })
  .then((token) => {
    console.log('Token:', token);
    // 将 token 发送到服务器，服务器用 token 推送消息
  })
  .catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // 显示通知
  new Notification(payload.notification.title, { body: payload.notification.body });
});

服务器端使用 Firebase Admin SDK 推送消息

const admin = require('firebase-admin');

const serviceAccount = require("path/to/your/serviceAccountKey.json");

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

const message = {
  notification: {
    title: '新消息',
    body: '您有一条来自服务器的新消息'
  },
  token: 'YOUR_CLIENT_TOKEN'
};

admin.messaging().send(message)
  .then((response) => {
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

FCM 的优点是功能强大，可靠性高，缺点是需要学习和配置 Firebase。

使用轮询（Polling）实现简单消息通知

虽然不推荐，但在某些简单场景下，轮询也是一种选择。客户端定时向服务器发送请求，检查是否有新消息。

function checkNewMessages() {
  fetch('/api/new-messages')
    .then(response => response.json())
    .then(data => {
      if (data.hasNewMessage) {
        // 显示通知
        new Notification('新消息', { body: data.message });
      }
    })
    .catch(error => {
      console.error('Error checking messages:', error);
    });
}

// 每隔一段时间检查一次
setInterval(checkNewMessages, 10000); // 每 10 秒检查一次

轮询的优点是实现简单，缺点是实时性差，会浪费服务器资源。

如何优雅地处理浏览器通知权限问题

用户拒绝授权通知是很常见的情况，需要优雅地处理。

检测权限状态：在尝试发送通知之前，先检查 Notification.permission 的值。

if (Notification.permission === 'granted') {
  // 可以发送通知
  new Notification('新消息', { body: '您有新的消息' });
} else if (Notification.permission === 'denied') {
  // 用户已拒绝授权
  console.log('用户已拒绝通知权限');
  // 可以显示一个友好的提示，引导用户去设置中开启通知权限
} else if (Notification.permission === 'default') {
  // 尚未请求权限
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // 可以发送通知
      new Notification('新消息', { body: '您有新的消息' });
    }
  });
}

提供友好的提示：如果用户拒绝了通知权限，不要直接放弃，可以提供一个友好的提示，告诉用户开启通知权限的好处，并引导用户去浏览器设置中开启。
避免过度打扰：不要频繁地请求通知权限，这会让用户感到厌烦。只有在用户明确需要接收通知的情况下，才请求权限。

如何在不同浏览器中保持通知样式一致

不同浏览器对通知的显示方式略有差异，可以通过一些技巧来保持通知样式的一致性。

使用统一的图标：为通知设置一个统一的图标，可以提高用户对应用的识别度。
控制通知内容长度：不同浏览器对通知内容长度的限制可能不同，尽量控制通知内容长度，避免内容被截断。
使用 CSS 样式：虽然不能直接使用 CSS 样式来控制通知的样式，但可以通过一些间接的方式来实现。比如，可以自定义通知的 HTML 结构，然后使用 CSS 样式来控制 HTML 元素的样式。但这需要借助一些第三方库或框架。