如何判断web应用是否添加到主屏幕

2024-04-10 08:00:59

如何判断web应用是否从桌面图标启动

这就要说到web应用添加到桌面后的显示模式了，一共有这么多种，通过mainfest来控制。只要知道启动模式是什么，就能判断出是否从桌面启动。

fullscreen: 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome standalone: 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。 minimal-ui: 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。 browser: 这是默认的设置。该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。

IOS桌面图标启动

通过桌面图标启动后，navigator.standalone会等于true，只要判断这个变量就够了。

安卓桌面图标启动

通过桌面图标启动后，CSS的媒体查询是能够探测到的，换而用js写，下面的结果为True。

window.matchMedia('(display-mode: standalone)').matches
复制代码

总结

这里有我实现好的方法，也有npm包，引入后可直接用。非常小，非常简单 github.com/GeoffZhu/is…

转载于:https://juejin.im/post/5cda2c91f265da034d2a3620

如何判断web应用是否添加到主屏幕相关推荐

渐进式web应用程序_如何在渐进式Web应用程序中添加到主屏幕
渐进式web应用程序添加到主屏幕 (Add To Homescreen) Here the web app install banner is focused on web app, with th ...
html5横幅添加搜索,html5 – 为什么我的“添加到主屏幕”Web应用程序安装横幅未显示在我的网络应用程序中...
首先,让我们检查您的清单是否满足显示Web App安装横幅的要求. 要求显示Web App安装横幅的完整(当前)要求是*: >拥有一个Web应用程序清单文件: >一个short_name ...
苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App，自定义图标，启动动画，自定义名称，全屏应用
在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像一个本地应用程序一样,通过桌面APP图标一打开,直接全屏展示,就像在APP中效果一样,完全体会不到你是在浏览 ...
JavaScript为iphone添加到主屏幕
iphone手机有一个书签栏上可以将当前在浏览的网页添加到主屏幕,用户添加该选项之后,就可以从桌面上启动这个web程序,让人看起来有点像web app一样,深受许多人的喜爱.但是很多人却不知道或者懒得 ...
android浏览器有桌面模式么,手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式...
手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式作者:unclealan • 2017年05月12日 http://www.unclealan.cn/index.php/front/73 ...
微信小程序怎么添加到主屏幕将微信小程序放到手机桌面？
微信小程序在一些场景下使用还是非常方便,如果遇到需要经常使用的微信小程序,将该微信小程序添加到手机桌面上,下次直接点击打开将更方便. 例如:草柴微信小程序很多人每天都在用免费领取美团外卖红包优惠券.饿 ...
百度小程序怎么添加到主屏幕将百度小程序放到手机桌面？
百度小程序在一些场景下使用还是非常方便,如果遇到需要经常使用的百度小程序,将该百度小程序添加到手机桌面上,下次直接点击打开将更方便. 例如:草柴百度小程序很多人都在用每天免费领取美团外卖红包优惠券.饿 ...
如何将自定义网站在iphone手机上添加至主屏幕的图标
在iphone手机上,网站可以添加到主屏幕,默认情况下,一个网站被添加到主屏幕时,默认显示的是网站截图,如何才能显示成我们自己想要设置的图标呢?我在实际工作中遇到了这个需求,将实现步骤总结如下: 1. ...
php网站添加手机桌面,手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式...
在手机浏览器上打开某个网站的时候,菜单中有这么一个选项"添加到主屏幕",当然不同的手机改菜单选项的名字有所不同基本上叫"添加到桌面"."添加到桌面导航 ...

最新文章

热门文章