// 本文受众:会使用 Chrome 的用户
将 WebApp 安装成桌面应用,可以在程序邬,状态栏等地方独立启动 App 而无需打开浏览器。
我们都知道 Chrome 能很容易的将 PWA 安装成桌面应用,比如 Twitter, Spotify, Google Photos, Youtube Music 都是非常优秀的 PWA。
下面介绍如何安装没有提供 PWA 支持的 WebApp:
Chrome
Edge
Firefox
Firefox 桌面版尚未正式提供将 PWA 安装成桌面应用的方式,但存在一个实验性的偏好选项开启这个功能。进入 about:config 搜索 browser.ssb.enabled,双击将值修改为 true。
不过 Firefox 这个功能现在还有明显的缺点,比如不支持 web Manifest 中的一些设置,比如theme_color,另外窗口位置不能记录,而且不支持扩展。
最后的完善
PWA 有 scope 的概念,当你以桌面应用的方式打开 WebApp 时,如果页面的 URL 超出安装时指定的 scope,窗口会显示 URL Banner,如果 WebApp 有 PWA 的支持,通常不会发生这种情况,但如果 WebApp 没有 PWA 的支持,这个 scope 就被默认指定为你安装时的路径,这样,很多时候会发生超出 scope 的情况。
比如 Deezer Web Player 默认会自动跳转到 www.deezer.com/us/,安装到桌面后 scope 是 /us/ ,而在使用搜索功能时,URL 是 www.deezer.com/search/,这超出了 scope,就会显示 URL Banner。Google Docs 也有类似的问题。
于是,我们需要在安装之前修改 URL 的路径,以改变 scope,打开 Web Console,输入以下代码使用 History API 改变 URL:
history.replaceState({}, '', '/')
改完路径再使用上面的方法安装成桌面应用,这时就不会显示恼人的 URL Banner 了。
现在我安装成桌面应用的非 PWA 有 Deezer, Google Docs, Gmail, Evernote。