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 とパソコンでの動作の概要を以下に示します。この不確実性に対処する最善の方法は、優先度でアイテムを並べ替えることです。
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 では、横向き/縦向きでの起動や、マルチタスク モードでの PWA のレンダリング（画面の 1/3、1/2、2/3 など）など、より多くの状況に対応する必要があります。
iOS と iPadOS の画面サイズの最新リストは、Apple Human Interface Guidelines で確認できます。
起動イメージのさまざまなバージョンは、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 Compat ライブラリは、Android の一般的な起動画面を複製することで、これを実現する使いやすいクライアントサイド ライブラリです。
Apple モバイル プラットフォームで PWA を検出する
PWA ではプログレッシブ エンハンスメントと機能検出を使用する必要がありますが、Apple モバイル プラットフォームでユーザーが PWA を使用しているかどうかを把握する必要があるエッジケースも存在します。たとえば、インストール手順を提供する場合や、iOS 専用のプラットフォーム固有のアプリへのリンクを追加する場合などです。
ユーザー エージェント文字列の読み取りを回避するには、navigator オブジェクトの standalone プロパティを確認します。これは標準外のプロパティであり、iOS と iPadOS の WebKit エンジンでのみ使用できます。
navigator.standaloneがundefinedの場合、ユーザーは iPadOS または iOS デバイスを使用していません。navigator.standaloneがfalseの場合、ユーザーはブラウザで PWA を開いて使用しています。navigator.standaloneがtrueの場合、ユーザーがホーム画面から PWA を開き、スタンドアロン PWA エクスペリエンスを利用していることを意味します。
全画面表示のサポート
iOS と iPad の Safari では、display: standalone のみが PWA の表示モードとしてサポートされています。
次の画像では、左側にテーマカラーを使用したデフォルトのスタンドアロン デザインが表示され、右側にはステータスバーの背後にコンテンツをレンダリングできる全画面表示の iOS モードの PWA が表示されています。
HTML に次のタグを追加すると、iOS と iPadOS の PWA は全画面モードになりますが、Android とは異なります。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
このモードでは、デバイスのステータスバー（時計、バッテリー残量、通知アイコンが表示される上部）は引き続き表示されますが、コンテンツの上に透明な背景でレンダリングされます。
このモードを使用する場合は、オペレーティング システムがアイコンを常に白でレンダリングするため、画面上部の背景と明るいコンテンツのコントラストを常に調整する必要があることに注意して設計してください。また、アプリのデザインの章で説明したように、CSS 環境変数を使用してセーフエリアにコンテンツをレンダリングすることも重要です。
インストールの信頼性
iOS および iPadOS 15.4 より前のバージョンでは、マニフェスト ファイルは、ユーザーがブラウザ内の共有アイコンを使用して共有シートを開いたときにのみネットワークから読み込まれ、ページが読み込まれたときには読み込まれません。そのため、ブラウザは、その時点までウェブサイトが PWA であるかどうかを確認しません。これにより、マニフェストを読み込めない、または読み込みに時間がかかりすぎるため、ブラウザが無視する状況が発生する可能性があります。
ブラウザがマニフェストを時間内に読み込めない場合、[ホーム画面に追加] を押すと、ホーム画面にアイコンが配置されますが、アプリ エクスペリエンスは提供されません。これは単なるブラウザタブへのショートカットになります。