当前位置： 首页 > news >正文

基于Google‘s FCM实现消息推送

news 2025/11/11 13:48:35

当然，下面是一个简单的示例，演示了如何使用 Service Worker 和 Google's Firebase Cloud Messaging（FCM）来实现 Web 推送通知。

1. HTML 文件（index.html）

<!DOCTYPE html>
<html>
<head><title>FCM Push Notification Example</title><script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script><script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js"></script>
</head>
<body><h1>Welcome to FCM Push Notification Example</h1><script src="main.js"></script>
</body>
</html>

2. 主 JavaScript 文件（main.js）

// Initialize Firebase
firebase.initializeApp({apiKey: "your-api-key",authDomain: "your-auth-domain",projectId: "your-project-id",messagingSenderId: "your-messaging-sender-id",appId: "your-app-id"
});const messaging = firebase.messaging();// Request permission and get token
Notification.requestPermission().then((permission) => {if (permission === 'granted') {messaging.getToken().then((currentToken) => {if (currentToken) {console.log('Token:', currentToken);// Send this token to your server} else {console.log('No registration token available. Request permission to generate one.');}}).catch((err) => {console.log('An error occurred while retrieving token. ', err);});}
});// Handle incoming messages
messaging.onMessage((payload) => {console.log('Message received:', payload);// Customize notification hereconst notificationTitle = payload.notification.title;const notificationOptions = {body: payload.notification.body,icon: payload.notification.icon};new Notification(notificationTitle, notificationOptions);
});

3. Service Worker 文件（firebase-messaging-sw.js）

// Import and configure the Firebase SDK
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');firebase.initializeApp({apiKey: "your-api-key",authDomain: "your-auth-domain",projectId: "your-project-id",messagingSenderId: "your-messaging-sender-id",appId: "your-app-id"
});const messaging = firebase.messaging();// Handle background messages
messaging.onBackgroundMessage((payload) => {console.log('Received background message:', payload);const notificationTitle = payload.notification.title;const notificationOptions = {body: payload.notification.body,icon: payload.notification.icon};self.registration.showNotification(notificationTitle, notificationOptions);
});// Handle notification click
self.addEventListener('notificationclick', (event) => {event.notification.close();event.waitUntil(clients.openWindow('https://fbspider.com'));
});

 

4. 在服务器端发送推送

使用 cURL 或其他 HTTP 客户端发送一个 POST 请求：

curl -X POST "https://fcm.googleapis.com/fcm/send" \-H "Authorization: key=your-server-key" \-H "Content-Type: application/json" \-d '{"to": "client-token","notification": {"title": "Your Title","body": "Your Body","icon": "your-icon-url"}}'

这个示例包括：

  • 初始化 Firebase 和消息传递服务。
  • 请求用户权限并获取 FCM 令牌。
  • 在前台和后台接收消息。
  • 点击通知后跳转到 https://fbspider.com。

请确保替换所有的 your-* 占位符为你自己的 Firebase 配置和服务器密钥。希望这个示例能帮助你！

相关文章：

基于Google‘s FCM实现消息推送

当然&#xff0c;下面是一个简单的示例&#xff0c;演示了如何使用 Service Worker 和 Googles Firebase Cloud Messaging&#xff08;FCM&#xff09;来实现 Web 推送通知。 1. HTML 文件&#xff08;index.html&#xff09; <!DOCTYPE html> <html> <head&g…...

编程日记 2023/10/11 10:34:51

若依微服务前后端部署启动流程（只记录）

若依官网&#xff1a;https://www.ruoyi.vip/ 若依源码下载&#xff0c;直接zip既可&#xff1a;RuoYi-Cloud: &#x1f389; 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统&#xff0c;同时提供了 Vue3 的版本 下载解压&#xff0c;导入 idea&…...

编程日记 2023/10/11 10:33:50

docker创建nginx容器

前言&#xff1a;当直接run运行nginx容器时&#xff0c;如果命令带有-v 映射出配置文件目录&#xff0c;则会报错&#xff0c;提示无法初始化&#xff0c;原因是没有配置文件&#xff0c;docker会同步主机文件到容器内&#xff0c;而主机文件又是空白的&#xff0c;所以无法启动…...

编程日记 2023/10/11 10:32:48

nio 文件传输

transferto方法一次只能传输2个g的数据 文件大于2个g时...

编程日记 2023/10/11 10:30:47

2023-10-09 python-安装psd_tools-记录

摘要: 2023-10-09 python-安装psd_tools-记录 安装python3 yum install -y python3 yum install -y python3-devel psd-tools相关文档 psd-tools — psd-tools 1.9.28 documentation GitHub - psd-tools/psd-tools: Python package for reading Adobe Photoshop PSD files psd…...

编程日记 2023/10/11 10:29:46

【Python目标识别】目标检测的原理及常见模型的介绍

1 概述 目标检测&#xff08;Object Detection&#xff09;是计算机视觉领域的一个重要研究方向&#xff0c;其目的是在图像或视频中定位并识别出特定的物体。目标检测模型通常需要同时确定物体的位置和类别。在深度学习之前&#xff0c;目标检测算法主要基于传统计算机视觉方法…...

编程日记 2023/10/11 10:28:45

SpringCloud小项目——订单积分商城 使用Nacos、Open Feign、Gateway、Sentinel技术栈

目录 引出小项目要求创建极简数据库表订单表&#xff0c;订单明细表商品表积分表 相关微服务积分微服务产品微服务订单微服务调用积分和订单微服务 网关微服务登陆认证通过网关实现对外提供接口API走网关功能 sentinel相关使用Sentinel限流&#xff0c;流量整形Sentinel降级服务…...

编程日记 2023/10/11 10:27:44

澳大利亚教育部宣布ChatGPT将被允许在澳学校使用！

教育部长最近宣布&#xff0c;从 2024 年起&#xff0c;包括 ChatGPT 在内的人工智能将被允许在所有澳大利亚学校使用。 &#xff08;图片来源&#xff1a;卫报&#xff09; 而早些时候&#xff0c;澳洲各高校就已经在寻找与Chatgpt之间的平衡了。 之前&#xff0c;悉尼大学就…...

编程日记 2023/10/11 10:26:43

Linux基础指令笔记大全

Linux基础指令笔记大全 1. ls 指令2. pwd命令3. cd 指令4. touch指令5. mkdir指令6. rmdir指令 && rm 指令7. man指令8.cp指令9. mv指令10. cat 指令11. more指令12. less指令13. head指令14. tail指令15. 时间相关的指令1. **在显示方面&#xff0c;使用者可以设定欲显…...

编程日记 2023/10/11 10:24:41

vue学习-14vue的路由缓存组件以及activated和deactivated生命周期钩子

在Vue.js中&#xff0c;使用路由的内置特性来控制组件的缓存&#xff0c;以提高应用程序性能。默认情况下&#xff0c;Vue Router不会缓存组件&#xff0c;但你可以通过以下方式启用组件缓存&#xff1a; <keep-alive> 组件&#xff1a;<keep-alive> 是Vue.js的内…...

编程日记 2023/10/11 10:23:40

【opencv】windows10下opencv4.8.0-cuda版本源码编译教程

【opencv】windows10下opencv4.8.0-cuda版本源码编译教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【opencv】windows10下opencv4.8.0-cuda版本源码编译教程前言准备工具cuda/cudnncmakeopencv4.5.0opencv_contrib CMake编译VS2019编译可…...

编程日记 2023/10/11 10:22:39

31 数据分析（中）numpy介绍

文章目录 工具excelTableauPower Queryjupytermatplotlibnumpy安装导入包快速掌握&#xff08;bushi&#xff09;array和list的相互转化 np的range多维数组的属性array的改变形状array升降维度array内元素的类型数和array的运算array之间的加减法认识轴切片条件与逻辑修改值app…...

编程日记 2023/10/11 10:21:38

华为OD机考算法题：字符串划分

题目部分 题目字符串划分难度难题目说明给定一个小写字母组成的字符串s&#xff0c;请找出字符串中两个不同位置的字符作为分割点&#xff0c;使得字符串分成的三个连续子串且子串权重相等&#xff0c;注意子串不包含分割点。 若能找到满足条件的两个分割点&#xff0c;请输出…...

编程日记 2023/10/11 10:19:36

AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比(二)

之前写了篇博客&#xff1a;AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比 然后利用的是发送端读取大文件&#xff0c;接收方接收并保存为文件的方式进行测试&#xff0c;结果发现&#xff0c;AF_UNIX并未比127.0.0.1(AF_INET)回环地址优秀&#xff0c;若单次发送的字节数…...

编程日记 2023/10/11 10:18:34

“Python+”集成技术高光谱遥感数据处理与机器学习教程

详情点击公众号链接&#xff1a;“Python”集成技术高光谱遥感数据处理与机器学习教程 第一&#xff1a;高光谱基础 一&#xff1a;高光谱遥感基本概念 01)高光谱遥感 02)光的波长 03)光谱分辨率 04)高光谱遥感的历史和发展 二&#xff1a;高光谱传感器与数据获取 01)高…...

编程日记 2023/10/11 10:17:33

centos7 快速搭建自测mysql环境 docker + mysql

环境准备 centos7快速搭建docker mysql docker镜像源配置 一般都是要配的不然太慢了&#xff0c;docker 1.12以上创建或修改 /etc/docker/daemon.json 文件&#xff0c;修改为如下形式: 地址替换国内源 {"registry-mirrors" : ["https://docker.mirrors.u…...

编程日记 2023/10/11 10:15:31

c++视觉检测-----Canny边缘算子

Canny边缘算子 cv::Canny()是OpenCV库中用于执行Canny边缘检测的函数。Canny边缘检测是一种广泛使用的图像处理技术&#xff0c;用于检测图像中的边缘。 以下是cv::Canny()函数的一般用法和参数&#xff1a; void cv::Canny(cv::InputArray image, // 输入图像&#x…...

编程日记 2023/10/11 10:14:30

机器学习笔记 - 用于动作识别的网络TSN/TSM/SlowFast/R(2+1)D/3D MobileNetV2

一、简述 动作识别是在视频序列中检测和分类人类动作的过程。 近年来，由于其广泛的应用，它已成为一项越来越重要的技术，例如监控、人机交互以及视频索引和检索。 特别是，动作识别对于无人驾驶飞行器 (UAV) 或无人机来说变得至关重要，因为它们越来越多地用于各种应用，例如…...

编程日记 2023/10/11 10:13:29

mybatis批量插入

一、定义DBExec import java.util.List;public abstract class DBExec<T> {public abstract void operate(List<T> list); }二、定义BatchDBService public interface BatchDBService<T> {void exec(int batchSize, List<T> list, DBExec<T> d…...

编程日记 2023/10/11 10:09:25

软件‘小程序‘前台开发软件定制的知识|app网站搭建

软件&#xff0c;小程序&#xff0c;前台开发软件定制的知识 随着互联网的快速发展&#xff0c;软件&#xff0c;小程序&#xff0c;前台开发软件定制已经成为了企业必备的工具。它可以帮助企业更好地管理业务&#xff0c;提高效率&#xff0c;增强用户体验。那么&#xff0c;什…...

编程日记 2023/10/11 10:08:24

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/11/9 22:09:54

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/11/8 1:22:33

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/11/7 21:04:19

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/11/7 7:00:10

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/11/8 5:25:23