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