ios needs to add to home screen
Adding to the home screen - this function is one of the features of the ios safari browser. It can make our H5 project open from the desktop like an app. In fact, it supports full-screen display and can hide the search bar. Note that it is independent The cache, this will be a bit of a headache for some projects that need to bring characteristic parameters, for example, it is necessary to open certain pages and process certain logic according to the characteristic parameters, this point needs to be paid attention to!
specific effect
As you can see, here is the name and picture that can be specified to be added to the home screen
Realize the premise
This feature is due to the safari browser's support for ios devices
Set the name of the app added to the home screen:
<meta name="apple-mobile-web-app-title" id="base_meta_title">
The key to control whether to add to the desktop, yes is to open the navigation bar, no is to close:
<meta name="apple-mobile-web-app-capable" content="yes">
Bootstrap icons added to home screen:
<link rel="icon" id="base_link_icon">
Desktop application icons:
<link rel="apple-touch-icon" id="apple_touch_icon">
complete HTML page
<!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>
How to tell if an app was opened from the home screen or from the browser
At the beginning of this problem, I considered adding specific parameters on the url to judge, but in the case of Uniapp multi-page, after the routing path changes, the parameters carried will be cleared, and then I saw a specific parameter .
Note the premise: full screen display needs to be turned on, which is the key
<meta name="apple-mobile-web-app-capable" content="yes">
After the full screen display is enabled, the H5 project opened from the main screen
("standalone" in window.navigator) && window.navigator.standalone
It will exist in window.navigator standalone, and the parameter is true, and it can be judged by this.
Special case
If your project does not rely on carrying parameters to implement the logic of the overall project, then the above implementation is sufficient, but if it relies on carrying parameters on links and is a multi-page application, (for example, my project needs to be based on the store id To find the corresponding store), then we need to consider if the user can click on any page to jump to the specified page, and add it to the home screen correctly.
Please write the parameters like this:
window.history.pushState({}, 0, 'http://' + window.location.host +
'/static-u/index.html?shopid=' + shopid + '#/')
Write the parameters after index.html, so that after hash routing is enabled, the parameters will not be discarded, and the home page will not change.