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