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

ops/2024/11/1 11:34:24/

文章目录

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

前言

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

实现工具和效果

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


http://www.ppmy.cn/ops/130121.html

相关文章

吉林大学2023级数据结构上机实验第(1~2周)参考答案(关注我,在系统关闭后持续更新)

A 括号匹配&#xff08;进阶版&#xff09; 分数 10 编写程序检查给定字符串中包含的括号是否正确匹配&#xff0c;本题中的括号有{ }、[ ]、( )、< >四种。另外再加上一个新的约束条件&#xff1a;当有多种括号嵌套时&#xff0c;嵌套的顺序应为{ → [ → ( → <&…

pytest高版本兼容test_data[“log“] = _handle_ansi(“\n“.join(logs))错误

一、问题现象&#xff1a; 执行seleniumpytest结束时报: INTERNALERROR> File "D:\workspace\pytestframe\.venv\Lib\site-packages\pytest_html\report_data.py", line 141, in add_test INTERNALERROR> test_data["log"] _handle_ansi(&q…

Webserver(2.6)有名管道

目录 有名管道有名管道使用有名管道的注意事项读写特性有名管道实现简单版聊天功能拓展&#xff1a;如何解决聊天过程的阻塞 有名管道 可以用在没有关系的进程之间&#xff0c;进行通信 有名管道使用 通过命令创建有名管道 mkfifo 名字 通过函数创建有名管道 int mkfifo …

超子物联网HAL库笔记:准备篇

超子物联网 HAL库学习 汇总入口&#xff1a; 超子物联网HAL库笔记&#xff1a;[汇总] 写作不易&#xff0c;如果您觉得写的不错&#xff0c;欢迎给博主来一波点赞、收藏~让博主更有动力吧&#xff01; 1. HAL库简介 HAL库 HAL库&#xff08;Hardware Abstraction Layer&#…

采用STM32CubeMX和HAL库的模数转换器应用实例

目录 STM32的ADC配置流程 模/数&#xff08;A/D&#xff09;转换器应用的硬件设计 模/数&#xff08;A/D&#xff09;转换器应用的软件设计 1. 通过STM32CubeMX新建工程 2. 通过Keil MDK实现工程 STM32的ADC功能繁多&#xff0c;比较基础实用的是单通道采集&#xff0c;实…

统信UOS适配C#

通过Mono或.NET Core等运行时,在UOS上进行C#应用开发、编译、调试及部署变得便捷。 文章目录 一、环境部署1. C#开发环境安装2. C#开发环境配置二、 C#开发案例三、常见问题1. 图形界面支持2. 调试工具一、环境部署 1. C#开发环境安装 统信UOS V20使用dotnet 7.0 amd64版本,…

springboot框架使用RabbitMQ举例代码

以前分享过一个理论有兴趣的小伙伴可以看下 https://blog.csdn.net/Drug_/article/details/138164180 不多说 还是直接上代码 第一步&#xff1a;引入依赖 可以不指定版本 <!-- amqp --><dependency><groupId>org.springframework.boot</groupId…

Python 工具库每日推荐【Pillow】

文章目录 引言Python图像处理库的重要性今日推荐:Pillow工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:创建图像拼贴案例分析高级特性图像增强图像水印扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScript 设计模式 专栏,感兴…