react实现把pc网站快捷添加到桌面快捷方式

文章目录

  • 1. 需求
  • 2. 实现效果
  • 3. 核心逻辑
  • 4. 完整react代码

1. 需求

这种需求其实在国外一些游戏网站和推广网站中经常会用到,目的是为了让客户 快捷方便的保存网站到桌面 ,网站主动尽量避免下次找不到网站地址了,当然精确的客户自己也可以使用浏览器的收藏功能去收藏

2. 实现效果

  1. 下面 gif 效果我们可以看到默认进去会弹窗一个提示,提示用户进行网站安装到桌面的提示效果
    请添加图片描述

  2. 当我们点击 安装 后,会马上单独开一个窗口(这个窗口和普通的浏览器弹窗有点不一样,类似于一个Electron),并且会保存到桌面,展示快捷方式
    在这里插入图片描述

  3. 测试:打开电脑 应用 -> 安装的应用,也可以看到,这个网站地址也被安装到应用上了
    在这里插入图片描述

3. 核心逻辑

window.deferredPrompt?.prompt

const installApp = () => {clearTimeout(timeOut);window.deferredPrompt?.prompt().then(() => {showInstallSet(false);});showInstallSet(false);
};

4. 完整react代码

  1. 新建一个 GuideDown 组件,实现代码如下,代码内容其实很简单,这边不做过多详解
import React, {useEffect, useState} from 'react';
import {observer} from 'mobx-react-lite';
import {CloseOutline} from 'antd-mobile-icons';
import {Divider} from 'antd';
import {Button} from 'antd-mobile';
import {useTranslation} from 'react-i18next';let timeOut = null;
const GuideDown = () => {const {t} = useTranslation();const [showInstall, showInstallSet] = useState(false); // 弹窗展示const [linkTime, lineTimeSet] = useState(5); // 倒计时获取能否安装状态,如果这个时间内一直没有,就不弹出useEffect(() => {try {if (window?.deferredPrompt) {if (sessionStorage.getItem('closeAppInstall') !== '1') showInstallSet(true);}} catch (error) {}timeOut = setTimeout(() => {lineTimeSet((e) => e - 1);clearTimeout(timeOut);}, 3000);}, [linkTime]);const installApp = () => {clearTimeout(timeOut);window.deferredPrompt?.prompt().then(() => {showInstallSet(false);});showInstallSet(false);};return showInstall ? (<div className='fixed top-4 right-4 w-75 bg-b2 z-[200] rounded-lg shadow-lg'><div className='flex justify-between items-center p-3'><span className='text-[16px] theme'>如何快速访问网站</span>{' '}<CloseOutlineclassName='cursor-pointer'onClick={() => {showInstallSet(false);sessionStorage.setItem('closeAppInstall', '1');}}/></div><div className='pt-4 grid grid-cols-2 text-[12px]'><div className='px-3 flex flex-col justify-between relative after:content-[""] after:bg-white/5 after:w-[1px] after:h-20 after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2'><div className='leading-4'>1、在浏览器搜索栏点击该图标</div><div className='mt-2'><img src={require('@/branch/assets/images/download/guide1.png')} className='max-w-full' /></div></div><div className='px-3 flex flex-col justify-between'><div className='leading-4'>2、在弹出框内点击安装</div><div className='mt-2'><img src={require('@/branch/assets/images/download/guide2.png')} className='max-w-full' /></div></div></div><div className='px-3 text-[12px]'>在桌面找到快捷方式即可直接打开网站</div><Divider className='mt-2 mb-0 h-[1px bg-white/5' /><div className='flex justify-end items-center h-11'><ButtonclassName='bg-b1 text-w2 px-3 border-none rounded-full min-w-[70px] flex justify-center items-center !h-7 mr-3'onClick={() => installApp()}>{t('anzhuang')}</Button><ButtonclassName='border border-solid border-deep text-[#AFCAFA] px-3 rounded-full min-w-[70px] flex justify-center items-center !h-7 mr-3'onClick={() => {showInstallSet(false);sessionStorage.setItem('closeAppInstall', '1');}}>{t('btn_cancel')}</Button></div></div>) : (<></>);
};export default observer(GuideDown);

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打印安全:防止打印过程中的商业机密泄露

在数字化办公日益普及的今天&#xff0c;打印安全常常成为企业信息保护中被忽视的一环。商业机密在打印过程中泄露&#xff0c;可能会给企业带来巨大的损失。本文将探讨如何通过一系列措施&#xff0c;确保打印过程中的商业机密安全。 一、打印安全的重要性 打印设备作为企业中…

hbase版本从1.2升级到2.1 spark读取hive数据写入hbase 批量写入类不存在问题

在hbase1.2版本中&#xff0c;pom.xml中引入hbase-server1.2…0和hbase-client1.2.0就已经可以有如下图的类。但是在hbase2.1.0版本中增加这两个不行。hbase-server2.1.0中没有mapred包&#xff0c;同时mapreduce下就2个类。版本已经不支持。 <dependency><groupId>…

两步将 CentOS 6.0 原地升级并迁移至 RHEL 7.9

《OpenShift / RHEL / DevSecOps 汇总目录》 说明 本文介绍如何将一个 CentOS 6.0 的系统升级并转换迁移到 RHEL 7.9。 本文是《在离线环境中将 CentOS 7.X 原地升级并迁移至 RHEL 7.9》阶进篇。 所有被测软件的验证操作可参见上述前文中对应章节的说明。 准备 CentOS 6.…

数据量较小的表是否有必要添加索引问题分析

目录 前言一、分析前准备1.1、准备测试表和数据1.2、插入测试数据1.3、测试环境说明 二、具体业务分析2.1、单次查询耗时分析2.2、无索引并发查询服务器CPU占用率分析2.3、添加索引并发查询服务器CPU占用率分析 三、总结 前言 在一次节日活动我们系统访问量到达了平时的两倍&am…

SAP PRD覆盖QAS 替代方案构想

随着时间的推移&#xff0c;SAP PRD的数据跟QAS的差异会越来越大&#xff0c;一般是定期PRD覆盖QAS。但是在没有BASIS的情况下&#xff0c;没有这块经验的情况下&#xff0c;也没有外部支持的情况下&#xff0c;贸然做这个事情也是有风险的&#xff0c;有没有替代方案&#xff…

算法2:滑动窗口(上)

文章目录 长度最小子数组无重复字符的最长子串[最大连续 1 的个数III](https://leetcode.cn/problems/max-consecutive-ones-iii/description/)将x减到0的最小操作数 长度最小子数组 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {in…

vue3中基于element-plus封装一个表格弹框组件,要求可以单选和多选table数据

单选&#xff1a; <template><SelectMaterialref"selectMaterialRef"check"checkbox"select"selectMaterial"></SelectMaterial><el-button type"primary" size"small" icon"el-icon-plus"…

Web API——获取DOM元素

目录 1、根据选择器来获取DOM元素 2.、根据选择器来获取DOM元素伪数组 3、根据id获取一个元素 4、通过标签类型名获取所有该标签的元素 5、通过类名获取元素 目标&#xff1a;能查找/获取DOM对象 1、根据选择器来获取DOM元素 语法&#xff1a; document.querySelector(css选择…

RedisTemplate操作Redis, 看这一篇文章就够了

文章目录 1. String 命令1.1 添加缓存1.2 设置过期时间(单独设置)1.3 获取缓存值1.4 删除key1.5 顺序递增1.6 顺序递减1.7 常用的 2. Hash命令2.1 添加缓存2.2 设置过期时间(单独设置)2.3 添加一个Map集合2.4 提取所有的小key2.5 提取所有的value值2.6 根据key提取value值2.7 获…

C语言-牛客-实现四舍五入

欢迎来到Harper.Lee的学习小世界&#xff01; 博主主页传送门&#xff1a;Harper.Lee的博客主页 想要一起进步的uu欢迎来后台找我哦&#xff01; 本篇博客总结C语言刷题的相关笔记~~~~ #牛客–实现四舍五入 题目描述&#xff1a;随机输入浮点数&#xff0c;输出四舍五入后的整数…

vue中数据已经改变了,但是table里面内容没更新渲染!

解决方案&#xff1a; 给table或者el-table标签上添加一个动态key值&#xff0c;只要数据发生改变&#xff0c;key值变动一下即可 标签上&#xff1a; :key“timeStamp” 初始data&#xff1a;timeStamp:0, 更新数据&#xff1a;this.timeStamp 这样每次更新数据&#xff…

【B站 heima】小兔鲜Vue3 项目学习笔记Day03

文章目录 Home1.Home整体结构搭建和分类实现2. banner轮播图功能3. Home 面板组件封装4.新鲜好物和人气推荐实现5. 图片懒加载指令实现6. Home- product产品列表实现7. Home-GoodsItem 组件封装 一级路由1. 整体认识和路由配置2. 面包屑导航3. 一级分类 - 轮播图的实现4. 激活状…

2024年5月天润融通JAVA二面15-20K

二面 1、聊项目 2、举例说明你在上家公司职级晋升的原因 3、开发者和管理者的区别&#xff0c;你怎么做管理者 4、对sass的理解&#xff0c;包括流程&#xff0c;技术选型 5、springboot如何把bean加载到ioc容器中&#xff0c;ioc容器的理解 6、一万个任务同时执行&#…

内网安全之搭建ADCS证书服务

在域控上安装ADCS服务时&#xff0c;默认会自动配置完LDAPS&#xff0c;如果不是在域控上安装ADCS服务&#xff0c;需要手动配置LDAPS 安装证书服务ADCS 打开服务器管理器——>添加角色和功能 选择“基于角色或基于功能的安装”选项&#xff0c;然后点击下一步 选择“从…

网络协议——Modbus-RTU

目录 1、简介 2、消息格式 3、Modbus寄存器种类说明 4、功能码01H 5、功能码02H 6、功能码03H 7、功能码04H 8、功能码05H 9、功能码06H 10、功能码0FH 11、功能码10H 1、简介 Modbus-RTU&#xff08;Remote Terminal Unit&#xff09;是一种串行通信协议&#xff0…

云和恩墨海外首秀在吉隆坡召开的2024中国智能科技与文化展览会

作为中马建交50周年官方重点推荐的活动之一&#xff0c;2024中国智能科技与文化展览会&#xff08;第四届&#xff09;于5月20至21日在毗邻吉隆坡双子塔的吉隆坡国际会展中心举办。本次展览会获得马来西亚科学技术创新部、马来西亚通讯部、中国驻马来西亚大使馆和马来西亚中华总…

使用Unsloth微调Llama3-Chinese-8B-Instruct中文开源大模型

使用Unsloth微调Llama3-Chinese-8B-Instruct中文开源大模型 微调Llama3-Chinese-8B-InstructLlama-3-Chinese-8B-InstructUnsloth环境设置下载预训练模型加载model、tokenizer设置LoRA训练参数准备数据集数据处理训练超参数配置开始训练模型推理保存LoRA模型加载模型保存完整模…

OpsManage基于docker的部署与使用

前言 自动化运维管理工具OpsManagerhttp://mp.weixin.qq.com/s?__bizMzk0NTQ3OTk3MQ&mid2247487736&idx1&snefef3a930b88649033f61942a77f42d2&chksmc31598b4f46211a240ffc5360ae238b27d0f495fcbe8dc18abdbd79bc25c00726f74a7312dd0&scene21#wechat_redi…

[IMX6ULL驱动开发]-Linux对中断的处理(一)

目录 中断概念的引入 ARM架构中断的流程 异常向量表 Linux系统对中断的处理 ARM对程序和中断的处理 Linux进程中断处理 中断概念的引入 如何理解中断&#xff0c;我们可以进行如下抽象。把CPU看做一个母亲&#xff0c;当它正在执行任务的时候&#xff0c;可以看为是一个母…

【css】引入背景图时候,路径写入@会报错

看报错信息 我的写法 解决办法 在前面加个~