5.12.5 プログレッシブWebアプリケーション属性の構成

「プログレッシブWebアプリケーション」ページを使用して、新規と既存の両方のプログレッシブWebアプリケーション・アプリケーションに対して属性を構成します。

ヒント:

プログレッシブWebアプリケーション属性は、「アプリケーション定義」、「プロパティ」、「簡易URL」属性が「オン」の場合にのみ表示されます。

• 「プログレッシブWebアプリケーション」ページへのアクセス
  「プログレッシブWebアプリケーション」ページには、アプリケーションのホームページからアクセスします。
• プログレッシブWebアプリケーション・ページ
  プログレッシブWebアプリケーション・ページは、「一般」、「インストール性」、「プッシュ通知」および「サービス・ワーカー構成」の各セクションに分かれています。

関連項目:

プログレッシブWebアプリケーション(PWA)の作成

5.12.5.1 「プログレッシブWebアプリケーション」ページへのアクセス

「プログレッシブWebアプリケーション」ページには、アプリケーションのホームページからアクセスします。

「プログレッシブWebアプリケーション」ページにアクセスするには:

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。

   アプリケーションのホームページが表示されます。

3. アプリケーションのホームページから、「プログレッシブWebアプリケーション」ページに、次の2通りの方法でアクセスできます。
   • 「アプリケーション定義の編集」ボタン:

     1. アプリケーション名の右側にある「アプリケーション定義の編集」をクリックします。

     2. 「プログレッシブWebアプリケーション」タブをクリックします。

   • 「共有コンポーネント」からの場合:

     1. 「共有コンポーネント」をクリックします。

     2. 「ユーザー・インタフェース」で、「プログレッシブWebアプリケーション」をクリックします。

   「プログレッシブWebアプリケーション」ページが表示されます。

4. 対象となる属性を編集します。
5. 「変更の適用」をクリックして、変更を保存します。

5.12.5.2 「プログレッシブWebアプリケーション」ページ

「プログレッシブWebアプリケーション」ページは、「一般」、「インストール性」「プッシュ通知」および「サービス・ワーカー構成」の各セクションに分かれています。

ヒント:

このページの属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

• 一般
  
• インストール性
  
• プッシュ通知
  
• サービス・ワーカー構成
  

5.12.5.2.1 一般

ヒント:

プログレッシブWebアプリケーション属性は、「アプリケーション定義」、「プロパティ」、「簡易URL」属性が「オン」の場合にのみ表示されます。「プロパティ」の簡易URLを参照してください。

一般属性は、プログレッシブWebアプリケーション・アプリケーションの構成を有効または無効にする場合に使用します。

属性	説明	さらに学習するには
一般	「プログレッシブWebアプリケーション」機能を有効にします。 このオプションを有効にすると、次のことが可能になります: 拡張キャッシュを使用して静的ファイルをより効率的に処理します。 宣言的プログレッシブWebアプリケーション設定の表示を有効にします。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
インストール可能	「プログレッシブWebアプリケーションの有効化」が「オン」の場合にのみ表示されます。 プログレッシブWebアプリケーションをデバイスにインストールできます。プログレッシブWebアプリケーションをインストールすると、ネイティブ・アプリケーションと同様にデバイスのホーム画面にアイコンが追加されます。このオプションを有効にすると、次のことが可能になります: 新しいナビゲーション・バー・エントリInstall Appを追加します。 ユーザーは、APEXアプリケーションをデバイスにインストールできるようになります。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください

5.12.5.2.2 インストール性

ヒント:

「インストール性」属性は、「プログレッシブWebアプリケーション」の一般属性である「プログレッシブWebアプリケーションの有効化」および「インストール可能」が「オン」の場合にのみ表示されます。

「インストール性」属性は、表示、画面の向き、テーマ・カラー、背景色、IOSステータス・バー・スタイル、アプリケーションの説明およびカスタム・マニフェストに関するプログレッシブWebアプリケーション(PWA)の属性を構成したり、スクリーンショットやショートカットをアップロードするために使用します。

属性	説明	さらに学習するには
表示	アプリケーションの優先表示モードを選択します。このオプションは、ユーザーに表示されるブラウザUIがどの程度かを制御します。オプションは次のとおりです。 全画面 - ブラウザUIなしでPWAを開きます。このオプションは、画面またはウィンドウの全体を使用します。 スタンドアロン- スタンドアロン・アプリケーションのように見えるようPWAを開きます。アプリケーションは、ブラウザとは別の異なるウィンドウで実行されます。URLバーやボタンなどの標準のブラウザUIコンポーネントは表示されません。 最小のUI - スタンドアロンと同様ですが、ブラウザの制御ナビゲーション・ボタン(「戻る」、「リフレッシュ」など)は除きます。 ブラウザ - 通常のブラウザUIでPWAを開きます。 ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。詳細は、https://web.dev/add-manifest//を参照してください。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
画面の向き	このプログレッシブWebアプリケーションを使用するときに優先される画面の向きを選択します。このオプションは主にモバイル・デバイスに適用されます。 ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
テーマ・カラー	アプリケーションのデフォルトのテーマ・カラーを定義します。 この属性は、オペレーティング・システムがアプリケーションを表示する方法に影響します(たとえば、Androidのタスク・スイッチャの場合、このテーマ・カラーで囲まれます)。 ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
背景色	背景色を選択します。 バックグラウンド・カラーは、スタイルシートがロードされる前にアプリケーションに表示するプレースホルダのバックグラウンド・カラーを定義します。したがって、バックグラウンド・カラーは、Webアプリケーションの起動とアプリケーション・コンテンツのロードのスムーズな移行のために、テーマ本体のバックグラウンド・カラーと一致する必要があります。 これは、オペレーティング・システムがアプリケーションを表示する方法に影響します(たとえば、Androidのタスク・スイッチャの場合、このテーマ・カラーで囲まれます)。 ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
iOSステータス・バー・スタイル	「iOSステータス・バー・スタイル」属性は、iOSデバイスのホーム画面に追加されるときにWebアプリケーションのステータス・バーの外観を制御するメタ・タグとしてページにレンダリングされます。オプションは次のとおりです。 デフォルト - これはデフォルト値であり、通常の方法でステータス・バーを表示します。 黒 - この値はステータス・バーを黒にします。 半透明 - この値によってステータス・バーが半透明になり、コンテンツがその背後に表示されます。 ノート: この属性はiOSデバイスでのみ使用されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
アプリケーションの説明	アプリケーションの動作について説明します。この属性は、アプリケーションのインストールを求められたときに、ユーザーに詳細情報を提供する場合に使用します。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
カスタム・マニフェスト	Webアプリケーション・マニフェスト・ファイルの追加のJSONプロパティを格納するために使用されます。ここで見つかったプロパティは、既存のプロパティをオーバーライドするか、新しいプロパティを追加することで、前述の宣言オプションを拡張するために使用されます。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください カスタム・マニフェストの構築の詳細は、Webアプリケーション・マニフェストの仕様(https://www.w3.org/TR/appmanifest/)を参照してください。
スクリーンショット	プログレッシブWebアプリケーションのインストールをユーザーに促すときにプロモーション目的でスクリーンショットを含めます。「スクリーンショットの追加」をクリックして、プロモーション・スクリーンショットをアップロードします。 最良の結果を得るために、すべてのスクリーンショットのアスペクト比を同じにすることをお薦めします。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください
ショートカット	ノート: APEXアプリケーションでは、「セッションを再結合」が有効になっている場合にのみPWAショートカットを使用できます。ショートカットを構成する前に、「パブリック・セッションに対する有効化」または「すべてのセッションに対する有効化」をクリックします。詳細は、「セッション管理」を参照してください。 ショートカットを使用すると、インストールされたPWAのユーザーは特定のページにすばやくアクセスできます。タッチ対応デバイスについては、ホーム画面のアプリケーション・アイコンを長押しすると、ショートカットにアクセスできます。他のデバイスについては、タスク・バーのアプリケーション・アイコンを右クリックすると、ショートカットにアクセスできます。 「ショートカットの追加」をクリックして、特定のページにすばやくアクセスするためのショートカットをユーザーに提供します。	「プログレッシブWebアプリケーション(PWA)の作成」を参照してください

5.12.5.2.3 プッシュ通知

Webプッシュ通知を使用すると、Webアプリケーションは、ユーザーが現在Webサイトにいない場合でも、ユーザーのデバイスに通知を送信できます。通知はユーザーのデスクトップまたはモバイル・デバイスに送信でき、Webサイト上の新しいコンテンツまたはイベントにユーザーにアラートを送信したり、Webサイトでユーザーを再び引き寄せるために使用できます。

このオプションを有効にすると、次のことが可能になります:

• 新しいナビゲーション・バー・エントリを追加します: ユーザー設定
• ユーザーはプッシュ通知をサブスクライブおよびサブスクライブ解除できます。
• サブスクライブすると、ユーザーはAPEXアプリケーションからプッシュ通知を受信できます。

「プッシュ通知の有効化」が有効になっている場合、次の属性が表示されます:

• 資格証明 - 認証のための資格証明を選択します。資格証明を編集するには、「共有コンポーネント」、「資格証明」に移動します。

  プッシュ通知をセキュアに設定するには、資格証明が必要です。公開キーと秘密キーのペアが、それぞれ、ユーザーがクライアント側のプッシュ通知をサブスクライブしたり、サーバーがサブスクライバに通知を送信できるようにするために使用されます。

• 設定ページ - このアプリケーションにすでにプッシュ通知機能ページがある場合は、ここにページ番号が表示されます。アプリケーションにプッシュ通知機能ページがない場合は、機能ページを追加できることが表示されます。
• 連絡先のEメール - プッシュ通知サービス・プロバイダ(Google、Mozilla、Appleなど)がアプリケーションの所有者に連絡する場合、連絡する電子メール・アドレスを入力します。1人の個人に依存しないように、グループ電子メールを使用することをお薦めします。

5.12.5.2.4 サービス・ワーカー構成

サービス・ワーカー構成属性は、サービス・ワーカーを構成する場合に使用します。サービス・ワーカーは、アプリケーションが使用中でない場合でもコードを実行できるJavaScriptファイルです。

サービス・ワーカーは、リソースのフェッチや通知の処理などのイベントをリスニングできます。サービス・ワーカーはフックを使用するか、イベントを完全に置換することで変更できます。

サービス・ワーカーのオプションは、次のとおりです。

• デフォルト: 次の方法で、APEXエンジンによって生成されます。

  • サービス・ワーカーをインストールしてアクティブにします

  • キャッシュが存在する場合、キャッシュからリソースを提供します

  • それ以外の場合は、ネットワークから提供し、リソースをキャッシュに挿入します。

  • ネットワークに障害が発生した場合、オフライン・ページを提供します

• フックの構成 - プレースホルダをサービス・ワーカー・コードに入力して独自のものを追加します。フックの場所は、Oracle APEXによって指定されます。

  さらに学習するには、フィールドレベル・ヘルプを参照してください。

• ファイルURL - サービス・ワーカー・フック・インタフェースが含まれるファイルへのURL参照を指定します。これは、複数のアプリケーション間でサービス・ワーカー・フックを共有する場合に便利です。ファイル参照を使用する場合は、インタフェース・アーキテクチャに適切に従うようにしてください。そうしないと、サービス・ワーカーは実行時に障害が発生します。

  ファイル参照URLを使用して、サービス・ワーカー・フック・インタフェースが含まれるファイルへのURL参照を指定します。これは、複数のアプリケーション間でサービス・ワーカー・フックを共有する場合に便利です。ファイル参照を使用する場合は、インタフェース・アーキテクチャに適切に従うようにしてください。そうしないと、サービス・ワーカーは実行時に障害が発生します。インタフェース構造を表示するには、この属性のフィールドレベル・ヘルプを参照してください。