web-dev-qa-db-ja.com

AndroidはWebアプリをWebアプリとして表示しません]の[ホーム画面に追加]ボタン

JQuery Mobileを使用してモバイルフレンドリーなWebサイトを作成し、メタ情報を追加して、iOSに固定してAndroid homescreensとし、Webアプリとして起動するようにします（言い換えれば：ブラウザ内、ただしブラウザナビゲーション要素なし）。

IOSでは正常に動作しますが、Android 4.4.2。では動作しません。

this Android互換Webアプリを作成するためのチュートリアルに従いました。

チュートリアルにリストされているすべてのメタ情報を追加しても、Androidは私のWebサイトの[ホーム画面に追加]ボタンを表示しますが、ブラウザナビゲーション要素なしでWebサイトを起動しませんチュートリアル。

私は何を間違えていますか？

androidgoogle-chromemobile-websitehomescreen
20
Adrian Grigore

ご覧のとおり here この機能はBetaとしてタグ付けされています。 Chromeの最新バージョンでこの機能をテストする必要があると思います。記事から：

ホーム画面アプリへの追加のサポート

Chromeは、Webページの要素で次のメタタグを探します。

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

名前属性は「mobile-web-app-capable」でなければならず、コンテンツ属性は「yes」（大文字と小文字を区別しない）でなければなりません。コンテンツ属性に他の値がある場合、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">

注意：192pxの画像形式を推奨します。最後の2つの形式（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では、「Apple-mobile-web-app-capable」という名前を使用してメタタグを埋め込んだ場合、Webアプリを「アプリモード」で起動することもできます。 Chromeは、今後のリリースでこの使用のサポートを停止します。Chromeは、現在、開発者ツールのコンソールログに「Apple-mobile-web-app-capable」メタタグ。警告は次のように表示されます。

Android vs iOS

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

役に立てば幸いです。

38
Assaf Gamliel

guide は、Chrome 68以降、アプリ開発者がアプリにボタンを追加することが期待されていることを示しています。 PWA criteria が満たされた場合にのみ機能するはずです。次のコードを使用してアプリへのコールバックを取得できるようにする必要がありますユーザーにボタンを表示して、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/

0
Simon Hutchison