问题描述
最近在访问一些网站时,我在搜索栏中看到了这个弹出窗口
点击后,下载了一个 .exe
文件。这方面的示例网站是 one。 Chrome 和 Edge 也可以看到类似的东西,尽管 Firefox 没有显示。
我怎样才能对我的网站做同样的事情?
解决方法
我发现这个 https://developers.google.com/web/updates/2019/06/pwa-install-addressbar 对 Chrome 很有帮助。您似乎需要遵循这些标准 https://web.dev/customize-install/#criteria 来推广您的网络应用程序。我了解到,在这些情况下,Chrome 会自动在您的地址栏中显示一个安装按钮。
,您想要的是所谓的“Progressive web application”(PWA)。要显示此图标,您必须遇到一些criteria。
,根据developer.mozilla,这称为 PWA。
为了将 Web 应用称为 PWA,从技术上讲,它应该具有以下功能:安全上下文 (HTTPS)、一个或多个 Service Worker 以及一个清单文件。
Here you can see the full details。
您只需要完成这 3 件事,浏览器就会自动显示此提示。
Here 是另一个描述性细节,说明需要完成哪些操作才能实现此安装效果。
注意,不同的浏览器对此有不同的要求。
,您想在问题中提及的内容称为渐进式网络应用 (PWA)
这就是web.dev所说的
渐进式网络应用 (PWA) 使用现代 API 构建和增强,以提供增强的功能、可靠性和可安装性,同时使用单一代码库在任何设备上覆盖任何人、任何地方。
通俗地说,PWA 只是一个应用程序,它由您网站的代码库制成,并为您提供与使用从 Play 商店或应用程序商店下载的应用程序相同的感觉。
介绍如何让您的网站支持 PWA:
基本上需要 3 件事才能将您的 Web 应用程序转换为 PWA,这些是
- 应用应通过 HTTPS 提供服务
- Manifest.json 文件
- 服务工作者
MDN Web Docs 对此有很好的介绍。我在这里引用了一些东西。
安全上下文 (HTTPS)
Web 应用程序必须通过安全网络提供服务。成为安全站点不仅是最佳实践,而且还将您的 Web 应用程序建立为受信任站点,尤其是在用户需要进行安全交易时。大多数与 PWA 相关的功能(例如地理定位甚至 Service Worker)只有在使用 HTTPS 加载应用后才可用。
清单文件
一个 JSON 文件,用于控制您的应用向用户显示的方式并确保渐进式网络应用可被发现。它描述了应用的名称、起始网址、图标以及将网站转换为类似应用的格式所需的所有其他详细信息。
服务工作者
Service Worker 是一个脚本,它允许拦截和控制 Web 浏览器如何处理其网络请求和资产缓存。借助 Service Worker,网络开发者可以创建可靠、快速的网页和离线体验。
为了帮助您逐步完成创建 PWA 的过程,我在下面添加了对一个非常好的教程的参考,您可以阅读它。
How to build a PWA from scratch with HTML,CSS,and JavaScript
PS:您还可以探索 web.dev 以获得彻底的了解。