ホーム画面に追加取得する方法を「ホームに追加」モバイルブラウザ でこのポップアップを取得する方法

Question

モバイルブラウザでサイトオープンにポップアップがサイトにモバイルのホーム画面上のクロームのアイコンを作成します。モバイル上のリンク。

解決策をご提案ください。

Answer 1

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

Chromeは自動的にアプリが次の基準を満たしているバナーが表示されます上で使用

• SHORT_NAME（：
  • が持つweb app manifestファイルを持っていますホーム画面）
  • 名前（バナーで使用）
  • 144x144 PNGアイコン
• があなたのサイトに登録service workerを持っロード
• START_URL（アイコンの宣言は、画像/ PNG形式のMIMEタイプを含める必要があります）。
• HTTPS（サービスワーカーの使用要件）でサービスされます。
• 少なくとも2回、訪問の間に少なくとも5分間訪問します。

ソース：

クローム：//フラグ/＃バイパスアプリ内バナーあなたはクロームフラグを有効にすることで、テストやデバッグの目的のために、これらの要件をスキップすることができhttps://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

対応関係チェック

Answer 2

私はこの詳細な記事をミディアムに見つけました。 How to add “Add to Homescreen” popup in web app

手順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：この名前は、ホームアイコンでアプリアイコンに表示されます。

アイコン：別画面で設定異なるサイズのアイコンが

theme_colorのサイズ：このカラーコードは、クロムで送付元の色を変更します。

background_color：スプラッシュスクリーンの背景色を設定します。 名：アプリケーション

のフルネームあなたがマニフェストファイルを表示するには、次のを持っている必要があり、ここでhttps://manifest-validator.appspot.com/

Answer 3

をあなたのマニフェストを検証することができます。

1. あなたがしてWebアプリケーションマニフェストファイルを持っている必要があります。

   1. SHORT_NAME - そのわずかアイコンの下のホーム画面上で使用。
   2. 名 - 少なくとも192x192のpngアイコンのロゴ/アイコン（アイコンの宣言は、画像/ PNG形式のMIMEタイプを含める必要があります）
   3. START_URL - - あなたのアプリ
   4. アイコンのフルネームアプリケーションが開いたときに読み込むページ

2. あなたのサイトにサービスワーカーが登録されている必要があります。

3. サイトがHTTPS（サービスワーカーの使用要件）でサービスされていることを確認してください。

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

今、あなたは、このポップアップをキャプチャし、あなたはそれをあなたが傍受して保留にすることができますbeforeinstallprompt eventで

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

ルックを表示するwnatとき決定することができます。

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