Android 中的“添加到主屏幕”按钮不会将网站显示为 Web 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21018750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Add to homescreen" button in Android does not show website as a Web App
提问by Adrian Grigore
I've created a mobile-friendly web site with jQuery Mobile and added some meta info so that it should be pinned to iOS and Android homescreens and should be launched as a web app (in other words: in a browser, but without browser navigation elements).
我已经使用 jQuery Mobile 创建了一个适合移动设备的网站并添加了一些元信息，以便它应该固定到 iOS 和 Android 主屏幕，并且应该作为网络应用程序启动（换句话说：在浏览器中，但没有浏览器导航元素）。
It works fine for iOS, but it doesn't work for Android 4.4.2.
它适用于 iOS，但不适用于 Android 4.4.2。
I followed thistutorial for creating Android-Compatible web apps:
我按照本教程创建与 Android 兼容的网络应用程序：
Despite adding all the meta info as listed in the tutorial, Android does show the "Add to homescreen" button for my web site, but it does not launch the website without browser navigation elements as described in the tutorial.
尽管添加了教程中列出的所有元信息，Android 确实为我的网站显示了“添加到主屏幕”按钮，但它不会像教程中描述的那样在没有浏览器导航元素的情况下启动网站。
What am I doing wrong?
我究竟做错了什么？
回答by Assaf Gamliel
As you can see herethis feature is still tagged as Beta. I guess you'll need to test this feature with the latest version of Chrome.
From the article:
正如您在此处看到的，此功能仍标记为Beta. 我想您需要使用最新版本的 Chrome 来测试此功能。从文章：
Supporting add to homescreen apps
支持添加到主屏幕应用
Chrome will look for the following meta tag in the element of the web-page:
Chrome 将在网页元素中查找以下元标记：
<meta name="mobile-web-app-capable" content="yes">
The name attribute MUST be "mobile-web-app-capable" and the content attribute must be "yes" (case in-sensitive). If there is any other value in the content attribute the web app will be added as a regular bookmark.
name 属性必须是“mobile-web-app-capable”，而 content 属性必须是“yes”（不区分大小写）。如果 content 属性中有任何其他值，则 Web 应用程序将作为常规书签添加。
Icon
图标
The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following <link>tags:
用于安装到主屏幕的图标是通过使用以下<link>标签之一中的最大图标确定的：
<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Caution: The 192px image format is recommended. The last two formats (apple-touch-*) are deprecated, and will be supported only for a short time.
注意：建议使用 192 像素的图像格式。最后两种格式 (apple-touch-*) 已弃用，并且只会在短时间内得到支持。
Icon label
图标标签
The application's <title>element serves as the default label for the icon on the homescreen.
应用程序的<title>元素用作主屏幕上图标的默认标签。
Configuration
配置
The following example is the minimum required configuration to support a homescreen launch experience.
以下示例是支持主屏幕启动体验所需的最低配置。
<!doctype html>
<html>
<head>
<title>Awesome app</title>
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="192x192" href="/icon.png">
</head>
<body></body>
</html>
Comparison to iOS Safari Add to Homescreen
与 iOS Safari 的比较添加到主屏幕
Chrome will also allow Web Apps to launch in "App mode" if they embed a meta tag using the "apple-mobile-web-app-capable" name. Chrome will stop supporting this usage in an upcoming release. Chrome currently shows a deprecation warning in the Developer Tools' console log when it detects a page with only the "apple-mobile-web-app-capable" meta tag. The warning appears as follows:
如果 Web 应用使用“apple-mobile-web-app-capable”名称嵌入元标记，Chrome 还将允许它们以“应用模式”启动。Chrome 将在即将发布的版本中停止支持这种用法。当 Chrome 检测到只有“apple-mobile-web-app-capable”元标记的页面时，Chrome 当前会在开发者工具的控制台日志中显示弃用警告。警告显示如下：
Whilst Chrome temporarily accepts the usage of "apple-mobile-web-app-capable", Chrome does not offer compatibility with the iOS Safari API's including:
虽然 Chrome 暂时接受 的使用"apple-mobile-web-app-capable"，但 Chrome 不提供与 iOS Safari API 的兼容性，包括：
window.navigator.standalone
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/startup.png">
I hope it helps.
我希望它有帮助。
回答by Simon Hutchison
The guideindicates that as of Chrome 68 it is expected that the app developer adds a button to their app. And that it should only work if the PWA criteriaare met. Then you should be able to use the following code to get a callback to your app where you can show a button to the user to kick off the Add to home screenprompt.
该指南指出，从 Chrome 68 开始，预计应用程序开发人员会向他们的应用程序添加一个按钮。并且只有在满足PWA标准的情况下它才应该起作用。然后，您应该能够使用以下代码获取对您的应用程序的回调，您可以在其中向用户显示一个按钮以启动Add to home screen提示。
Per the guide, add this listener.
根据指南，添加此侦听器。
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can add to home screen
btnAdd.style.display = 'block';
});
Then.... the user needs to click the button, after which you can run this code.
然后......用户需要点击按钮，之后你可以运行这段代码。
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
I converted this to a react component fairly easily, the code below is cut down from my Redux project, so it will not work copy/paste, but should give the general idea.
我很容易地将它转换为反应组件，下面的代码是从我的 Redux 项目中删除的，因此它无法复制/粘贴，但应该给出总体思路。
import React, { Component } from 'react'
import Button from '@material-ui/core/Button'
class AddToHomeScreen extends Component {
constructor (props) {
super(props)
this.deferredPrompt = null
this.state = {
show: false
}
}
componentDidMount () {
var component = this
window.addEventListener('beforeinstallprompt', e => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault()
// Stash the event so it can be triggered later.
component.deferredPrompt = e
// Show button
console.log('beforeinstallprompt triggered... show add button')
component.setState({ show: true })
})
}
// bind to this
handleAddClick () {
if (this.deferredPrompt) {
this.setState({ show: false })
// Show the prompt
this.deferredPrompt.prompt()
// Wait for the user to respond to the prompt
this.deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt')
} else {
console.log('User dismissed the A2HS prompt')
}
this.deferredPrompt = null
})
} else {
console.log('Invalid prompt object')
}
}
render () {
const { show } = this.state
if (!show) return null
return (
<div className={classes.root}>
<Button variant="contained" onClick={this.handleAddClick.bind(this)}>
Add to home screen
</Button>
</div>
)
}
}
export default AddToHomeScreen
References: https://developers.google.com/web/fundamentals/app-install-banners/
参考资料：https: //developers.google.com/web/fundamentals/app-install-banners/
