web-dev-qa-db-fra.com

Le bouton "Ajouter à l'écran d'accueil" dans Android ne montre pas le site Web en tant qu'application Web

J'ai créé un site Web compatible avec mobile avec jQuery Mobile et ajouté des méta-informations afin de les épingler sur les écrans d'accueil iOS et Android et de les lancer en tant qu'application Web (en d'autres termes: dans un navigateur, mais sans navigation dans le navigateur. éléments).

Cela fonctionne bien pour iOS, mais pas pour Android 4.4.2. 

J'ai suivi this tutoriel pour la création d'applications Web compatibles avec Android:

Malgré l'ajout de toutes les méta-informations répertoriées dans le didacticiel, Android affiche le bouton "Ajouter à l'écran d'accueil" de mon site Web, mais il ne lance pas le site Web sans les éléments de navigation du navigateur décrits dans le didacticiel.

Qu'est-ce que je fais mal?

androidgoogle-chromemobile-websitehomescreen
18
Adrian Grigore

Comme vous pouvez le constater ici cette fonctionnalité est toujours marquée Beta. Je suppose que vous aurez besoin de tester cette fonctionnalité avec la dernière version de Chrome .

Soutenir ajouter aux applications écran d'accueil

Chrome recherchera la balise Meta suivante dans l'élément de la page Web:

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

L'attribut de nom DOIT être "capable d'application mobile-web-app" et l'attribut de contenu doit être "oui" (sensible à la casse). S'il existe une autre valeur dans l'attribut de contenu, l'application Web sera ajoutée en tant que signet normal.

Icône

L'icône utilisée pour l'installation sur l'écran d'accueil est déterminée à l'aide de la plus grande icône trouvée dans l'une des balises <link> suivantes:

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

Attention: le format d'image 192px est recommandé. Les deux derniers formats (Apple-touch- *) sont obsolètes et ne seront pris en charge que pendant une courte période.

Étiquette d'icône

L’élément <title> de l’application sert d’étiquette par défaut pour l’icône de l’écran d’accueil.

Configuration

L'exemple suivant est la configuration minimale requise pour prendre en charge une expérience de lancement de l'écran d'accueil.

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

Comparaison à iOS Safari Ajouter à l'écran d'accueil

Chrome permettra également aux applications Web de se lancer en "mode App" si elles intègrent une balise méta portant le nom "compatible Apple-mobile-web-app". Chrome cessera de prendre en charge cette utilisation dans une prochaine version. Actuellement, Google Chrome affiche un avertissement de désapprobation dans le journal de la console des outils de développement lorsqu'il détecte une page contenant uniquement la méta-balise "Apple-mobile-web-app-capable". L'avertissement apparaît comme suit:

Android vs iOS

Bien que Chrome accepte temporairement l’utilisation de "Apple-mobile-web-app-capable", il n’offre aucune compatibilité avec les API iOS Safari, notamment:

window.navigator.standalone
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
<link rel="Apple-touch-startup-image" href="/startup.png">

J'espère que ça aide.

37
Assaf Gamliel

Le guide indique qu'à partir de Chrome 68, le développeur de l'application devrait ajouter un bouton à son application. Et que cela ne fonctionne que si les critères PWA sont remplis. Ensuite, vous devriez pouvoir utiliser le code suivant pour obtenir un rappel sur votre application où vous pouvez montrer un bouton à l'utilisateur pour lancer l'invite Add to home screen.

Selon le guide, ajoutez cet auditeur.

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

Ensuite .... l'utilisateur doit cliquer sur le bouton, après quoi vous pouvez exécuter ce 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;
    });
});

Je l'ai converti assez facilement en composant réactif, le code ci-dessous est extrait de mon projet Redux, il ne fonctionnera donc pas en copier/coller, mais devrait donner une idée générale.

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

Références: https://developers.google.com/web/fundamentals/app-install-banners/

0
Simon Hutchison