web-dev-qa-db-ja.com

PWAがポップアップを表示しないホーム画面に追加する

静的サイトにPWAを実装しました。サービスワーカーが正常に登録され、私のページも予想どおりオフラインで動作していますが、実際の問題はホーム画面

適切なアイコンでmanifest.jsonを含めましたが、まだホーム画面の追加がポップアップ表示されず、ホーム画面に追加をプッシュしようとしています検査済みからのみ、ポップアップを表示できます

この私のサイトのURL： https://www.savesoftinc.com/

マニフェストJSON：

{
 "name": "Save Soft",
 "short_name": "SaveSoft",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0EC3F7",
  "description": "IT Services & Solutions.",
 "icons": [
  {
   "src": "\/Android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/Android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/Android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/Android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/Android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/Android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/ms-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png",
   "density": "5.0"
  }
 ]
}

また、以下のコードを試して、Googleの提案に従ってバナーをポップアップします

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;
    });
});
window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

しかし、それはエラーを示しています：

キャッチされないReferenceError：btnAddが定義されていません

ref： https://developers.google.com/web/fundamentals/app-install-banners/

service-workerprogressive-web-apps
10
Harish Karthick

ホーム画面に追加（A2HS）自動ポップアップテストの最初のステップは、灯台監査ツールを使用することです。
PWA監査を実行し、表示されるまでそこで警告を修正する必要があります
---「ユーザーにWebアプリのインストールを促すことができます」

灯台監査ツールは、Chrome devツールのタブとして、またはChrome拡張機能として使用できます。
拡張機能には通常、最新の機能があります。

このメッセージが表示されたら、ChromeデスクトップおよびAndroid（Chrome＆Edge）で自動ポップアップメッセージをテストできます。
重要な注意事項
初めて表示した後、ポップアップを再度表示するには、おそらくブラウザのキャッシュを完全にクリアする必要があります。
Edge-ショートカットを削除します
Chromeデスクトップ-ここからアプリをアンインストールします：chrome：// apps /
Crome Android-アプリケーションのWebApkをアンインストールします

自動A2HSポップアップが機能することがわかったら、（必要に応じて）自動ポップアップをインターセプトして、ユーザーの煩わしさを軽減できます。ボタンを表示して、都合のよいときにA2HSを実行できることを知らせます。
ここで説明するとおり
https://developers.google.com/web/fundamentals/app-install-banners/

A2HSのテスター です。
自動ポップアップの代わりにボタンが表示されます。

12
Mathias

すべてのガイドラインは次の場所にあります： https://developers.google.com/web/fundamentals/app-install-banners/

PWA「ホーム画面に追加」バナーのポイントは次のとおりです

  1. Webアプリはまだインストールされていません。
  2. Service Workerとマニフェストファイルを追加します。サービスワーカーは、start_urlがスコープ内にあるディレクトリに配置する必要があります。

（例：「/ public/home」は「/」または「/ public /」の範囲内です）

。

  1. Manifest.jsonでは、prefer_related_applicationsがtrueに設定されていません
  2. manifest.jsonには次が含まれます。
    • short_nameまたはname、
    • アイコンには、192ピクセルと512ピクセルのサイズのアイコンが含まれている必要があります。
    • start_url、
    • ディスプレイは、フルスクリーン、スタンドアロン、または最小UIのいずれかでなければなりません。
  3. HTTPS経由で提供（サービスワーカーに必要）

  4. フェッチイベントハンドラーでサービスワーカーを登録しました。例えば.

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

  5. 現在、ユーザーは少なくとも30秒間ドメインと対話しています

  6. ルートJSファイルにService Workerをロードするコードが配置されます。

    function registerServiceWorker() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js') // .then(function(reg){ console.log("service worker registered") }).catch(function(err) { console.log(err) }); } else { console.log("Could not find serviceWorker in navigator") } } registerServiceWorker()

  7. HTMLページにマニフェストファイルが追加されます

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

  8. バナーは以前に却下されませんでした（ mini-info-bar のガイドに従って3か月間表示されません）。 Cookieをクリアして元に戻すことができます。

  9. IOSデバイスの場合、 Safari Web Content Guide ：に従ってHTMLページに設定されたアイコンを提供する必要があります。現在、「ホーム画面に追加」はSafariブラウザーでのみサポートされています。これを見つけるには、共有アイコンをクリックします。
1
sat20786

以下のコードを試してください。

let btnAdd = document.querySelector(".btnAdd"); // .btnAdd maybe id or class

カスタムプロンプトボタンに適用されます

btnAdd.style.display = "block";

0
vabi