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.mzph.cn/web/14676.shtml

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

相关文章

Python 字符串中运算符号可运行

使用eval() re {\n "path": "/sms/sendMsg",\n "data": {\n "mobile": "12345678901",\n "signCode": "短信签名",\n "templateCode": "SMS_yyyy…

Oracle递归查询笔记

目录 一、创建表结构和插入数据 二、查询所有子节点 三、查询所有父节点 四、查询指定节点的根节点 五、查询指定节点的递归路径 六、递归子类 七、递归父类 一、创建表结构和插入数据 CREATE TABLE "REGION" ( "ID" VARCHAR2(36) DEFAULT SYS_GUI…

解析Oracle文件头内容

保存在Oracle数据文件头中的信息很丰富&#xff0c;通常只要查询DATAFILE_HEADER视图就可以获得数据文件头中的信息。但其在数据文件头中的具体位置&#xff0c;Oracle一直未公开过。所幸的是DBA们对数据文件头的研究孜孜不倦&#xff0c;其研究成果在网上也是随处可见。虽然这…

[前端|vue] 验证器validator使用笔记 (笔记)

文档 validator.js文档地址 规则编写示例 element-plus 使用示例 const captchaLoginRules {phoneNumber: [{ required: true, message: 手机号不能为空, trigger: blur },{validator: (_rule: any, value: string, _callback: any): boolean > {return isMobilePhone(…

vue-quill-editor 富文本编辑器使用出现的样式问题

使用富文本类型&#xff1a; vue-quill-editor 注意&#xff1a; 富文本导出 html 我们使用的时候&#xff0c; 样式凸显不出来 DOM 结构 <p><sub class"ql-size-large">测试内容</sub><sup class"ql-size-large">222222</su…

6步:用NGINX部署ASP.NET Core,轻松上云

1. 准备工作在开始部署之前&#xff0c;确保你已经完成了以下准备工作&#xff1a;- 安装.NET Core&#xff1a;确保你的Linux系统上安装了.NET Core运行时。你可以从.NET官网下载。- 安装NGINX&#xff1a;通过你的Linux发行版的包管理器安装NGINX。例如&#xff0c;在Ubuntu上…

GPT提示词技巧,使用教程,国内版官网直达,非套壳

GPT提示词技巧&#xff0c;使用教程&#xff0c;国内版官网直达&#xff0c;非套壳 主站点&#xff1a;https://chatgpt-plus.top&#xff08;江苏福建地区打不开&#xff0c;需要魔法&#xff09; 店铺地址&#xff1a;https://buy.chatgpt-plus.top/ 选择plus账号进入&…

鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

代码工程及构建介绍 背景 ArkUI作为OpenHarmony的默认开发框架&#xff0c;在本项目&#xff08;ArkUI-X&#xff09;中需要做到一套代码同时支持多平台构建&#xff0c;所以会采取共仓开发的方式&#xff0c;部分仓直接指向OpenHarmony相关开源仓。 代码结构及仓库结构 代…

多模态模型(MLLM)论文串烧

近期看了一些多模态方向的工作&#xff0c;包括图像、文本多模态&#xff0c;图像、视频、语音、文本多模态&#xff0c;做个总结。 Yi Qwen-VL LLaVA MobileVLM LanguageBind Video-LLaVA VAST

【机器学习300问】94、什么是多任务学习?

一、多任务学习的定义 多任务学习&#xff08;Multi-Task Learning, MTL&#xff09;是一种机器学习范式&#xff0c;它允许一个模型同时学习执行多个相关但不完全相同的任务。这种方法的核心是&#xff1a;通过共享表示或权重&#xff0c;不同的任务可以在学习过程中相互促进&…

浅谈微服务的自动化部署

一、常用部署工具 jenkins,docker生态是比较常用的工具&#xff0c;本文也主要是聊这几个。其他如Kubernetes (K8s)&#xff0c;Ansible&#xff0c;GitLab CI/CD等工具本文只是暂时提一下&#xff0c;不展开讨论。 二、比较jenkins和docker生态 1、jenkins 优点 jenkins功…

Rust使用rust_xlsxwriter库把Vec数据写入Excel

一、Rust使用rust_xlsxwriter库把一维Vec数据写入Excel 在Rust中&#xff0c;使用rust_xlsxwriter库将一维Vec数据写入Excel文件是一个相对简单的过程。首先&#xff0c;你需要确保你的Cargo.toml文件中已经添加了rust_xlsxwriter依赖。以下是如何添加依赖的示例&#xff1a; …

KMP题解代码(含讲解)

目录 注意: next数组的变化规律&#xff1a; 初始化&#xff1a; 求next数组部分&#xff1a; KMP部分&#xff1a; AC代码&#xff1a; 题目链接&#xff1a;【模板】KMP - 洛谷 注意: 1、next数组是针对子串的&#xff0c;并未涉及母串&#xff0c;因此求next数组时…

Python中文件操作和异常处理

文章目录 一、文件操作1.概念2.文件3.二进制 二、基本文件操作三、乱码产生四、with open() as f五、代码实现文件复制粘贴六、try ... except ...七、代码比较 一、文件操作 1.概念 帮助我们把爬虫抓下来的数据&#xff0c;进行保存。 2.文件 在计算机中&#xff0c;没有p…

Linux:linux基础

Linux 一套免费使用和自由传播的操作系统 linux特点 免费,开源,多用户(同时允许多用户操作同一个Linux系统),多任务(同时允许多个任务执行) linux版本 分为内核版和发行版 内核版 由linus torvalds及其团队进行开发和维护 免费,开源 负责控制硬件 发行版 基于linux内…

Luat学习

万物互联的兴起 人与人之间的连接已经变得越来越紧密&#xff0c;至少在中国这是一个不争的事实。 人们的忙碌程度也达到了前所未有的水平&#xff0c;这时候人的通讯能力反而成为了瓶颈&#xff0c;人与外界的信息交换方式无外乎是嘴说、耳朵听、眼睛看、手指敲、每秒的传输速…

根据配置的mode环境显示不同的index模板

引言&#xff1a;在项目开发中&#xff0c;遇到了开发环境和生产环境使用模板不同的情况&#xff0c;配置如下&#xff1a; 一、vue.config.js const path require(path) function resolve(dir){return path.join(__dirname,dir) } module.exports {chainWebpack: config &g…

力扣226. 翻转二叉树(DFS的两种思路)

Problem: 226. 翻转二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 涉及二叉树的递归解法时往往需要考虑两种思路&#xff1a; 1.在递归遍历时执行题目需要的具体要求&#xff1b; 2.将一个大问题分解为多个小子问题 具体到本体&#xff1a; 思路1&#xff1a;遍历 先…

【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页

展示效果 源码 html <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>404 页面未找到</title><meta http-equiv"refresh" content"2;url/"> <!-- 设置2秒后跳转到首…

机器学习云环境测试

等待创建完成后&#xff0c;点击 PyTorch 打开&#xff0c;创建一个全新的 notebook 在 Cell 中输入如下代码&#xff0c;并点击 Run 完成后点击 New Cell &#xff0c;在 New Cell 中输入如下代码 输入完成后点击 Run &#xff0c;运行 New Cell 。&#xff08;每个 Cell 代…