搭建低成本稳定的后台订单桌面通知方案
利用浏览器原生 Notification API 实现后台订单桌面提醒，是一种无需常驻服务、成本低且稳定性高的技术选型。
方案核心优势
- 后端轻量：基于原生 PHP FPM 即可运行，无需部署额外的常驻守护进程。
- 后台生效：即使页面最小化或切换至后台，新订单仍可触发系统级桌面通知。
- 一次授权，长期有效：用户首次点击授权后，浏览器将持久记录权限状态；后续刷新或重新打开页面无需重复操作。
- 内容自定义：支持灵活配置通知标题与提醒文案。
- 安全规范：公网站点需部署 HTTPS 协议以符合浏览器安全策略。
实施注意事项
浏览器安全限制：通知权限申请必须绑定用户主动点击事件，禁止页面加载时自动弹出授权窗口。但在完成首次授权后，后续访问可自动检测并复用权限状态。
完整代码实现
PHP 后端接口
文件路径：api/get_new_orders.php
功能逻辑：查询未提醒的订单数据，查询成功后立即标记为“已提醒”，防止重复弹窗。
<?php
header("Content-Type:application/json;charset=utf-8");
$dsn = 'mysql:host=127.0.0.1;dbname=你的数据库名;charset=utf8mb4';
$dbuser = '数据库账号';
$dbpwd = '数据库密码';
try {
$pdo = new PDO($dsn, $dbuser, $dbpwd);
$sql = "SELECT id,order_no,total_amount,create_time FROM orders WHERE is_notify=0";
$stmt = $pdo->query($sql);
$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(!empty($list)){
$ids = array_column($list,'id');
$idsStr = implode(',',$ids);
$pdo->exec("UPDATE orders SET is_notify=1 WHERE id IN($idsStr)");
}
echo json_encode($list);
}catch (Exception $e){
echo json_encode([]);
}
?>前端后台页面
包含权限申请、状态检测及轮询逻辑的完整 HTML 示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>订单后台</title>
</head>
<body>
<h3>订单管理后台</h3>
<button id="allowNotifyBtn">开启桌面订单通知</button>
<script>
let notifyEnabled = false;
const notifyBtn = document.getElementById('allowNotifyBtn');
// 页面加载时自动检测权限：已授权则直接启用，隐藏按钮
window.onload = function(){
if (Notification.permission === "granted") {
notifyEnabled = true;
notifyBtn.style.display = 'none';
}
}
// 用户点击申请通知权限（仅首次未授权时需要）
notifyBtn.onclick = async function () {
const permission = await Notification.requestPermission();
if (permission === "granted") {
notifyEnabled = true;
this.style.display = 'none';
alert("桌面通知已开启，页面最小化也能收到订单弹窗");
} else {
alert("通知权限被拒绝，请在浏览器设置里打开网站通知权限");
}
}
// 弹出订单桌面通知
function showOrderNotify() {
if (!notifyEnabled || Notification.permission !== "granted") return;
new Notification("新订单提醒", {
body: "您有新的订单，请及时处理",
tag: "new_order"
});
}
// 轮询查询订单
function pollOrder() {
fetch('./api/get_new_orders.php')
.then(res => res.json())
.then(orders => {
if (orders.length > 0) {
showOrderNotify();
}
})
}
// 20 秒轮询一次，平衡时效性与服务器压力
setInterval(pollOrder, 20000);
</script>
</body>
</html>数据库表结构调整
需在订单表 orders 中新增字段 is_notify，用于标记通知推送状态，避免同一订单反复触发提醒。
is_notify TINYINT DEFAULT 0- 0：未提醒的新订单
- 1：已推送桌面通知
关键技术要点总结
- 权限持久化：通知权限仅需用户首次主动点击授权，浏览器将永久保存该站点的许可状态。
- Tag 参数机制：设置相同的
tag值可使新通知覆盖旧通知，避免消息堆积；若移除该参数，每条订单将独立弹出通知。 - 兜底策略建议：由于浏览器完全关闭时无法触发 Notification，建议搭配邮件推送作为容错机制，确保零漏单。
该方案依托浏览器原生 API，开发维护成本低，虽非毫秒级实时推送，但足以满足后台订单监控场景需求。
#Notification #订单提醒