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

inb24sb2 于 2023-06-03 发布在 Go

关注(0)|答案(3)|浏览(215)

我已经用jQuery Mobile创建了一个移动友好的网站，并添加了一些 meta信息，以便它应该被固定到iOS和Android主屏幕，并应该作为Web应用程序启动（换句话说：在浏览器中，但没有浏览器导航元素）。
它适用于iOS，但不适用于Android 4.4.2。
我遵循this教程创建Android兼容的Web应用程序：
尽管添加了教程中列出的所有 meta信息，Android确实为我的网站显示了“添加到主屏幕”按钮，但它不会像教程中所描述的那样在没有浏览器导航元素的情况下启动网站。
我做错了什么？

google-chrome

来源：https://stackoverflow.com/questions/21018750/add-to-homescreen-button-in-android-does-not-show-website-as-a-web-app

3条答案

按热度按时间

gijlo24d1#

正如你所看到的，here这个特性仍然被标记为Beta。我想你需要用最新版本的Chrome来测试这个功能。从文章中：

支持添加到主屏应用

Chrome会在网页的元素中查找以下 meta标签：

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

name属性必须是“mobile-web-app-capable”，content属性必须是“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 px图像格式。最后两种格式（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添加到主屏

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

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

希望能帮上忙。

赞(0）回复(0）举报 2023-06-03

46scxncf2#

guide表示从Chrome 68开始，应用开发者应该在他们的应用中添加一个按钮。只有在符合PWA标准的情况下，它才能起作用。然后，您应该能够使用以下代码获取应用的回调，在该回调中，您可以向用户显示一个按钮以启动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;
    });
});

我很容易地将其转换为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

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

赞(0）回复(0）举报 2023-06-03

ibps3vxo3#

<link rel="manifest" href="/manifest.json">
manifest.json的内容：

{
      "name": "Your Website Name",
      "short_name": "Short Name",
      "icons": [
        {
          "src": "/path/to/icon.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "start_url": "/",
      "display": "standalone",
      "background_color": "#ffffff",
      "theme_color": "#000000"
    }

然后你可以为“display”属性设置不同的值，对我来说，“standalone”激活了“Install app”按钮，但“display”值实际上是我需要看到的“Add to home screen”按钮。干杯。

赞(0）回复(0）举报 2023-06-03

我来回答

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

3条答案

支持添加到主屏应用

图标

图标标签

配置

对比iOS Safari添加到主屏

相关问题

热门标签

最新问答