基于Google‘s FCM实现消息推送
当然，下面是一个简单的示例，演示了如何使用 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实现消息推送
当然，下面是一个简单的示例，演示了如何使用 Service Worker 和 Googles Firebase Cloud Messaging（FCM）来实现 Web 推送通知。 1. HTML 文件（index.html） <!DOCTYPE html> <html> <head&g…...
若依微服务前后端部署启动流程（只记录）
若依官网：https://www.ruoyi.vip/ 若依源码下载，直接zip既可：RuoYi-Cloud: 🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本 下载解压，导入 idea&…...
docker创建nginx容器
前言：当直接run运行nginx容器时，如果命令带有-v 映射出配置文件目录，则会报错，提示无法初始化，原因是没有配置文件，docker会同步主机文件到容器内，而主机文件又是空白的，所以无法启动…...
nio 文件传输
transferto方法一次只能传输2个g的数据 文件大于2个g时...
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…...
【Python目标识别】目标检测的原理及常见模型的介绍
1 概述 目标检测（Object Detection）是计算机视觉领域的一个重要研究方向，其目的是在图像或视频中定位并识别出特定的物体。目标检测模型通常需要同时确定物体的位置和类别。在深度学习之前，目标检测算法主要基于传统计算机视觉方法…...
SpringCloud小项目——订单积分商城 使用Nacos、Open Feign、Gateway、Sentinel技术栈
目录 引出小项目要求创建极简数据库表订单表，订单明细表商品表积分表 相关微服务积分微服务产品微服务订单微服务调用积分和订单微服务 网关微服务登陆认证通过网关实现对外提供接口API走网关功能 sentinel相关使用Sentinel限流，流量整形Sentinel降级服务…...
澳大利亚教育部宣布ChatGPT将被允许在澳学校使用！
教育部长最近宣布，从 2024 年起，包括 ChatGPT 在内的人工智能将被允许在所有澳大利亚学校使用。 （图片来源：卫报） 而早些时候，澳洲各高校就已经在寻找与Chatgpt之间的平衡了。 之前，悉尼大学就…...
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. **在显示方面，使用者可以设定欲显…...
vue学习-14vue的路由缓存组件以及activated和deactivated生命周期钩子
在Vue.js中，使用路由的内置特性来控制组件的缓存，以提高应用程序性能。默认情况下，Vue Router不会缓存组件，但你可以通过以下方式启用组件缓存： <keep-alive> 组件：<keep-alive> 是Vue.js的内…...
【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编译可…...
31 数据分析（中）numpy介绍
文章目录 工具excelTableauPower Queryjupytermatplotlibnumpy安装导入包快速掌握（bushi）array和list的相互转化 np的range多维数组的属性array的改变形状array升降维度array内元素的类型数和array的运算array之间的加减法认识轴切片条件与逻辑修改值app…...
华为OD机考算法题：字符串划分
题目部分 题目字符串划分难度难题目说明给定一个小写字母组成的字符串s，请找出字符串中两个不同位置的字符作为分割点，使得字符串分成的三个连续子串且子串权重相等，注意子串不包含分割点。 若能找到满足条件的两个分割点，请输出…...
回环地址写数据速度对比(二))
AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比(二)
之前写了篇博客：AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比 然后利用的是发送端读取大文件，接收方接收并保存为文件的方式进行测试，结果发现，AF_UNIX并未比127.0.0.1(AF_INET)回环地址优秀，若单次发送的字节数…...
“Python+”集成技术高光谱遥感数据处理与机器学习教程
详情点击公众号链接：“Python”集成技术高光谱遥感数据处理与机器学习教程 第一：高光谱基础 一：高光谱遥感基本概念 01)高光谱遥感 02)光的波长 03)光谱分辨率 04)高光谱遥感的历史和发展 二：高光谱传感器与数据获取 01)高…...
centos7 快速搭建自测mysql环境 docker + mysql
环境准备 centos7快速搭建docker mysql docker镜像源配置 一般都是要配的不然太慢了，docker 1.12以上创建或修改 /etc/docker/daemon.json 文件，修改为如下形式: 地址替换国内源 {"registry-mirrors" : ["https://docker.mirrors.u…...
c++视觉检测-----Canny边缘算子
Canny边缘算子 cv::Canny()是OpenCV库中用于执行Canny边缘检测的函数。Canny边缘检测是一种广泛使用的图像处理技术，用于检测图像中的边缘。 以下是cv::Canny()函数的一般用法和参数： void cv::Canny(cv::InputArray image, // 输入图像&#x…...
机器学习笔记 - 用于动作识别的网络TSN/TSM/SlowFast/R(2+1)D/3D MobileNetV2
一、简述 动作识别是在视频序列中检测和分类人类动作的过程。 近年来，由于其广泛的应用，它已成为一项越来越重要的技术，例如监控、人机交互以及视频索引和检索。 特别是，动作识别对于无人驾驶飞行器 (UAV) 或无人机来说变得至关重要，因为它们越来越多地用于各种应用，例如…...
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…...
软件‘小程序‘前台开发软件定制的知识|app网站搭建
软件，小程序，前台开发软件定制的知识 随着互联网的快速发展，软件，小程序，前台开发软件定制已经成为了企业必备的工具。它可以帮助企业更好地管理业务，提高效率，增强用户体验。那么，什…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...