PWA
Manifest 显示模式(standalone、fullscreen……)
web app manifest 里的 display 属性控制一个已安装 PWA 显示多少浏览器界面。"browser" 打开一个普通标签页,"minimal-ui" 保留一条纤细的导航栏,"standalone" 看起来像一个没有浏览器界面的原生应用,而 "fullscreen" 隐藏一切、包括状态栏。大多数可安装应用使用 "standalone",而当某个模式不受支持时,浏览器会沿列表向下回退。
四种浏览器界面层级
display 是一个单独的 manifest 字段,有四个取值,从浏览器界面最多到最少。如果浏览器不支持你请求的那个,它会沿列表向下回退,所以一个对 fullscreen 的请求可能落到 standalone,而 standalone 落到 minimal-ui。
这些模式
| display 取值 | 用户看到什么 |
|---|---|
| browser | 一个普通浏览器标签页,完整界面 |
| minimal-ui | 一条带后退/重新加载的纤细栏,无地址栏 |
| standalone | 类应用,无浏览器界面,保留状态栏 |
| fullscreen | 一切隐藏,包括状态栏 |
显示模式常见问题
display: standalone 做什么?
它启动已安装的 PWA 时不带任何浏览器界面(没有地址栏或标签页),所以它看起来、用起来都像一个原生应用,同时保留设备状态栏。
我该用哪种显示模式?
对大多数可安装应用,用 "standalone"。只在游戏这类沉浸式场景用 "fullscreen";想要一点导航时用 "minimal-ui";完全不想要类应用行为时用 "browser"。
为什么我的 PWA 还显示地址栏?
要么是应用其实没被安装(你还在一个标签页里),要么是浏览器回退到了界面更多的模式,因为它不支持你请求的那个。