web-dev-qa-db-ja.com

ホームに追加する画面をモバイルブラウザーで開くサイトに表示する方法

How to get this pop up in mobile browser . when we click to Add to home Chrome icon generate on Home screen of mobile

モバイルブラウザーでこのポップアップを取得する方法「ホームに追加」は、モバイルのサイトリンクでモバイルのホーム画面にchromeのアイコンを作成します。

解決策を提案してください。

androidgoogle-chromeprogressive-web-apps
20
Niral Bhavsar

公式の要件は次のとおりです。

アプリが次の条件を満たしている場合、Chromeは自動的にバナーを表示します。

  • ウェブアプリマニフェスト ファイルがあります：
    • short_name（ホーム画面で使用）
    • 名前（バナーで使用）
    • 144x144 pngアイコン（アイコン宣言には、MIMEタイプのimage/pngを含める必要があります）
    • ロードするstart_url
  • サイトに サービスワーカー が登録されています。
  • [〜＃〜] https [〜＃〜] （Service Workerを使用するための要件）で提供されます。
  • 少なくとも2回は訪問し、訪問の間隔は少なくとも5分です。

ソース： https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

chromeフラグを有効にすると、テストまたはデバッグの目的でこれらの要件をスキップできます。

chrome：// flags /＃bypass-app-banner-engagement-checks

chrome flag bypass user engagement checks

11
Lukasz Wiktor

マニフェストファイルを表示するには、次のものが必要です。

  1. 以下を含むWebアプリマニフェストファイルが必要です。

    1. short_name-アイコンのすぐ下のホーム画面で使用されます。
    2. name-アプリのフルネーム
    3. icon-少なくとも192x192 pngアイコンのロゴ/アイコン（アイコン宣言には、MIMEタイプのimage/pngを含める必要があります）
    4. start_url-アプリを開いたときに読み込むページ

  2. サイトにサービスワーカーを登録する必要があります。

  3. サイトがHTTPS経由で提供されていることを確認してください（Service Workerを使用するための要件）。

  4. また、ブラウザサイトエンゲージメントヒューリスティックを満たす必要があります。

これで、このポップアップをキャプチャして、表示するタイミングを決定できます

_window.addEventListener("beforeinstallprompt", ev => { 
  // Stop Chrome from asking _now_
  ev.preventDefault();

  // Create your custom "add to home screen" button here if needed.
  // Keep in mind that this event may be called multiple times, 
  // so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.Prompt();
});
_

beforeinstallprompt event を見てください。これを傍受して保留することができます。

このイベントには .Prompt() と呼ばれるメソッドがあり、ポップアップを自由に表示させることができます。

7
aWebDeveloper

サービスワーカーのjsファイルには、この1行があります。

self.addEventListener('fetch', function(event) {});
6
imsinu9

Mediumに関するこの詳細な記事を見つけました。 Webアプリで「ホーム画面に追加」ポップアップを追加する方法

ステップ1：ルートフォルダーに空のservice-worker.jsファイルを作成します。タグを閉じる前に、HTMLページに以下のコードを挿入します。

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

手順2：マニフェストファイルを作成するルートフォルダーにmanifest.jsonファイルを作成します。 HTMLページのヘッダーセクションに以下のタグを追加します。

<link rel="manifest" href="/manifest.json">

手順3：マニフェストファイルに構成を追加するここに構成サンプルがあります。

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

上記のコードでは、独自の値を置き換えることができます。

short_name：この名前は、アプリのアイコンに沿ってホーム画面に表示されます。

icons：画面サイズごとに異なるサイズのアイコンを設定します

theme_color：このカラーコードは、クロムのアドレスの色を変更します。

background_color：スプラッシュ画面の背景色を設定します。

name：アプリケーションのフルネーム。

ここでマニフェストを検証できます https://manifest-validator.appspot.com

6
NitinKumar