使用web.dev提供的工具实现浏览器消息推送服务

news2024/11/5 1:59:54

文章目录

    • 前言
    • 实现工具和效果
    • 实现原理
    • 实现过程
      • 前端接收用户订阅请求将用户订阅信息更新到后端
      • 后端实现接收并保存订阅信息的接口
      • 后端实现消息推送的逻辑

前言

  对于电商独立站来说,新品上架或者促销活动上线及时通知到用户是很重要的,通知的渠道有很多,其中就包括浏览器消息推送。浏览器消息推送可以实现将自定义的浏览器通知消息(可含文字、图片、链接)推送给订阅了你网站浏览器消息的用户,这样用户打开电脑看到系统弹出的浏览器通知消息就可以点击跳转到你的活动介绍页,从而带来订单转化。

实现工具和效果

  这次我们使用的浏览器消息推送工具是web.dev网站的Push notifications,网站链接:官网文档(google服务需合理上网)。消息通知在PC端和手机端的效果如下图所示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229419.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在Bash脚本中 set -e 是什么意思

问题 我正在研究这个预安装(preinst)脚本的内容,该脚本会在从 Debian 软件包(.deb)文件解压该包之前执行。 脚本包含以下代码: #!/bin/bash set -e # Automatically added by dh_installinit if [ "$1" install ]; thenif [ -d /usr/share…

服务器宝塔安装哪吒监控

哪吒文档地址:https://nezha.wiki/guide/dashboard.html 一、准备工作 OAuth : 我使用的gitee,github偶尔无法访问,不是很方便。第一次用了极狐GitLab,没注意,结果是使用90天,90天后gg了,无法登…

JavaEE初阶---网络原理(四)--IP协议/DNS协议

文章目录 1.初识网络层(了解即可)2.地址管理2.1动态分配2.2网络地址转换2.3IP-v6最终解 3.网段划分4.以太网协议--数据链路层5.DNS应用层协议 1.初识网络层(了解即可) 网络层做的事情就是下面的两个: 1)地…

邮件发送excel带预览excel功能

excel 打开后的内容: 思路: 1、邮件发送excel 是作为附件发送出去的; 2、excel 预览是,必须另外点击预览按钮,并不能直接预览邮件内容然后在邮件主体内容展示出来 根据以上两点基本没法实现 邮件发送后邮件自带 预览功能。 伪方法…

Spring Boot 3 + Spring Security + Knife4j 无法访问 Swagger 文档的问题及解决方案

背景介绍 在使用Spring Boot 3框架结合Spring Security进行项目开发时,我们可能会遇到集成Knife4j后Swagger文档无法正常访问的情况。本文将探讨可能的原因以及相应的解决办法。 常见问题 问题描述 当配置好Spring Security后尝试通过Knife4j访问API文档页面时&…

构建校园社团信息管理平台:Spring Boot技术的核心要点

6系统测试 6.1概念和意义 测试的定义:程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为: 目的:发现程序的错误; 任务:通过在计算机上执行程序,暴露程序中潜在的错误。 另一个…

Spring 框架中常见的注解(Spring、SpringMVC、SpringBoot)

1. Spring 中常见注解 还有Recourse:相当于AutowiredQualifier Value : 用于将配置文件中的值注入到Bean的字段中。 Bean : 用于在配置类中声明一个Bean。 Lazy : 用于延迟加载Bean。 2. SpringMVC 中常见注解 还有GetMapping PostMapping PutMapping DeleteMapp…

深度学习笔记之BERT(一)BERT的基本认识

深度学习笔记之BERT——BERT的基本认识 引言回顾:Transformer的策略回顾:Word2vec的策略和局限性 BERT \text{BERT} BERT的基本理念抽象的双向BERT的预训练策略 预训练与微调 引言 从本节开始,将介绍 BERT \text{BERT} BERT系列模型以及其常…

【华为HCIP实战课程二十八】中间到中间系统协议IS-IS邻居关系排错,网络工程师

一、ISIS邻居关系条件 1、同一层次(比如Level-2路由器不能和Level-1路由器形成邻居关系) 2、同一区域(L1必须同一区域) 3、同一网段 R1和R2之间分别配置如下IP地址和掩码: R1 的接口S1/0/0掩码为/24 R2的接口S1/0/0配置成掩码/28: 此时R1和R2依然可以建立ISIS邻居关系…

微信小程序,打开新的项目,调试遇见[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json

1,首先,在开发工具右上角,打开详情;设置基础库;3.6.3 2,第二步,在项目目录下,找到app.json文件存在 3,第三步,修改项目根目录下,project.config.j…

使用RabbitMQ实现微服务间的异步消息传递

使用RabbitMQ实现微服务间的异步消息传递 RabbitMQ简介 安装RabbitMQ 在Ubuntu上安装RabbitMQ 在CentOS上安装RabbitMQ 配置RabbitMQ 创建微服务 生产者服务 安装依赖 生产者代码 消费者服务 消费者代码 运行微服务 消息模式 直接模式 生产者代码 消费者代码 扇出模式 生产…

数字教学的创新引擎:构建数字教学知识库

在教育行业,数字化转型正成为推动教育现代化的重要力量。数字教学知识库作为这一转型的核心组成部分,对于整合教育资源、提升教学质量、促进教育公平具有重要意义。本文将探讨数字教学知识库的构建策略、应用价值,并分析其在教育行业的深远影…

【ArcGISPro】制作简单的ArcGISPro-AI助手

【python】AI Navigator的使用及搭建本机大模型_anaconda ai navigator-CSDN博客 【Python】AI Navigator对话流式输出_ai大模型流式输出效果(打字效果) python-CSDN博客 【C#】调用本机AI大模型流式返回_怎么实现调用本地大模型时实现流式输出-CSDN博客 【ArcGISPro】宣布推…

web文件包含include

php伪协议 在 PHP 中,伪协议(Pseudo Protocols) 也被称为 流包装器,这些伪协议以 php:// 开头,后面跟着一些参数,用于指定 要执行的操作 或 需要访问的资源。 伪协议表明这些协议并不是一个 真实的外部协议…

【力扣打卡系列】验证二叉搜索树

坚持按题型打卡&刷&梳理力扣算法题系列,语言为go,Day17 验证二叉搜索树 题目描述 解题思路 前序遍历:先访问节点值,再访问左右子树有效二叉搜索树的定义 节点的左子树只包含小于当前节点的数节点的右子树只包含大于当前节…

【天线&空中农业】蜜蜂检测系统源码&数据集全套:改进yolo11-ASF

改进yolo11-dysample等200全套创新点大全:蜜蜂检测系统源码&数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.30 注意:由于项目一直在更新迭代,上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者视频可…

hive将包含逗号的字段拆分为多列

目录 一、概述 二、行动 1.准备数据 2.数据清洗 3.substring_index函数 4.split函数实现 一、概述 想将hive表中包含逗号的字段按逗号做分隔符进行分列操作 二、行动 1.准备数据 --1 select {1,2,3,4,5,6,7,8} as num_str --使用的数据2.数据清洗 --2 select num_s…

基于MPC控制器的混合动力EMS能量管理系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 MPC 控制器原理 4.2 能量管理模块 4.3 动力模型 5.完整工程文件 1.课题概述 整个系统可以划分为如下几个模块。 其中,能量管理模块其包括:MPC控制器模块,驱动扭…

11-Python基础编程之错误和异常

Python基础编程之错误和异常 概念错误异常 常见的系统异常异常的解决预防捕捉处理异常with语句 手动抛出异常自定义异常 概念 错误 可以通过代码进行修复; 异常 需要提前考虑,设定限制条件;不能通过代码进行修复; 常见的系…

使用 Elastic、OpenLLMetry 和 OpenTelemetry 跟踪 LangChain 应用程序

作者:来自 Elastic Bahubali Shetti Langchain 应用程序的使用正在增长。构建基于 RAG 的应用程序、简单的 AI 助手等的能力正在成为常态。观察这些应用程序更加困难。考虑到现有的各种选项,本博客展示了如何将 OpenTelemetry 检测与 OpenLLMetry 结合使…