使用web.dev提供的工具实现浏览器消息推送服务
文章目录
- 前言
- 实现工具和效果
- 实现原理
- 实现过程
- 前端接收用户订阅请求将用户订阅信息更新到后端
- 后端实现接收并保存订阅信息的接口
- 后端实现消息推送的逻辑
前言
对于电商独立站来说，新品上架或者促销活动上线及时通知到用户是很重要的，通知的渠道有很多，其中就包括浏览器消息推送。浏览器消息推送可以实现将自定义的浏览器通知消息（可含文字、图片、链接）推送给订阅了你网站浏览器消息的用户，这样用户打开电脑看到系统弹出的浏览器通知消息就可以点击跳转到你的活动介绍页，从而带来订单转化。
实现工具和效果
这次我们使用的浏览器消息推送工具是web.dev网站的Push notifications，网站链接：官网文档（google服务需合理上网）。消息通知在PC端和手机端的效果如下图所示：
相关文章：
使用web.dev提供的工具实现浏览器消息推送服务
文章目录 前言实现工具和效果实现原理实现过程前端接收用户订阅请求将用户订阅信息更新到后端后端实现接收并保存订阅信息的接口后端实现消息推送的逻辑前言 对于电商独立站来说，新品上架或者促销活动上线及时通知到用户是很重要的，通知的渠道有很多，其中就包括浏览器消息推…...
计算机系统结构为什么用architecture 而不是structure?
architecture本意是建筑学、建筑艺术，其含义就是建筑的样子和背后的设计思想，用于计算机科学可以表达计算机的系统结构和后面的设计原理：它长什么样？它为什么长这样？ 与architecture 对应的词是structure （…...
sqoop问题汇总记录
此篇博客仅记录在使用sqoop时遇到的各种问题。持续更新，有问题评论区一起探讨，写得有不足之处见谅。 Oracle_to_hive 1. main ERROR Could not register mbeans java.security.AccessControlException: access denied ("javax.management.MBeanTr…...
Git 创建新的分支但清空提交记录
有时候需要创建新的分支，但是原有分支的提交非常多，不好区分哪些是创建分支之后的提交。 那么就把原分支的提交全部去掉 要从 分支1 创建 分支2，并确保 分支2 不包含任何提交历史，同时文件与 分支1 的最后一次提交一致࿰…...
SQL PRIMARY KEY
SQL PRIMARY KEY 概述 在关系型数据库中，主键（PRIMARY KEY）是一个非常重要的概念。它是表中每一行数据的唯一标识符，用于保证数据的完整性和准确性。本文将详细介绍SQL中的主键，包括其定义、作用、如何创建和修改主键…...
软件测试学习笔记丨Flask操作数据库-对象与数据模型
本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23440 对象与数据模型 数据模型：是数据特征的抽象，抽象层次上描述了系统的静态特征、动态行为和约束条件，为数据库系统的信息表示与操作提供一个抽象的框架…...
IntelliJ IDEA使用 MybatisX-Generator 插件 自动生成Entity+Mapper+Mapper.xml等代码
一、Intellij安装MybatisX插件： 首先点击 Intellij->Preference->Plugins，然后搜索MybatisX，点击安装： 2 打开数据库 在IntelliJ IDEA 连接Mysql数据库，选择表，点击右键，选择 Mybatis…...
vue中如何为不同功能设置不同的默认打印设置（设置不同的打印机）
浏览器自带的window.print 功能较简单，这里使用LODOP露肚皮打印 以下是vue2示例： 从官网中下载Lodop和C-Lodop官网主站安装包并安装到本地电脑可以全局搜索电脑找到安装文件LodopFuncs.js，也可以直接复制我贴出来的文件 //用双端口加载主JS…...
经纬恒润INTEWORK-VBA新版本正式发布
在汽车电子研发领域，随着开发测试的深入，工程师们常常面临着一个共同的问题：如何高效地在多样化的开发测试场景中切换，并确保不同工具间的紧密协作。不同场景、不同工具的切换与使用给工程师带来高昂的学习成本和前后端信息传递的…...
金蝶云数据集成至MySQL的高效解决方案
金蝶云数据集成至MySQL的高效解决方案 金蝶云星空数据集成到MySQL的技术案例分享 在企业信息化过程中，数据的高效集成和管理是关键环节。本文将聚焦于一个具体的系统对接集成案例：金蝶云星空的数据如何通过轻易云数据集成平台无缝对接到MySQL数据库。本…...
Day02 C++ 环境设置
2024.11.1 C 环境设置 如果您想要设置 C 语言环境，需要确保电脑上有以下两款可用的软件，文本编辑器和 C 编译器。 一、文本编辑器 通过编辑器创建的文件通常称为源文件，源文件包含程序源代码。 C 程序的源文件通常使用扩展名 .cpp、.cp 或…...
AQS是什么
AQS：AbstructQueuedSynchronizer是java.util.concurrent.locks包中的一个类，是多线程同步器，J.U.C包中的多个组件的底层实现都使用到了它。如：Lock、CountDownLatch、Semaphore. 从本质上来说AQS实现了两种机制的锁，排…...
Spring IOC容器简介
Spring IoC（Inversion of Control，控制反转）容器是Spring框架的核心组件之一，负责管理应用程序中的对象及其依赖关系。IoC容器通过依赖注入（Dependency Injection，DI）实现对象的创建、配置和管理…...
【backstopjs】入门安装环境
1.首先全局安装BackstopJS npm install -g backstopjs 安装失败,常见报错&解决办法： 报错： (venv) D:\workspace\Otaku\backstop>npm install -g backstopjs npm warn deprecated inflight1.0.6: This module is not supported, and leaks mem…...
)
LocalDate 类常用方法详解(日期时间类)
LocalDate 类常用方法详解 LocalDate 是 Java 8 引入的日期时间API中的一个类，用于表示不含时间和时区的日期（年、月、日）。以下是一些常用的 LocalDate 方法： 创建 LocalDate 实例 now()：获取当前日期 LocalDate t…...
kmp desktop实现excel预览
先将excel转paf https://blog.csdn.net/qq_42761569/article/details/121699594 package utilimport com.aspose.cells.License import com.aspose.cells.PdfSaveOptions import com.aspose.cells.Workbook import com.geolo.desktop.common.utils.LogUtils import java.io.Fi…...
OB_GINS_day3
这里写目录标题 实现当前状态初始化实现预积分的初始化由于此时preintegration_options 是3（也就是考虑odo以及earth rotation）为预积分的容器添加需要积分的IMU积分因子接下来是添加新的IMU到preintegration中 实现当前状态初始化 这个state_curr的主要…...
【Python3】【力扣题】405. 数字转换为十六进制数
【力扣题】题目描述： 题意理解：（不允许使用库函数） 数字等于0，则结果为0， 数字小于0，则补码运算，即最高位（32位）为1，其余全部取反，再加…...
记录一次企业外部通过ssh 连接数据库的事DBeaver
情况大概是这样，公司算法供应商开通了连接某个服务器A的权限，但是数据库x是在另一台服务器B上。 直接通过外部连接数据库是不行的，需要借用服务器A来进行访问x 使用软件：DBeaver, 数据库x类型：oracle 需要的信息&am…...
中聚企服：中聚AI女娲大模型，企业难题迎刃而解！
在这个瞬息万变的商业世界里，企业面临的挑战愈发复杂多样。小到日常文书和规章制度，大到工商财税和知识产权保护，每一个环节都至关重要。为了帮助中小企业在激烈的市场竞争中脱颖而出，中聚企服在官方小程序重磅上线了一款革命性产…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
ffmpeg（四）：滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...