android - サイトでホーム画面に追加ポップアップを取得する方法 モバイルブラウザで開く

Question

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

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

Answer 1

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

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

• 次のWeb アプリ マニフェストファイルがあります。
  • short_name (ホーム画面で使用)
  • 名前 (バナーで使用)
  • 144x144 の png アイコン (アイコンの宣言には、image/png の MIME タイプを含める必要があります)
  • ロードする start_url
• サイトにService Workerが登録されている。
• 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

Answer 2

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 : このカラー コードは、chrome のアドレスの色を変更します。

background_color : スプラッシュ スクリーンの背景色を設定します。

name : アプリケーションの完全な名前。

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