网页添加到桌面应用

最新推荐文章于 2025-04-16 09:32:39 发布
原创 最新推荐文章于 2025-04-16 09:32:39 发布 · 729 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #layui #前端框架

本文介绍了如何在网站中利用Service Worker实现 Progressive Web App (PWA)，并通过JavaScript动态添加桌面快捷方式，提升用户体验。

<!----------------------HTML开始------------------------>

<head>

<link rel="manifest" href="/static/admin/pwa/manifest.json">

</head>

<body>

    <a href="javascript:;" class="tk weChatCode add-desktop-button">

        <i class="icon-adv icon-desktop"></i>

        <p class="downa">桌面端</p>

        <div class="downbox click-desktop">

            <p class="ap">添加到桌面</p>

            <img src="/static/admin/pwa/desktop.png" style="width: 100px;height: auto" alt="" class="erwei">

        </div>

    </a>

</body>

<!----------------------HTML结束------------------------>

<!----------------------JS开始------------------------>

// 检测浏览器是否支持SW

    if(navigator.serviceWorker != null){

        navigator.serviceWorker.register('/admin.php/union/unionSys/sw')

            .then(res => {// console.log('注册成功') })

            .catch(error => { // console.log('注册失败') })

    }else{

        // console.log('不支持sw')

    }

    let deferredPrompt;

    const addBtn = document.querySelector('.add-desktop-button');

    addBtn.style.display = 'none';

    window.addEventListener('beforeinstallprompt', (e) => {

        // console.log('beforeinstallprompt')

        // Prevent Chrome 67 and earlier from automatically showing the prompt

        e.preventDefault();

        // Stash the event so it can be triggered later.

        deferredPrompt = e;

        // Update UI to notify the user they can add to home screen

        showInstallPromotion()

    });

    function showInstallPromotion(){

        addBtn.style.display = 'block';

        const clickBtn = document.querySelector('.click-desktop');

        clickBtn.addEventListener('click', (e) => {

            // hide our user interface that shows our A2HS button

            addBtn.style.display = 'none';

            // Show the prompt

            deferredPrompt.prompt();

            // Wait for the user to respond to the prompt

            deferredPrompt.userChoice.then((choiceResult) => {

                if (choiceResult.outcome === 'accepted') {

                    //安装成功

                    // console.log('User accepted the A2HS prompt');

                } else {

                    // console.log('User dismissed the A2HS prompt');

                }

                deferredPrompt = null;

            });

        });

    }

    function hideInstallPromotion(){

        layer.msg('安装成功')

    }

    window.addEventListener('appinstalled', () => {

        // Hide the app-provided install promotion

        hideInstallPromotion();

        // Clear the deferredPrompt so it can be garbage collected

        deferredPrompt = null;

        // Optionally, send analytics event to indicate successful install

        // console.log('PWA was installed');

    });

<!----------------------JS结束------------------------>

masterphp
关注
前端如何实现一个网站的桌面快捷方式
2201_75705263的博客
08-01 1111
IE支持ActiveObject控件，而chrome系列不支持。题记：我们工作中常常需要在我们的网站首页实现一个桌面快捷方式，那么我们怎么做呢？注释：使用ActivexObject 区分IE浏览器与非IE浏览器。备注：借助于createShortcut（）方法是一个关键。第二步：判断是否为IE浏览器；第一步：获取路径与标题名；
javascript - js 创建网页 url 桌面快捷方式(兼容chrome)-书签工具
alexwang的博客
12-03 1万+
网上搜索了一圈,都是用ActiveXObject("WScript.Shell"); 只能是IE使用, 老款的IE本能就可以右键创建桌面快捷方式,我要的是可以Chrome和其他浏览器能用. 之前做了个下载网页的js书签脚本改了一下. 代码如下,最好添加为书签工具使用 原理: url桌面快捷方式就是一个 .url 后缀的文件而已 [{000214A0-0000-0000-C000-0...
把网址添加到桌面代码
acb9900的博客
07-09 479
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><h...
javaScript将网页放到桌面，发送快捷方式到桌面
一只苟延残喘的卑微蝼蚁
05-03 1万+
不废话了，直接上代码，代码中有注释，有解释说明！说明下：ActiveXObject只支持IE浏览器，所以放到桌面这个功能只支持IE浏览器,不支持火狐浏览器、谷歌浏览器等！&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html ...
js添加到桌面快捷方式（实现功能）
热门推荐
草巾冒小子的博客
06-04 1万+
添加桌面快捷方式（实现功能），多方法实现 ，js添加网页快捷方式到桌面（含案例、代码、截图）
JS 添加网页桌面快捷方式的代码详细整理
10-27
文档还提供了两个具体的使用示例，展示了如何将这个函数应用到实际网页中。第一个示例通过一个链接（`<a>`标签）来触发创建快捷方式的过程，第二个示例则是通过按钮（`<input type="button">`）来触发。 在实际使用...
基于Chromium内核 的 DotNET 桌面应用，方便打包网页为桌面应用.zip
02-12
CEF是一个开源项目，它允许开发者将Chromium浏览器引擎集成到各种应用程序中，包括Windows、MacOS和Linux平台的桌面应用。Chromium是Google Chrome浏览器的基础，因此使用CEF意味着你可以利用Chrome的高速渲染能力和...
Edge浏览器高效技巧：将网页一键安装为桌面应用
mmoo_python的博客
04-16 1707
强制新窗口打开指定浏览器配置文件--app=直接指定应用URL将网页安装为桌面应用，不仅是简单的快捷方式创建，更是现代Web技术的深度应用。通过本文的详细解析，您应该已掌握从基础安装到进阶优化的完整技能体系。需要频繁访问的Web工具对启动速度有要求的在线服务希望减少浏览器标签页干扰的用户建议立即尝试将常用网站（如GitHub、Trello、Notion）安装为PWA，体验革命性的网页使用方式。如果您发现其他创新用法，欢迎在评论区分享您的PWA使用心得。
使用Electron框架将网页前端项目打包为Windows桌面应用_网页前端项目打包桌面应用跨平台开发_通过复制项目文件到指定目录并双击可执行文件即可运行网页应用为桌面程序_HTM.zip
最新发布
09-14
Electron不仅简化了网页应用到桌面应用的转换过程，而且还提供了丰富的文档和社区支持，使得整个开发和打包过程更为顺畅。 为了更深入地了解如何使用Electron框架将网页前端项目打包为Windows桌面应用，开发者可以...
「Linux」- 将网页应用变为桌面应用 @20210211
k4nz
02-11 845
问题描述 我们使用 Teambition 办公协作，但是这个软件没有桌面版，只有网页版。在日常使用中，我们经常会打开很多浏览器页面，当这些页面混合在一起，多个页面间切换时间很麻烦的事情。 虽然可以 Pin 标签，或者收藏，但是终究还是很麻烦，不够方便。所以我们希望能够解决这个问题。 解决方法 在 Ubuntu 中（旧版，具体版本已经忘记），我们见过桌面 Amazon 图标，用于打开 Amazon 网站。我们也在某些 Linux 发行版中见过 Gmail 桌面图标，双击将直接在浏览器中打开 Gmai.
将web网站安装为桌面应用
04-08
如同https://hoppscotch.io/一样
js-添加网页快捷方式
.
02-07 760
谷歌上包困难的情况, 只能通过投放落地页来缓解一下痛苦, web2app 那种形式有几个比较大的缺点就是需要通过 下载 apk 再安装 apk, 这里就会遭到浏览器的检测, 安装时又会找到系统的检测, 很容易被定义为 不安全因素, 这也是 apk 投放转化不是很好的原因。如果通过 h5 直接添加桌面快捷方式的话, 用户侧可以像正常 apk 一样, 在桌面找到入口, 又避免了 web2app 的缺点.js-pwa添加网页快捷方式。
网页直接生成添加到手机主屏幕的代码，方便 Web App开发
04-25 4477
用户在访问网页时，点击上述链接或按钮，即可触发添加到主屏幕的操作。这段代码包含了一个文本链接，用户点击该链接时会触发一个 JavaScript 函数，该函数会显示一个提示框，提示用户是否将网页添加到主屏幕。在网页中，添加一个文本链接或按钮，用于触发添加到主屏幕的操作。在网页的 head 标签中添加一个 link 标签，将 Web App Manifest 的 URL 指向您的网页。您也可以使用 Web App Manifest 来描述网页，并让用户在访问网页时进行添加。
Vue3引用PWA，vite-plugin-pwa的使用及注意要点
weixin_43968658的博客
08-10 5626
Vue3+vite引用Vite-plugin-pwa
浏览器下载快捷方式到桌面(PWA)
天才派大星 !的博客
07-30 1978
浏览器下载快捷方式，app，PWA
PWA集成和离线使用
farme_guan的博客
04-27 1769
本篇文章是关于集成项目到PWA的介绍，包括PWA离线使用，和引导用户安装应用。
vue 控制pwa内容显示隐藏
qq_40910337的博客
11-29 418
if (window.deferredPrompt) { window.deferredPrompt.prompt() window.deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('用户接受了安装') } else { console.log('用户拒绝了安装') } window.deferredPrompt = null })
关于 beforeinstallprompt 事件
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-17 1510
然后，我们添加了一个点击事件监听器到安装按钮。当用户点击安装按钮时，我们隐藏用户界面的安装按钮，并显示之前保存的安装提示。当用户使用应用内安装界面安装应用时，应用内安装界面会调用保留的BeforeInstallPromptEvent对象的prompt()方法来显示安装提示。此事件的典型用途是，当 Web 应用程序想要提供自己的应用程序内 UI 邀请用户安装该应用程序时，而不是浏览器提供的通用 UI 时。事件，开发人员可以阻止浏览器的默认安装提示，然后在更合适的时间（例如用户完成了某些交互后）再显示提示。
Promise和Deferred的使用
苏打的博客
01-30 490
这样就完成了等待异步的操作,但是我们发现 Promise 和定时器耦合在一起，也就是说定时器必须写在 Promise 里面，因为需要等待定时器完成修改 Promise 的状态。接下来解耦，我们希望外部能控制 Promise 的状态。我们输出第一个log之后,传入了3000ms打开了计时器,此时,代码会停在这里,直到计时器运行结束后调用resolve后设置promise完成,才会往下继续执行。你会发现,其实也就是将Promise简单封装起来了,这个时候就能在外部控制promise了,正常用法如下。
网页放到手机桌面上
06-26
将网页添加到手机桌面的方法因设备的操作系统不同而有所差异，以下是针对不同平台的实现方式： ### 1. Android 设备 在 Android 上，可以通过浏览器创建网页快捷方式到主屏幕： - 打开 **Chrome 浏览器** 或其他支持此功能的浏览器。 - 进入需要添加的网页。 - 点击右上角的 **三个点菜单**，选择 **“添加到主屏幕”**（Add to Home screen）选项。 - 系统会自动创建一个网页快捷方式图标在你的桌面上[^2]。 该方法生成的是一个离线友好的快捷方式，并非原生应用，但加载速度较快且界面友好。 ### 2. iOS 设备（iPhone 和 iPad） 在 iOS 中，操作步骤如下： - 使用 **Safari 浏览器** 打开目标网页。 - 点击底部中间的 **“分享”按钮**（一个方框向上箭头）。 - 在分享菜单中选择 **“添加到主屏幕”**。 - 可以修改网页显示的名称和图标，然后点击 **“添加”** 即可完成操作。 这样添加的网页会在主屏幕上显示为独立图标，类似于原生应用程序。 ### 3. 使用 PHP 创建 `.url` 文件（适用于 Web 提供下载链接） 如果希望用户通过网站一键下载并创建网页快捷方式，可以使用 PHP 动态生成 `.url` 文件。以下是一个示例代码： ```php <?php $Shortcut = "[InternetShortcut]\nURL=http://zsuisui.cn/\nIDList=\nIconFile=C:\\Windows\\system32\\SHELL32.dll\nIconIndex=160\n[{000214A0-0000-0000-C000-000000000046}]\nProp3=19,2"; header("Content-type: application/octet-stream"); header("Content-Disposition: attachment; filename=碎遇静安.url"); echo $Shortcut; ?> ``` 该代码生成了一个指向 `http://zsuisui.cn/` 的网页快捷方式文件，用户下载后可以直接双击安装，适用于桌面环境，不直接作用于移动端，但可用于特定需求场景下的网页推送功能设计[^3]。 ### 4. Progressive Web App (PWA) 方式（跨平台推荐） 现代网页可通过 PWA 技术让网页具备类原生应用的体验，并允许用户将其“安装”到桌面或移动设备上： - 网站需配置 `manifest.json` 文件。 - 支持 Service Worker 缓存资源，提升离线访问能力。 - 用户可在浏览器中选择 **“安装此网站”**，从而将其添加至桌面。 这种方法具有更高的交互性和功能性，适合长期运营的网站。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值