Safari浏览器将H5网页添加到主屏幕

山楂树の

已于 2023-05-30 17:52:51 修改

阅读量2.6k

点赞数 2

分类专栏： Uniapp IOS 文章标签： safari ios web app

于 2023-04-12 21:25:58 首次发布

本文链接：https://blog.csdn.net/dabaooooq/article/details/130116903

版权

Uniapp 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

IOS

1 篇文章 0 订阅

订阅专栏

ios添加到主屏幕的需求

添加到主屏幕——这个功能属于ios的safari浏览器的特性之一，他可以让我们的H5项目从桌面像App一样打开，其实就是支持全屏显示，可以隐藏搜索栏，并且注意，他是独立的缓存，这一点在某些需要带上特点参数的项目会有些头疼，例如需要根据特点参数才能打开某些页面，处理某些逻辑，这点需要注意一下！

具体效果

请添加图片描述

可以看到，这里是可以指定添加到主屏幕的名称、图片

实现前提

这种功能特性是得益于safari浏览器针对于ios设备的支持

设置添加到主屏幕应用的名称：

 <meta name="apple-mobile-web-app-title" id="base_meta_title">

控制是否添加到桌面的关键，yes为开启导航栏，no为关闭：

<meta name="apple-mobile-web-app-capable" content="yes">

添加到主屏幕的引导图标：

 <link rel="icon" id="base_link_icon">

桌面应用图标：

  <link rel="apple-touch-icon" id="apple_touch_icon">

完整的HTML页面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-title" id="base_meta_title">
    <!-- 控制是否添加到桌面的关键，yes为开启导航栏，no为关闭 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--    <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->

    <link rel="icon" id="base_link_icon">
    <link rel="apple-touch-icon" id="apple_touch_icon">
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
        .supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script>
  var explorer = navigator.userAgent
  let icon = document.getElementById("base_link_icon")
  let aicon = document.getElementById("apple_touch_icon")
  let title = document.getElementById("base_meta_title")
    icon.href = “你的图标路径，可以是绝对路径、相对路径或者网络路径”
    aicon.href = “你的图标路径，可以是绝对路径、相对路径或者网络路径”
    title.content = “应用名称”
    if (explorer.indexOf('Safari') != -1) {
      window.history.pushState({}, 0, 'http://' + window.location.host +
        '/static-u/index.html?shopid=' + shopid + '#/')};
</script>

如何判断应用是从主屏幕打开还是从浏览器打开

这个问题在一开始，我是考虑在url上带上特定参数，来判定，但是在Uniapp多页面的情况下，路由路径发生变化后，携带的参数会被清除，后来我看到了一个特定的参数。

注意前提：需要开启全屏显示，这是关键

<meta name="apple-mobile-web-app-capable" content="yes">

开启了全屏显示之后，从主屏幕的打开的H5项目

("standalone" in window.navigator) && window.navigator.standalone

window.navigator中会存在standalone，并且该参数为true，通过这个就能判断了。

特殊情况

如果你的项目并不依赖于携带参数来实现整体项目的逻辑，那么上面的实现已经足够了，但是如果依赖于链接上携带参数，并且是多页面应用，（例如我的项目是需要根据商铺id去找到对应的商铺），那么我们就需要考虑如果让用户点击任何一个页面都能够跳到指定的页面，正确的去添加到主屏幕。

请你把参数这样写：

  window.history.pushState({}, 0, 'http://' + window.location.host +
        '/static-u/index.html?shopid=' + shopid + '#/')

把参数写在index.html之后，这样开启哈希路由之后，参数是不会被丢弃的，首页面是不会变化的。