Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • Lighthouse によるウェブアプリマニフェスト監査が失敗する原因
  • PWA をインストール可能にする方法
  • PWA がインストール可能であることを確認する方法
    • Chrome の場合
  • リソース

ウェブアプリマニフェストがインストール可能性の要件を満たしていない

May 4, 2019 — 更新済み Sep 19, 2019
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: PWA の監査
このページ内
  • Lighthouse によるウェブアプリマニフェスト監査が失敗する原因
  • PWA をインストール可能にする方法
  • PWA がインストール可能であることを確認する方法
    • Chrome の場合
  • リソース

インストール可能性は、プログレッシブウェブアプリ (PWA) の基本的な要件です。ユーザーに PWA のインストールを促すことで、ユーザーが PWA をホーム画面に追加できるようにします。ユーザーは、ホーム画面に追加するアプリをそれ以外のアプリよりも頻繁に利用します。

ウェブアプリマニフェストには、アプリをインストール可能にするための重要な情報が含まれています。

Lighthouse によるウェブアプリマニフェスト監査が失敗する原因 #

Lighthouse は、インストール可能性の最低要件を満たすウェブアプリマニフェストがないページをフラグします。

ユーザーがホーム画面からウェブアプリをインストールできないことを示す Lighthouse 監査

以下のプロパティがないページのマニフェストは、監査は失敗します。

  • short_name または name プロパティ
  • 192x192 ピクセルと 512x512 ピクセルのアイコンを含む icons プロパティ
  • start_url プロパティ
  • fullscreen、standalone、または minimal-ui に設定された display プロパティ
  • true 以外の値に設定された prefer_related_applications プロパティ。

注意

アプリをインストール可能にするには、ウェブアプリマニフェストが必要ですが、それだけでは不十分です。インストール可能性の全要件を満たす方法については、Discover what it takes to be installable (インストール可能にする方法について) と題した記事を参照してください。
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

PWA をインストール可能にする方法 #

上述した要件を満たすマニフェストがアプリにあることを確認してください。 PWA の作成について詳しくは、Installable コレクションを参照してください。

PWA がインストール可能であることを確認する方法 #

Chrome の場合 #

アプリがインストール可能性の最低要件を満たしている場合、Chrome はbeforeinstallprompt イベントを発生させます。このイベントを使用して、ユーザーに PWA のインストールを促すことができます。

お試しください

Chrome でアプリをインストール可能にする方法については、コードラボの Make it installable で紹介されています。

他のブラウザの場合 #

他のブラウザは、インストールの条件および beforeinstallprompt イベントをトリガーする条件が異なります。完全な詳細については、それぞれのサイトを確認してください。

  • Edge
  • Firefox
  • Opera
  • Samsung Internet
  • UC Browser

リソース #

  • Web app manifest does not meet the installability requirements (ウェブアプリマニフェストがインストール可能性の要件を満たしていない) 監査のソースコード
  • Add a web app manifest (ウェブアプリマニフェストを追加する)
  • Discover what it takes to be installable (インストール可能にする方法について)
  • Web App Manifest (ウェブアプリマニフェスト)
  • Does not use HTTPS (HTTPS を使用していない)
最終更新: Sep 19, 2019 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Make it installable
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.