blocks|key|1515489|text|我发现这个https://developers.google.com/web/updates/2019/06/pwa-install-addressbar对Chrome很有帮助。似乎你需要遵循这些标准https://web.dev/customize-install/#criteria来推广你的web应用程序。据我所知，在这些情况下，Chrome会在你的地址栏中自动显示一个安装按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1515490|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/updates/2019/06/pwa-install-addressbar|1|https://web.dev/customize-install/#criteria^0|5|20|0|2S|17|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

I found this <a href="https://developers.google.com/web/updates/2019/06/pwa-install-addressbar" rel="nofollow noreferrer">https://developers.google.com/web/updates/2019/06/pwa-install-addressbar</a> that can be helpful for Chrome. It seems that you need to follow these criteria <a href="https://web.dev/customize-install/#criteria" rel="nofollow noreferrer">https://web.dev/customize-install/#criteria</a> to promote your web app. I understood that Chrome shows an install button in your address bar automatically in these conditions.

blocks|key|1827413|text|你需要的是一个所谓的"Progressive+web+application“(PWA)。要让这个图标出现，你必须遇到一些criteria。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1827414|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Progressive_web_application|1|https://web.dev/install-criteria/^0|B|R|0|1P|8|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

What you want is a so called &quot;<a href="https://en.wikipedia.org/wiki/Progressive_web_application" rel="nofollow noreferrer">Progressive web application</a>&quot; (PWA). To make this icon appear, you have to meet some <a href="https://web.dev/install-criteria/" rel="nofollow noreferrer">criteria</a>.

blocks|key|4143929|text|根据developer.mozilla的说法，这被称为PWA。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4143930|4143931|为了将网络应用程序称为PWA，从技术上讲，它应该具有以下功能:安全上下文(HTTPS)、一个或多个服务工作者和一个清单文件。|blockquote|4143932|4143933|4143934|Here+you+can+see+the+full+details。|4143935|你所需要做的就是完成这3件事，浏览器会自动显示这个提示。|4143936|Here是另一个描述性详细信息，说明为了实现此安装效果需要做些什么。|4143937|注意，不同的浏览器对此有不同的要求。|4143938|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps|1|2|https://web.dev/install-criteria/^0|2|H|0|0|0|0|0|0|0|X|1|0|0|0|4|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|17|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|P|3|Q|5|6|7|1J|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|Y]]|10|$5|U|V|W|C|$X|11]]]]

According to <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps" rel="nofollow noreferrer">developer.mozilla</a>, this is called PWA.
<blockquote>
In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts (HTTPS), one or more Service Workers, and a manifest file.
</blockquote>
<a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps" rel="nofollow noreferrer">Here you can see the full details</a>.
All you need is to have those 3 things done and the browser will show this prompt automatically.
<a href="https://web.dev/install-criteria/" rel="nofollow noreferrer">Here</a> is another descriptive details about what needs to be done in order to achieve this install effect.
Pay attention that different browsers have different requirements for doing it.

blocks|key|1827490|text|您试图在问题中提到的内容称为渐进式Web应用程序(PWA)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1827491|以下是web.dev所说的|1827492|1827493|渐进式网络应用程序(PWA)是使用现代API构建和增强的，以提供增强的功能、可靠性和可安装性，同时使用单个代码库访问任何人、任何地点、任何设备。|blockquote|1827494|1827495|1827496|用外行的话说，PWA只是一个由你的网站代码库制作的应用程序，给你的感觉就像你正在使用从play商店或应用程序商店下载的应用程序。|1827497|关于如何让你的网站支持PWA：|1827498|基本上，将你的web应用程序转换成PWA需要3件事，它们是|1827499|应通过HTTPS|1827500|Manifest.json+file|unordered-list-item|1827501|
|1827502|1827503|1827504|+Worker|1827505|
提供|1827506|服务应用程序|1827507|1827508|MDN+Web+Docs对此有一个很好的介绍。我在这里引用了那里的几件事。|1827509|安全上下文(HTTPS)|1827510|1827511|+web应用程序必须通过安全的网络提供服务。成为一个安全的站点不仅是一种最佳实践，而且它还可以将您的web应用程序建立为一个受信任的站点，特别是当用户需要进行安全交易时。与PWA相关的大多数功能，如地理位置，甚至服务人员，只有在使用HTTPS加载应用程序后才可用。|1827512|1827513|1827514|清单文件|1827515|JSON文件，它控制应用程序向用户显示的方式，并确保渐进式web应用程序是可发现的。它描述了应用程序的名称、启动URL、图标以及将网站转换为类似应用程序的格式所需的所有其他细节。|1827516|1827517|服务人员|1827518|1827519|服务工作者是一个脚本，它允许拦截和控制web浏览器如何处理其网络请求和资产缓存。有了服务工作者，web开发人员可以创建可靠的快速网页和离线体验。|1827520|1827521|1827522|为了帮助你逐步创建PWA，我在下面添加了一个非常好的教程的参考，你可以读出它。|1827523|How+to+build+a+PWA+from+scratch+with+HTML,+CSS,+and+JavaScript|1827524|PS:您也可以探索web.dev以获得彻底的理解。|1827525|entityMap|0|LINK|mutability|MUTABLE|url|https://web.dev/|1|https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps|2|https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/|3|https://web.dev/progressive-web-apps/^0|E|F|0|3|7|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|C|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1Q|2|0|9|7|3|0^^$0|@$1|2|3|4|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2H|8|@]|D|@$9|2I|A|2J|1|2K]]|E|$]]|$1|H|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|2M|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|2N|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|2O|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|2P|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|2R|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|2S|8|@]|D|@]|E|$]]|$1|V|3|W|5|X|7|2T|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2U|8|@]|D|@]|E|$]]|$1|10|3|-4|5|X|7|2V|8|@]|D|@]|E|$]]|$1|11|3|Z|5|6|7|2W|8|@]|D|@]|E|$]]|$1|12|3|13|5|X|7|2X|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|16|3|17|5|X|7|2Z|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|30|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|31|8|@]|D|@$9|32|A|33|1|34]]|E|$]]|$1|1B|3|1C|5|6|7|35|8|@]|D|@]|E|$]]|$1|1D|3|-4|5|6|7|36|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|K|7|37|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|38|8|@]|D|@]|E|$]]|$1|1H|3|-4|5|6|7|39|8|@]|D|@]|E|$]]|$1|1I|3|1J|5|6|7|3A|8|@]|D|@]|E|$]]|$1|1K|3|1L|5|6|7|3B|8|@]|D|@]|E|$]]|$1|1M|3|-4|5|6|7|3C|8|@]|D|@]|E|$]]|$1|1N|3|1O|5|6|7|3D|8|@]|D|@]|E|$]]|$1|1P|3|-4|5|6|7|3E|8|@]|D|@]|E|$]]|$1|1Q|3|1R|5|K|7|3F|8|@]|D|@]|E|$]]|$1|1S|3|-4|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1T|3|-4|5|6|7|3H|8|@]|D|@]|E|$]]|$1|1U|3|1V|5|6|7|3I|8|@]|D|@]|E|$]]|$1|1W|3|1X|5|6|7|3J|8|@]|D|@$9|3K|A|3L|1|3M]]|E|$]]|$1|1Y|3|1Z|5|6|7|3N|8|@]|D|@$9|3O|A|3P|1|3Q]]|E|$]]|$1|20|3|-4|5|6|7|3R|8|@]|D|@]|E|$]]]|21|$22|$5|23|24|25|E|$26|27]]|28|$5|23|24|25|E|$26|29]]|2A|$5|23|24|25|E|$26|2B]]|2C|$5|23|24|25|E|$26|2D]]]]

The thing you are trying to mention in your question is called as Progressive Web App (PWA)
Here's what <a href="https://web.dev" rel="nofollow noreferrer">web.dev</a> says
<blockquote>
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
</blockquote>
In layman terms, PWA is just an app which is made from your website's codebase &amp; provides you the same feel as if you are using an application downloaded from play store or app store.
Coming to how you can make your website to support PWA:
Basically 3 things are needed to convert your web app into a PWA, these are
<ul>
<li>App should be served over HTTPS</li>
<li>Manifest.json file</li>
<li>Service Worker</li>
</ul>
<a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps" rel="nofollow noreferrer">MDN Web Docs</a> have a nice introduction on this. I am quoting here few things from there.
Secure contexts (HTTPS)
<blockquote>
The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.
</blockquote>
Manifest file
<blockquote>
A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.
</blockquote>
Service workers
<blockquote>
A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
</blockquote>
To help you out with step wise process of creating a PWA, I am adding a reference to a very good tutorial below, you can read it out.
<a href="https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/" rel="nofollow noreferrer">How to build a PWA from scratch with HTML, CSS, and JavaScript</a>
PS: You can also explore <a href="https://web.dev/progressive-web-apps/" rel="nofollow noreferrer">web.dev</a> to get a thorough understanding.

Recently while visiting some websites I saw this pop up in the search bar
<a href="https://i.stack.imgur.com/pJv52.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pJv52.jpg" alt="enter image description here" /></a>
Upon clicking this an <code>.exe</code> file was downloaded. An example website of this is <a href="https://www.redbull.com/int-en/redbullracing" rel="nofollow noreferrer">one</a>. A similar thing could be seen in Chrome and Edge although Firefox didn't show this.
How can I do the same with my website as well?

Adding 'App Available' functionality to websites

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

最近，当我访问一些网站时，我在搜索栏中看到了这个​​单击此按钮后，将下载一个.exe文件。这方面的一个示例网站是。类似的事情可以在Chrome和Edge中看到，尽管Firefox没有显示这一点。我怎样才能对我的网站做同样的事情呢？

问向网站添加“App Available”功能
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向网站添加“App Available”功能EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向网站添加“App Available”功能
EN