&引用；“添加到主屏幕”；Android中的按钮不会将网站显示为Web应用程序

我已经用jQuery mobile创建了一个移动友好的网站，并添加了一些元信息，因此它应该固定在iOS和Android homescreens上，并且应该作为web应用程序启动（换句话说：在浏览器中，但没有浏览器导航元素）

它在iOS上运行良好，但在Android 4.4.2上不起作用

我遵循了创建Android兼容web应用程序的教程：

尽管添加了教程中列出的所有元信息，Android还是为我的网站显示了“添加到主屏幕”按钮，但它不会启动没有教程中所述浏览器导航元素的网站

我做错了什么？

正如您所看到的，此功能仍被标记为

Beta

。我想你需要用最新版本的Chrome来测试这个功能。 从文章中：

支持添加到主屏幕应用程序 Chrome将在网页元素中查找以下元标记：

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

我希望它能有所帮助。

显示，从Chrome68开始，应用程序开发人员希望在他们的应用程序中添加一个按钮。只有在满足PWA的情况下，它才能起作用。然后，您应该能够使用以下代码获得对应用程序的回调，您可以向用户显示一个按钮，以启动

添加到主屏幕

提示

根据指南，添加此侦听器

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';
});

然后。。。。用户需要单击按钮，然后才能运行此代码

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;
    });
});

我相当容易地将其转换为react组件，下面的代码是从我的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

import React，{Component}来自“React”
从“@material ui/core/Button”导入按钮
类AddToHomeScreen扩展组件{
建造师（道具）{
超级（道具）
this.deferredPrompt=null
此.state={
节目：假
}
}
组件安装（）{
var组件=此
addEventListener（'beforeinstallprompt'，e=>{
//防止Chrome 67及更早版本自动显示提示
e、 预防默认值（）
//隐藏事件，以便稍后触发。
component.deferredPrompt=e
//显示按钮
console.log（'触发beforeinstallprompt…显示添加按钮'）
setState（{show:true}）
})
}
//受此约束
手引线点击（）{
if（this.deferredPrompt）{
this.setState（{show:false}）
//显示提示
this.deferredPrompt.prompt（）
//等待用户响应提示
this.deferredPrompt.userChoice.then（choiceResult=>{
如果（choiceResult.Output==‘已接受’）{
console.log（'用户接受A2HS提示'）
}否则{
log（'用户取消了A2HS提示'）
}
this.deferredPrompt=null
})
}否则{
console.log（'无效的提示对象'）
}
}
渲染（）{
const{show}=this.state
如果（！show）返回null
返回(
添加到主屏幕
)
}
}
导出默认添加到主屏幕

参考资料：

---

是否提供“添加到主屏幕”并不取决于您的网站，而是取决于谷歌浏览器。请尝试使用最新版本的Chrome进行测试。@shoe rat:我使用的是最新的Chrome版本（Android 4.2.2/Nexus 7上的32.0.1700.99），这不是您要找的版本？@shoe rat:现在是，但当我在设备上启动链接时，浏览器栏并没有消失，因为它应该是一个用于正确配置web应用的浏览器。谢谢您的回复，但我使用的是最新的chrome版本（安卓4.2.2/Nexus 7上的32.0.1700.99），你只是引用了我在问题中已经链接的文章，没有提供任何新信息。好吧，我使用Nexus 5和4.4.2，你的网站对我来说非常适合。完全按照您的意图加载。我将尝试使用4.2.2的Nexus7，并让您知道我的想法。也许我有一个4.2.2的设备就在这附近的某个地方。很抱歉，如果答案不符合你的喜好，我认为跟随谷歌的文档对其他阅读你的问题的人来说也会更好，因为未来的实现可能会改变。正如我所说的，我会尽快报告。祝你好运，谢谢你的跟进！只是为了确保：你的意思是网站从Nexus 5的主屏幕加载而不显示浏览器导航元素吗？@AdrianGrigore正确，正如你预期的，它以全屏模式加载。根据android文档，此解决方案现在已经过时。见：

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';
});

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;
    });
});

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