PWA 应用在 Safari 浏览器上无法完成安装的解决方法-JavaScript中文网-JavaScript教程资源分享门户

PWA 应用在 Safari 浏览器上无法完成安装的解决方法

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

随着 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