Подтвердить что ты не робот

Кнопка "Добавить в рабочий стол" в Android не отображает веб-сайт как веб-приложение

Я создал мобильный веб-сайт с jQuery Mobile и добавил некоторую метаинформацию, чтобы он был прикреплен к домашним экранам iOS и Android и должен быть запущен как веб-приложение (другими словами: в браузере, но без элементов навигации браузера).

Он отлично работает для iOS, но он не работает для Android 4.4.2.

Я следил за этот учебник по созданию Android-совместимых веб-приложений:

Несмотря на добавление всей метаинформации, как указано в учебнике, Android действительно показывает кнопку "Добавить на рабочий стол" для моего веб-сайта, но он не запускает веб-сайт без элементов навигации браузера, как описано в учебнике.

Что я делаю неправильно?

4b9b3361

ОТВЕТЫ

Ответ 1

Как вы можете видеть здесь эта функция по-прежнему помечена как Beta. Думаю, вам нужно будет протестировать эту функцию с последней версией Chrome. Из статьи:

Поддержка добавления в домашние приложения

Chrome будет искать следующий метатег в элементе веб-страницы:

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

Атрибут name ДОЛЖЕН быть "мобильным-веб-приложением", а атрибут контента должен быть "да" (с учетом регистра). Если в атрибуте контента есть другое значение, веб-приложение будет добавлено как обычная закладка.

Значок

Значок, который используется для установки на главный экран, определяется с помощью самого большого значка, найденного в одном из следующих тегов <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 Add to Homescreen

Chrome также позволит веб-приложениям запускаться в "режиме приложения", если они встроят метатег, используя имя "apple-mobile-web-app-able". Chrome перестанет поддерживать это использование в предстоящем выпуске. В настоящее время Chrome отображает предупреждение об устаревании в журнале консоли разработчика, когда он обнаруживает страницу только с мета-тегом "apple-mobile-web-app-able". Предупреждение появляется следующим образом:

Android vs iOS

В то время как Chrome временно использует использование "apple-mobile-web-app-capable", Chrome не предлагает совместимость с API-интерфейсами iOS Safari, включая:

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

Надеюсь, это поможет.

Ответ 2

В руководстве указано, что начиная с 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;
    });
});

Я довольно легко преобразовал его в компонент реагирования, приведенный ниже код вырезан из моего проекта 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/