PWA のコンバージョンを改善し、使用を促進できる多くの拡張機能があります。
アプリのショートカット
アプリ ショートカットは、PWA へのディープリンクの静的リストであり、マニフェスト内に記述されます。ウェブアプリ マニフェスト仕様。PWA のさまざまな部分や機能へのショートカットのリストを定義できるため、頻繁にアクセスするセクションへのナビゲーションを高速化できます。
アプリのショートカットは、ほとんどのデスクトップ オペレーティング システムと WebAPK を使用した Android で利用できます。ショートカットは、次の画像のように、ホーム画面、ドック、タスクバーのアプリのアイコンのコンテキスト メニューに表示されます。
このメニューにアクセスするには、PWA のアイコンを右クリックするか長押しする必要があります。
ショートカットは、マニフェストの shortcuts メンバーで定義されます。次のプロパティを持つメンバーの配列を受け取ります。
name- ユーザーに表示されるテキスト。通常はコンテキスト メニューに表示されます。
url- ユーザーがこのショートカットから PWA を起動したときに読み込む URL。PWA スコープ内の URL で、
nameまたはshort_nameで記述されている機能にディープリンクする必要があります。 short_name- （省略可）
nameフィールドの値をすべて表示するのに十分なスペースがない場合に使用される短い名前。 description- （省略可）このショートカットの動作の説明
icons- （省略可）
src、type、sizes、省略可のpurposeフィールドを含むアイコン オブジェクトの配列。ショートカットを表す画像を記述します。
アプリのショートカットは、ベスト エフォート機能として扱う必要があります。つまり、これらのショートカットが常に表示されることを前提にすることはできません。また、表示された場合でも、表示されるショートカットの数や、ブラウザの判断によりプラットフォームがアイコンを無視するかどうかはわかりません。プラットフォームごとに詳細を説明することはここでは行いませんが、Android とパソコンでの動作について簡単に説明します。この不確実性に対処する最善の方法は、アイテムを優先度順に並べ替えることです。
次のコードサンプルでは、Android に Chrome でアプリをインストールする場合や、パソコンに Edge または Chrome でアプリをインストールする場合に試すことができるさまざまなアプリ ショートカットを定義しています。
iOS と iPadOS
PWA を公開する際に、iOS または iPadOS の Safari のユーザー エクスペリエンスを向上させる機能が強化されています。
スプラッシュ画面
ウェブアプリ マニフェストの章で説明したように、Android では、マニフェストの値に基づいてスプラッシュ画面が自動的に作成されます。iOS と iPadOS ではそうではありません。このようなデバイスでは、<link> 要素を使用して、HTML でスプラッシュ画面を静的画像として定義する必要があります。
これらの画像は Apple デバイスの起動イメージと呼ばれ、次のように apple-touch-startup-image 値を持つ rel プロパティを使用します。
<link rel="apple-touch-startup-image" href="ios-startup.png">
問題は、起動イメージのウィンドウ サイズが PWA の起動時に表示されるウィンドウ サイズと正確に一致する必要があることです。そのため、iOS デバイスと iPadOS デバイスでは異なる画像が必要になります。iPad では、横向き / 縦向きの起動や、マルチタスク モード（画面の 1/3、1/2、2/3 など）での PWA のレンダリングなど、より多くの状況に対応する必要があります。
iOS と iPadOS の画面サイズの最新のリストについては、Apple ヒューマン インターフェース ガイドラインをご覧ください。
media 属性内のメディアクエリで、さまざまなバージョンの起動イメージを設定できます。
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
iOS 起動イメージの設計パターン
起動イメージの定義は手間がかかるため、自動生成と構成のためのツールがいくつか用意されています。
- 静的生成はビルドシステムと統合され、すべての PNG 静的画像が作成され、ドキュメントに挿入する
<link>要素を含む HTML コードが生成されます。PWA アセット ジェネレータは、そのようなツールの例です。 - クライアントサイド ジェネレータ: 現在のデバイスのタイプと画面サイズに基づいて、起動イメージの 1 つ以上の Base64 バージョンを
<link>挿入要素に埋め込むことができる JavaScript ツール。インメモリ キャンバスを使用して画像をレンダリングし、PNG ファイルを使用してdata:URI に変換できます。PWA 互換性ライブラリは、Android の一般的な起動画面のクローンを作成することで、この処理を行う使いやすいクライアントサイド ライブラリです。
Apple モバイル プラットフォームでの PWA の検出
PWA ではプログレッシブ エンハンスメントと機能検出を使用する必要がありますが、インストール手順を提供する、iOS 専用のプラットフォーム固有のアプリへのリンクを追加するなど、ユーザーが Apple モバイル プラットフォームで PWA を使用しているかどうかを把握する必要があるエッジケースもあります。
ユーザー エージェント文字列を読み取らないようにするには、navigator オブジェクトの standalone プロパティを確認します。これは標準以外のプロパティであり、iOS と iPadOS の WebKit エンジンでのみ使用できます。
navigator.standaloneがundefinedの場合、ユーザーが iPadOS または iOS デバイスを使用していないことを意味します。navigator.standaloneがfalseの場合、ユーザーがブラウザで PWA を開いて使用していることを意味します。navigator.standaloneがtrueの場合、ユーザーがホーム画面から PWA を開き、スタンドアロンの PWA エクスペリエンスを利用していることを意味します。
全画面表示のサポート
iOS と iPad の Safari では、PWA のディスプレイ モードとして display: standalone のみがサポートされています。
次の画像では、左側にはテーマカラーを使用したデフォルトのスタンドアロン デザインが、右側はステータスバーの背後にコンテンツをレンダリングできる全画面 iOS モードの PWA です。
HTML に次のタグを追加すると、iOS と iPadOS の PWA が全画面モードになりますが、Android とは異なります。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
このモードでは、デバイスのステータスバー（時計、バッテリー残量、通知アイコンが表示される上部）は引き続き表示されますが、コンテンツの上にレンダリングされ、背景は透明になります。
このモードを使用する場合は、デザインに注意が必要です。オペレーティング システムはアイコンを常に白でレンダリングするため、画面上部の背景は常に明るいコンテンツとコントラストを付ける必要があります。また、CSS 環境変数を使用して、セーフエリアにコンテンツをレンダリングすることが重要です（アプリ設計のチャプターを参照）。
設置の信頼性
iOS 15.4 より前の iOS と iPadOS では、ページの読み込み時ではなく、ユーザーがブラウザ内の共有アイコンを使用して共有シートを開いたときにのみ、マニフェスト ファイルがネットワークから読み込まれます。そのためブラウザは、その時点までウェブサイトが PWA かどうかをチェックしません。そのため、マニフェストを読み込めない、または時間がかかりすぎて、ブラウザが無視するという状況が生じる可能性があります。
ブラウザがマニフェストを時間内に読み込めなかった場合、[ホーム画面に追加] を押すとホーム画面にアイコンが表示されますが、アプリとして機能せず、ブラウザのタブへのショートカットとして機能するだけです。