简介
随着 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 标签来引用这个文件。
<link rel="manifest" href="safari-manifest.webmanifest">
在 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