html 推送通知功能配置

2026-04-23 08:00:14 1543阅读 0评论

实战：用 HTML 实现推送通知的本地配置与关键细节

在移动端应用里，一个及时的推送往往能决定用户是否点开、继续使用。不用借助第三方推送，也能在浏览器侧搭建本地化的通知推送能力。这篇文章带你从零开始，用 HTML、JavaScript 与本地 Service Worker 实现一个可配置、可控、低打扰的推送通知方案，覆盖权限、内容格式、点击反馈与去重等关键点。

场景引入：为什么要做本地推送？

你可能有这样的场景：在个人博客或轻量站里，想在文章发布或关注事件时给用户发送本地通知；或者在网页端小工具里，用通知提醒任务进度、备忘事项。相较依赖远程推送，本地推送更可控、隐私更友好，也更容易在局域网或离线环境运行。

项目准备

一个可访问的本地服务器（如本地 Node 服务器或本地文件协议下配合服务 worker 的限制，服务 worker 仍需通过 http 服务运行）
现成的 HTML 页面与 JavaScript 脚本
简单的推送内容与触发条件（如定时、页面交互、文章发布）

核心配置步骤

1. 请求通知权限

在页面首次触达通知场景时，主动请求权限，尊重用户选择，避免未经同意打扰。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>本地通知推送配置</title>
</head>
<body>
  <button onclick="requestPermission()">允许通知</button>
  <script>
    async function requestPermission() {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        console.log('通知权限已授予');
      }
    }
  </script>
</body>
</html>

2. 配置 Service Worker 作为通知代理

通过 Service Worker 注册并激活，将触发事件（如定时、用户行为）与通知发送逻辑统一管理。

// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('notification-cache').then(cache => cache.addAll([
      '/index.html',
      '/service-worker.js'
    ]))
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys.map(key => {
        if (key !== 'notification-cache') {
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('push', event => {
  const data = event.data && event.data.json();
  if (!data) return;
  event.waitUntil(
    new Promise(resolve => {
      setTimeout(() => {
        Notification.requestUpdatePermission().then(permission => {
          if (permission === 'granted') {
            event.reply(data);
            resolve();
          }
        });
      }, 1000);
    })
  );
});

3. 定义通知内容与格式

在触发时生成包含标题、体内容、图标与声音等的 JSON，支持简短提醒与详情展示。

const payload = {
  title: '新内容上线提醒',
  body: '您关注的页面已发布新文章，点开查看详情：https://your-site.com',
  icon: '/favicon.ico',
  data: {
    url: 'https://your-site.com',
    postId: '123456'
  }
};

4. 触发条件与去重机制

在服务端或脚本里设定触发条件，并记录已发送记录，避免重复推送。

let lastNotifiedId = null;

function sendNotification(payload) {
  if (payload && payload.postId !== lastNotifiedId) {
    navigator.serviceWorker.controller.postMessage({ type: 'push', data: payload });
    lastNotifiedId = payload.postId;
  }
}

5. 点击反馈与交互

为通知添加点击事件处理，跳转指定页面或执行自定义动作，同时可恢复通知样式或记录点击行为。

self.addEventListener('notificationclick', event => {
  const notification = event.notification;
  const action = event.action;

  if (action === 'tap') {
    event.notification.close();
    event.waitUntil(
      clients.openWindow(notification.data.url)
    );
  }
});