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

【问题标题】："Add to homescreen" button in Android does not show website as a Web AppAndroid 中的“添加到主屏幕”按钮不会将网站显示为 Web 应用程序
【发布时间】：2014-01-27 22:00:33
【问题描述】：

我已经使用 jQuery Mobile 创建了一个适合移动设备的网站，并添加了一些元信息，以便将其固定到 iOS 和 Android 主屏幕并作为网络应用程序启动（换句话说：在浏览器中，但没有浏览器导航元素）。

它适用于 iOS，但不适用于 Android 4.4.2。

我按照 this 教程创建了与 Android 兼容的网络应用程序：

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

我做错了什么？

【问题讨论】：

“添加到主屏幕”的可用性不取决于您的网站，而是取决于 Google Chrome。请尝试使用最新版本的 Chrome 进行测试。
@shoe rat：我使用的是最新的 Chrome 版本（Android 4.2.2 / Nexus 7 上的 32.0.1700.99）
this 不是您要找的吗？
@shoe rat：现在是这样，但是当我在我的设备上启动链接时，浏览器栏并没有消失，因为它应该是一个正确配置的网络应用程序。

标签： android google-chrome mobile-website homescreen

【解决方案1】：

如您所见here，此功能仍被标记为Beta。我想您需要使用最新版本的 Chrome 来测试此功能。来自文章：

支持添加到主屏应用

Chrome 会在网页元素中查找以下元标记：

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

名称属性必须是“mobile-web-app-capable”，内容属性必须是“yes”（不区分大小写）。如果 content 属性中有任何其他值，则 Web 应用程序将被添加为常规书签。

图标

用于安装到主屏幕的图标是通过使用在以下<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">

注意：建议使用 192 像素的图片格式。最后两种格式 (apple-touch-*) 已弃用，仅在短时间内支持。

图标标签

应用程序的<title> 元素用作主屏幕上图标的默认标签。

配置

以下示例是支持主屏幕启动体验所需的最低配置。

<!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>

对比 iOS Safari 添加到主屏幕

如果 Web 应用程序使用“apple-mobile-web-app-capable”名称嵌入元标记，Chrome 还将允许它们以“应用程序模式”启动。 Chrome 将在即将发布的版本中停止支持这种用法。目前，当 Chrome 检测到只有“apple-mobile-web-app-capable”元标记的页面时，它会在开发者工具的控制台日志中显示弃用警告。警告显示如下：

虽然 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">

希望对你有帮助。

【讨论】：

感谢您的回复，但我 am 使用的是最新的 chrome 版本（Android 4.2.2 / Nexus 7 上的 32.0.1700.99），您只是引用了这篇文章我已经在我的问题中链接了，但没有提供任何新信息。
嗯，我使用 Nexus 5 和 4.4.2，您的网站非常适合我。完全按照您的预期加载。我将尝试使用 4.2.2 的 Nexus 7，并让您知道我发现了什么。也许我有一个 4.2.2 的设备就在这附近的某个地方。抱歉，如果答案不符合您的喜好，我认为遵循 Google 的文档对于阅读您的问题的其他人来说会更好，因为将来实施可能会发生变化。正如我所说，我会尽快报告。祝你好运。
感谢您的跟进！只是为了确保：您的意思是从 Nexus 5 的主屏幕加载网站而不显示浏览器导航元素？
@AdrianGrigore 正确，正如您所料，它以全屏模式加载。
根据 android 文档，这个解决方案现在已经过时了。见：developers.google.com/web/fundamentals/engage-and-retain/…

【解决方案2】：

guide 表示从 Chrome 68 开始，预计应用开发者会在其应用中添加一个按钮。并且只有在满足 PWA criteria 时它才应该起作用。然后，您应该能够使用以下代码来获取对您的应用的回调，您可以在其中向用户显示一个按钮以启动 Add to home screen 提示。

根据指南，添加此侦听器。

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

我很容易将它转换为一个反应组件，下面的代码是从我的 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

参考资料： https://developers.google.com/web/fundamentals/app-install-banners/

【讨论】：