简介
随着 Progressive Web Application(PWA) 的出现,我们可以用 Web 技术构建出类似于 native 应用的体验,且不需要安装就可以使用。但是,目前在 Safari 浏览器中有一个问题,就是无法完成 PWA 应用的安装,本文将分享如何解决这个问题。
问题描述
目前在 Safari 浏览器中,可以将 PWA 添加到主屏幕,但是只是添加了一个快捷方式,无法像在 Chrome 浏览器中一样将其安装到主屏幕上。这个问题的原因在于 Safari 浏览器并不支持 Web App Manifest 文件中的 short_name
字段和 start_url
字段。
解决方法
创建一个 Safari 指定的 Web App Manifest 文件
为了解决这个问题,我们需要创建一个专门针对 Safari 的 Web App Manifest 文件。我们可以通过在 index.html 文件的 head 标签中添加一个 link 标签来引用这个文件。
----- -------------- -----------------------------------
在 Safari 的 Web App Manifest 文件中,我们需要删除 short_name
字段和 start_url
字段,并添加 name
字段和 WebAppCapable
字段,代码如下:
- ------- ----- --- ------ -------- - - ------ ------------------------- -------- --------- -- - ------ ------------------------- -------- --------- - -- ---------- ------------- ---------------- ------ ------------------- ---------- -------------- --------- -
添加一个安装提示框
在我们修改了 Web App Manifest 文件之后,我们需要提醒用户通过 Safari 浏览器的分享菜单安装 PWA 应用,我们可以通过下面的代码实现这个功能。
-- --------------------- --- ------ - ----- ----------------- - ----------- --- ---- -- ------- ---- --- ------- -- ------------------- - ----- ----------- - ----------------------------------------------- ----- -------- - ----- ---------------------------------- -- ------------ ----- ----------- - -------------------- -- -------------- ------------------------ - ------------------------------------------------------------ -- ------- - -
结论
通过创建一个 Safari 指定的 Web App Manifest 文件和添加一个安装提示框,我们可以解决 PWA 应用在 Safari 浏览器上无法完成安装的问题。如果你正在开发一个 PWA 应用,并且面临着这个问题,请尝试以上方法来解决。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b4cca9babaf620faa9bff