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

如何判断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…