web-dev-qa-db-ja.com

「ホーム画面に追加」WebアプリインストールバナーがWebアプリに表示されないのはなぜですか

サービスワーカーを作成し、manifest.jsonファイルは、Chromeブラウザユーザー向けの 'ホーム画面に追加' Webアプリインストールバナーを表示します。

意図したとおりに機能していません。

これが私のmanifest.jsonファイル

{
  "name": "MySite",
  "short_name": "Mysite",
  "start_url": "./?utm_source=homescreen",
  "icons": [{
      "src": "assets/cacheable/images/shortcut/120x120.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/142x142.png",
      "sizes": "142x142",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "384x384",
      "type": "image/png"
    }],
  "orientation": "portrait" ,
  "background_color": "#fff",
  "display": "standalone",
  "theme_color": "#fff"
}

何か追加するのを忘れたら教えてください。

html5google-chromeprogressive-web-apps
11
PPShein

まず、マニフェストがWebアプリインストールバナーを表示するための要件を満たしているかどうかを確認しましょう。

要件

Webアプリインストールバナーを表示するための完全な（current）要件は次のとおりです*：

  • 以下を含むWebアプリマニフェストファイルを作成します。
    • 短い名前
    • 名前（バナープロンプトで使用）
    • 144x144 pngアイコン
    • ロードするstart_url
  • HTTPS経由で提供されます（Service Workerを使用するための要件）。
  • 少なくとも2回は訪問し、訪問の間隔は少なくとも5分です。

参照

さて、今のところこれがすべて有効であると仮定しましょう。テストに移りましょう。

テスト

正しくインストールされているかどうかをテストするには、次の手順を試してください。

  1. Open Chrome DevTools、
  2. Applicationパネルに移動します
  3. Manifestタブに移動します
  4. ホーム画面に追加をクリックします。

URLを物に追加するかどうかを尋ねるプロンプトがブラウザの上部に表示されます（Chrome desktop）。

トラブルシューティング

テスト後に、コンソールに次のエラーが表示される場合：

一致するService Workerは検出されませんでした。ページをリロードするか、現在のページのサービスワーカーがマニフェストから開始URLも制御することを確認する必要がある場合があります。

次に、1。サービスワーカーが正常に機能し、エラーが発生していないこと、および2. start_urlは、Webサイトの実際のURL loadsと一致します。それ以外の場合、プロンプトを表示することはありません！

さらに、

ユーザー（およびあなたも）は（Android）Chromeメニューからホーム画面に手動で追加することもできます。プロンプトを待つ必要はありません！たくさん追加します！ホームスクリーンで毎日使用する傾向のあるウェブサイトで、バナーはほとんど表示されません！

*これらの要件は随時変更される可能性があることに注意してください（以前のように！）。 2017年に予定されている「ホーム画面に追加」の更新は既に発表されています こちら

**これらの要件は、ネイティブアプリのインストールプロンプトとは大きく異なることに注意してください。**

20
Extricate

manifest.jsonで十分なようです。また、@ Extricateによる上記のポイントは正確かつ完璧です。

それでは、次の質問はアプリにサービスワーカーを実装しましたか？
空のサービスワーカーファイルが機能することをどこかで読みましたが、サービスワーカーの空の実装を試みたとき、

 「サイトをインストールできません：ページがオフラインで動作しません」 

したがって、サービスワーカーがオフライン作業をサポートしていない場合、最新のchromeバージョンはAPP INSTALL BANNERSのA2HSプロンプトをサポートしていません。

Basic web app Prompt に移動して、Chromeのdevtoolsに移動し、[アプリケーション]タブに移動できます。そこでmanifest.jsonが見つかります。マニフェストファイルのLHSで、ホーム画面に追加を見ることができます。クリックすると、印刷されます

 「サイトをインストールできません：ページがオフラインで動作しません」 

同じためのPFAスクリーンショット

5
Parth Mistry

サービスワーカーのjsファイルに、次の1行のコードを追加します。

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