PWA の変換と使用を改善できる多くの拡張機能があります。
アプリのショートカット
アプリ ショートカットは、PWA へのディープリンクの静的リストであり、マニフェスト内に記述されます。ウェブアプリ マニフェストの仕様PWA のさまざまな部分や機能へのショートカットのリストを定義し、頻繁にアクセスするセクションにすばやく移動できます。
アプリのショートカットは、ほとんどのデスクトップ オペレーティング システムと Android で WebAPK を使用して利用できます。次の画像のように、ホーム画面、ドック、タスクバーのアプリアイコン上のコンテキスト メニューに表示されます。
このメニューにアクセスするには、PWA のアイコンを右クリックまたは長押しする必要があります。
で確認できます。ショートカットは、マニフェストの shortcuts メンバーで定義されます。これは、次のプロパティを持つメンバーの配列を受け取ります。
name- ユーザーに表示されるテキスト。通常はコンテキスト メニューに表示されます。
url- ユーザーがこのショートカットから PWA を起動したときに PWA が読み込まれる URL。これは PWA スコープ内の URL とし、
nameまたはshort_nameに記述されている機能へのディープリンクである必要があります。 short_name- （省略可）
nameフィールドの全体値を表示するのに十分なスペースがない場合に使用される短い名前。 description- （省略可）このショートカットの説明
icons- （省略可）
src、type、sizes、オプションのpurposeフィールドを含むアイコン オブジェクトの配列。ショートカットを表す画像を記述します。
アプリのショートカットは、ベスト エフォート機能として扱う必要があります。つまり、これらのショートカットが一貫して表示されるとは限りません。また、たとえ表示されたとしても、ショートカットがいくつ表示されるか、プラットフォームがブラウザの裁量でアイコンを無視するかどうかはわかりません。プラットフォームごとの説明は範囲外ですが、Android とパソコンでの動作については以下で説明します。この不確実性に対処する最善の方法は、商品を優先度順に並べることです。
で確認できます。次のコードサンプルでは、Chrome を使用して Android にアプリをインストールする場合、または Edge または Chrome を使用してパソコンにアプリをインストールした場合に、さまざまなアプリ ショートカットを定義しています。
iOS と iPadOS
PWA を公開する際に、iOS または iPadOS の Safari のユーザー エクスペリエンスを向上させる機能が強化されています。
スプラッシュ画面
ウェブアプリ マニフェストの章で説明したように、Android ではマニフェストの値に基づいてスプラッシュ画面が自動的に作成されます。これは、iOS と iPadOS には当てはまりません。このようなデバイスでは、HTML でスプラッシュ画面を <link> 要素を使用して静止画像として定義する必要があります。
これらのイメージは Apple デバイスでは起動イメージと呼ばれ、次のように rel プロパティと apple-touch-startup-image 値を使用します。
<link rel="apple-touch-startup-image" href="ios-startup.png">
問題は、起動イメージのウィンドウ サイズが PWA の起動時に表示されるウィンドウ サイズと正確に一致する必要があることです。そのため、iOS デバイスと iPadOS デバイスによって必要な画像が異なります。横向き/縦向きの開口部や、マルチタスク モードでの PWA のレンダリング（画面の 1/3、1/2、2/3 など）など、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 アセット生成ツールがあります。 - クライアントサイド生成ツール。現在のデバイスのタイプと画面サイズに基づいて、1 つ以上の base64 バージョンの起動画像を
<link>挿入された要素に埋め込むことができる JavaScript ツール。メモリ内キャンバスを使用して画像をレンダリングし、PNG ファイルのdata:URI に変換できます。PWA 互換ライブラリは、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 環境変数を使用して、セーフエリアにコンテンツをレンダリングすることが重要です（アプリ設計のチャプターを参照）。
インストールの信頼性
15.4 より前の iOS および iPadOS 上の Safari では、ユーザーがブラウザ内の共有アイコンを使用して共有シートを開いたときにのみ、ネットワークからマニフェスト ファイルが読み込まれます。そのため、Safari ではその時点までウェブサイトが PWA かどうかが確認されないため、マニフェストを読み込めなかったり時間がかかりすぎたりして Safari で無視されることがあります。
Safari でマニフェストが時間内に読み込めない場合は、[ホーム画面に追加] を押してくださいホーム画面にアイコンを配置するが、アプリのエクスペリエンスは提供しない。単に Safari のタブへのショートカットになります。