"Add to homescreen" button in Android does not show website as a Web App
As you can see here this feature is still tagged as Beta. I guess you'll need to test this feature with the latest version of Chrome.From the article:
Supporting add to homescreen apps
Chrome will look for the following meta tag in the element of the web-page:
<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.
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 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.
Icon label
The application’s <title> element serves as the default label for the icon on the homescreen.
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
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:
Whilst Chrome temporarily accepts the usage of "apple-mobile-web-app-capable", Chrome does not offer compatibility with the iOS Safari API’s including:
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.
The guide 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 criteria 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 Add to home screen prompt.
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.
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 AddToHomeScreenReferences:https://developers.google.com/web/fundamentals/app-install-banners/