blocks|key|172609|text|guide指出，从Chrome68开始，预计应用程序开发人员会在他们的应用程序中添加一个按钮。并且它应该只有在满足PWA+criteria的情况下才能工作。然后，您应该能够使用以下代码来获取应用程序的回调，您可以向用户显示一个按钮来启动Add+to+home+screen提示符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|172610|根据指南，添加此侦听器。|172611|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';
});|code-block|syntax|javascript|172612|然后..。用户需要单击该按钮，然后您就可以运行此代码。|172613|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;
++++});
});|172614|我很容易地将它转换为react组件，下面的代码是从我的Redux项目中删减的，所以它不会复制/粘贴，但应该给出一般的想法。|172615|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|172616|参考资料：https://developers.google.com/web/fundamentals/app-install-banners/|172617|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/fundamentals/app-install-banners/|1|https://developers.google.com/web/fundamentals/app-install-banners/#criteria|2^0|3A|I|0|5|0|1P|8|1|0|0|0|0|0|0|0|5|1V|2|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]]|E|$]]|$1|F|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1I|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1K|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|W|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|13]]]]

The <a href="https://developers.google.com/web/fundamentals/app-install-banners/" rel="nofollow noreferrer">guide</a> indicates 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 <a href="https://developers.google.com/web/fundamentals/app-install-banners/#criteria" rel="nofollow noreferrer">criteria</a> are 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 <code>Add to home screen</code> prompt.

Per the guide, add this listener.

<pre><code>let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) =&gt; {
 // 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';
});
</code></pre>

Then.... the user needs to click the button, after which you can run this code.

<pre><code>btnAdd.addEventListener('click', (e) =&gt; {
 // 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) =&gt; {
 if (choiceResult.outcome === 'accepted') {
 console.log('User accepted the A2HS prompt');
 } else {
 console.log('User dismissed the A2HS prompt');
 }
 deferredPrompt = null;
 });
});
</code></pre>

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.

<pre><code>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 =&gt; {
 // 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 =&gt; {
 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 (
 &lt;div className={classes.root}&gt;
 &lt;Button variant="contained" onClick={this.handleAddClick.bind(this)}&gt;
 Add to home screen
 &lt;/Button&gt;
 &lt;/div&gt;
 )
 }
}

export default AddToHomeScreen
</code></pre>

References:
<a href="https://developers.google.com/web/fundamentals/app-install-banners/" rel="nofollow noreferrer">https://developers.google.com/web/fundamentals/app-install-banners/</a>

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).

It works fine for iOS, but it doesn't work for Android 4.4.2. 

I followed <a href="http://www.mobilexweb.com/blog/home-screen-web-apps-android-chrome-31" rel="noreferrer">this</a> tutorial for creating Android-Compatible web apps:

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.

What am I doing wrong?

"Add to homescreen" button in Android does not show website as a Web App

Android

jQuery

我已经用Android手机创建了一个移动友好的网站，并添加了一些元信息，这样它就应该固定在iOS和jQuery的主屏幕上，并且应该作为web应用程序启动(换句话说:在浏览器中，但没有浏览器导航元素)。它适用于iOS，但不适用于安卓4.4.2。我按照教程创建了与安卓兼容的web应用程序：尽管添加了教程中列出的所有元信息，...

问Android中的"Add to homescreen“按钮不会将网站显示为Web App
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android中的"Add to homescreen“按钮不会将网站显示为Web AppEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android中的"Add to homescreen“按钮不会将网站显示为Web App
EN