如何判断 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 包,引入后可直接用。非常小,非常简单
https://github.com/GeoffZhu/i…