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 デバイスごとに異なるイメージが必要になります。横向きや縦向きの開口部や、マルチタスク モード（画面の 1/3、1/2、2/3 など）での PWA のレンダリングなど、iPad ではさらに多くの状況に対応する必要があります。
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 Asset Generator はその一例です。 - クライアントサイド ジェネレータ。現在のデバイスのタイプと画面サイズに基づいて、
<link>で挿入された要素に、起動画像の 1 つ以上の base64 バージョンを埋め込むことができる 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 では、PWA のアイコンの表示モードとして display: standalone のみがサポートされています。display: fullscreen は Android デバイスでサポートされていませんが、標準以外のメタタグを使用して 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 より前の Safari では、ユーザーが共有シートを開いたときにのみ（ブラウザ内の共有アイコンを使用して）ネットワークからマニフェスト ファイルが読み込まれます。ページの読み込み時には読み込まれません。そのため、Safari はウェブサイトが PWA であるかどうかをその時点まで確認しません。そのため、マニフェストを読み込めなかったり、時間がかかりすぎたりする場合があります。その場合、Safari はマニフェストを無視します。
Safari でマニフェストを時間どおりに読み込めない場合、[ホーム画面に追加] を押すとホーム画面にアイコンが表示されるが、アプリのエクスペリエンスは提供されず、単に Safari タブへのショートカットになるだけです。