機能強化

PWA のコンバージョンと使用率を高めるための改善点は数多くあります。

アプリのショートカット

アプリのショートカットは、マニフェストに記述された、PWA へのディープリンクの静的リストです。ウェブアプリ マニフェスト仕様。PWA のさまざまな部分や機能へのショートカットのリストを定義できるため、頻繁にアクセスするセクションへのナビゲーションを高速化できます。

アプリのショートカットは、ほとんどのデスクトップ オペレーティング システムと WebAPK を使用した Android で利用できます。ショートカットは、次の画像のように、ホーム画面、ドック、タスクバーのアプリのアイコンのコンテキスト メニューに表示されます。

Android と macOS のアプリ ショートカット。

このメニューにアクセスするには、PWA のアイコンを右クリックするか長押しする必要があります。

ショートカットは、マニフェストの shortcuts メンバーで定義します。次のプロパティを持つメンバーの配列を受け取ります。

name
ユーザーに表示されるテキスト(通常はコンテキスト メニューに表示されます)。
url
ユーザーがこのショートカットから PWA を起動したときに読み込む URL。PWA スコープ内の URL で、name または short_name で記述されている機能にディープリンクする必要があります。
short_name
(省略可)name フィールドの値をすべて表示するのに十分なスペースがない場合に使用される短い名前。
description
(省略可)このショートカットの機能の説明
icons
(省略可)srctypesizes、省略可の 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.standaloneundefined の場合、ユーザーが iPadOS または iOS デバイスを使用していないことを意味します。
  • navigator.standalonefalse の場合、ユーザーがブラウザで PWA を開いて使用していることを意味します。
  • navigator.standalonetrue の場合、ユーザーがホーム画面から PWA を開き、スタンドアロンの PWA エクスペリエンスを利用していることを意味します。

全画面表示のサポート

iOS と iPad の Safari では、PWA のディスプレイ モードとして display: standalone のみがサポートされています。

次の画像は、左側がテーマカラーを使用したデフォルトのスタンドアロン デザインで、右側がステータスバーの背後にコンテンツをレンダリングできる全画面表示の iOS モードの PWA です。

スタンドアロンのデフォルトの動作(左)と iOS の全画面表示(右)。

HTML に次のタグを追加すると、iOS と iPadOS の PWA が全画面モードになりますが、Android とは異なります。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

このモードでは、デバイスのステータスバー(時計、バッテリー残量、通知アイコンが表示される上部)は引き続き表示されますが、コンテンツの上にレンダリングされ、背景は透明になります。

このモードを使用する場合は、デザインに注意してください。オペレーティング システムはアイコンを常に白でレンダリングするため、画面上部の背景は常に明るいコンテンツとコントラストを付ける必要があります。また、アプリ設計の章で説明したように、CSS 環境変数を使用してセーフエリアにコンテンツをレンダリングすることも重要です。

デフォルトでは、ビューポートの上部 0 ピクセルはステータスバーの下にあります。black-translucent メタタグを追加すると、ビューポートの上部 0 ピクセルは画面の物理的な上部と一致します。

設置の信頼性

iOS 15.4 より前の iOS と iPadOS では、ページの読み込み時ではなく、ユーザーがブラウザ内の共有アイコンを使用して共有シートを開いたときにのみ、マニフェスト ファイルがネットワークから読み込まれます。そのため、その時点でブラウザはウェブサイトが PWA かどうかをチェックしません。このため、マニフェストを読み込めなかったり、読み込みに時間がかかりすぎてブラウザがマニフェストを無視したりする可能性があります。

ブラウザがマニフェストを時間内に読み込めない場合、[ホーム画面に追加] を押すとホーム画面にアイコンが表示されますが、アプリとして機能せず、ブラウザのタブへのショートカットとして機能するだけです。

リソース