wake-up-neo.com

Die Schaltfläche "Zum Homescreen hinzufügen" in Android zeigt die Website nicht als Web-App an

Ich habe mit jQuery Mobile eine mobilfreundliche Website erstellt und einige Metainformationen hinzugefügt, damit diese auf iOS- und Android-Homescreens fixiert werden können und als Web-App (dh in einem Browser, jedoch ohne Browsernavigation) gestartet werden können Elemente).

Es funktioniert gut für iOS, aber nicht für Android 4.4.2. 

Ich folgte this Tutorial zum Erstellen von Android-kompatiblen Web-Apps:

Obwohl alle Metainformationen hinzugefügt wurden, die im Tutorial aufgeführt sind, zeigt Android für meine Website die Schaltfläche "Zum Homescreen hinzufügen". Die Website wird jedoch nicht ohne Browser-Navigationselemente aufgerufen, wie im Tutorial beschrieben.

Was mache ich falsch?

18
Adrian Grigore

Wie Sie sehen, hier ist diese Funktion noch als Beta gekennzeichnet. Ich denke, Sie müssen diese Funktion mit der neuesten Version von Chrome testen Aus dem Artikel:

Unterstützung für Homescreen-Apps

Chrome sucht im Element der Webseite nach dem folgenden Meta-Tag:

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

Das Namensattribut MUSS "Mobile-Web-App-fähig" sein und das Inhaltsattribut muss "Ja" sein (Groß- und Kleinschreibung wird nicht beachtet). Wenn das Inhaltsattribut einen anderen Wert enthält, wird die Web-App als normales Lesezeichen hinzugefügt.

Symbol

Das Symbol, das zur Installation auf dem Startbildschirm verwendet wird, wird mithilfe des größten Symbols in einem der folgenden <link>-Tags bestimmt:

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

Achtung: Das Bildformat 192px wird empfohlen. Die letzten beiden Formate (Apple-touch- *) sind veraltet und werden nur für kurze Zeit unterstützt.

Symbolbeschriftung

Das <title>-Element der Anwendung dient als Standardbeschriftung für das Symbol auf dem Startbildschirm.

Aufbau

Das folgende Beispiel ist die Mindestkonfiguration, die zur Unterstützung eines Startbildschirms für den Startbildschirm erforderlich ist.

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

Vergleich mit iOS Safari Zum Homescreen hinzufügen

Chrome ermöglicht außerdem den Start von Web-Apps im "App-Modus", wenn ein Meta-Tag mit dem Namen "Apple-Mobile-Web-App-fähig" eingebettet wird. Chrome wird diese Verwendung in einer kommenden Version nicht mehr unterstützen. Chrome zeigt derzeit eine Verfallswarnung im Konsolenprotokoll der Developer Tools an, wenn eine Seite nur mit dem Meta-Tag "Apple-Mobile-Web-App-fähig" erkannt wird. Die Warnung sieht folgendermaßen aus:

Android vs iOS

Während Chrome die Verwendung von "Apple-mobile-web-app-capable" vorübergehend akzeptiert, bietet Chrome keine Kompatibilität mit den iOS Safari-APIs, einschließlich:

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

Ich hoffe, es hilft.

37
Assaf Gamliel

Der guide gibt an, dass ab Chrome 68 erwartet wird, dass der App-Entwickler seiner App eine Schaltfläche hinzufügt. Und dass es nur funktionieren sollte, wenn die PWA Kriterien erfüllt sind. Dann sollten Sie in der Lage sein, den folgenden Code zu verwenden, um einen Rückruf an Ihre App zu erhalten, in dem Sie dem Benutzer eine Schaltfläche zum Starten der Add to home screen-Eingabeaufforderung anzeigen können.

Fügen Sie gemäß der Anleitung diesen Listener hinzu.

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

Dann .... muss der Benutzer auf die Schaltfläche klicken, woraufhin Sie diesen Code ausführen können.

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

Ich habe dies ziemlich leicht in eine React-Komponente umgewandelt, der folgende Code wurde von meinem Redux-Projekt abgeschnitten, so dass er nicht kopiert/eingefügt werden kann, sondern die allgemeine Idee geben sollte.

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

Referenzen: https://developers.google.com/web/fundamentals/app-install-banners/

0
Simon Hutchison