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

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

プログレッシブWebアプリケーション(PWA)の機能および要件について説明します。

プログレッシブWebアプリケーションのサポートについて
プログレッシブWebアプリケーション(PWA)は、最新のWeb APIを利用してネイティブ・アプリケーションのようなルック・アンド・フィールを実現します。
プログレッシブWebアプリケーションの作成
アプリケーションの作成ウィザードを実行し、「プログレッシブWebアプリケーションのインストール」機能を有効にして、プログレッシブWebアプリケーションを作成します。
プログレッシブWebアプリケーション属性の構成
新規と既存の両方のプログレッシブWebアプリケーション・アプリケーションに対して、プログレッシブWebアプリケーション属性を構成します。

親トピック: モバイル・デバイス用のアプリケーションの作成

5.8.2.1 プログレッシブWebアプリケーションのサポートについて

プログレッシブWebアプリケーション(PWA)は、最新のWeb APIを利用してネイティブ・アプリケーションのようなルック・アンド・フィールを実現します。

開発者は、アプリケーションの作成ウィザードを使用して新しいアプリケーションを作成するときに、または既存のアプリケーションの属性を編集することで、PWAを作成できます。

プログレッシブWebアプリケーションの要件

この機能を使用するための要件は、次のとおりです。

Oracle APEXアプリケーションは、保護されたHTTPS環境またはローカルホストを介して提供される必要があります。保護されていない環境を使用している場合、PWA機能はレンダリングされません
アプリケーションの「定義」、「プロパティ」、「簡易URL」属性は「オン」である必要があります。「アプリケーション定義ページへのアクセス」を参照してください。

プログレッシブWebアプリケーションについて

PWA機能を有効にすると、次のようになります。

プログレッシブWebアプリケーション(PWA)としてアプリケーションをインストールする機能を追加します。
「アプリケーションのインストール」という新しいナビゲーション・バー・エントリをアプリケーションに追加します。
モバイル・デバイスでのページ・ロード速度を最適化します。静的ファイル(APEXコア・ファイルおよびアプリケーション・ファイル)の新しいブラウザ・キャッシュ・アーキテクチャを使用して、ページ・ロードのレンダリング時間を短縮します。
ユーザーは、アプリケーションをデバイスにインストールできるようになります。
ユーザーがオフラインでネットワークをリクエストできない場合に、カスタマイズ可能なオフライン・ページを提供します。「翻訳が必要なプログレッシブWebアプリケーション(PWA)メッセージ」を参照してください。
完全にカスタマイズ可能なPWAエクスペリエンスを実現するために、サービス・ワーカー・コードへのフックをサポートします。

新しいPWAの作成

新しいアプリケーションの場合、アプリケーションの作成ウィザードで「プログレッシブWebアプリケーションのインストール」機能を有効にしてからプログレッシブWebアプリケーション属性を構成することで、PWAを作成できます。

既存のアプリケーションのPWA化

既存のアプリケーションをPWAにするには、次を実行する必要があります。

「アプリケーション定義」の「プロパティ」セクションで、「簡易URL」属性が「オン」であることを確認します。
「プログレッシブWebアプリケーションの有効化」属性を有効にしてから、残りのプログレッシブWebアプリケーション属性を構成します。

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

アプリケーションの作成ウィザードを実行し、「プログレッシブWebアプリケーションのインストール」機能を有効にして、プログレッシブWebアプリケーションを作成します。

ヒント:

モバイル用レポートおよびフォームを含めるには、アプリケーションを作成してページを追加します。「モバイル用フォーム」を参照してください。

「プログレッシブWebアプリケーション」機能を有効にして新しいアプリケーションを作成するには:

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

ウィザードによって、アプリケーションの作成方法を選択するよう求められます。

ヒント:
使用可能なすべてのオプションの詳細は、「アプリケーションの作成メソッドの選択」を参照してください。
「アプリケーションの作成ウィザードの使用」をクリックします。

アプリケーションの作成ページが表示されます。
「名前」で、開発者がアプリケーションを識別するための名前を入力します。
ページを追加するには、「ページの追加」をクリックし、目的のページ・タイプを選択します。ユーザー・インタフェースは、選択したページ・タイプによって異なります。

ヒント:
ページの作成ウィザードでは、多数のモバイル用レポートとフォームの作成がサポートされています。「モバイル用フォーム」を参照してください。

作成したページは、「ページ」の下に表示されます。
「機能」で、アプリケーションに含める機能を選択します。
「機能」は、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。さらに学習するには、ヘルプを参照してください。すべての機能を選択するには、「すべてをチェック」をクリックします。

図create_app_wiz_c.pngの説明

プログレッシブWebアプリケーションに固有の機能は次のとおりです。
- プログレッシブWebアプリケーションのインストール - プログレッシブWebアプリケーション(PWA)は、能力および信頼性が高く、インストール可能に設計されています。プログレッシブWebアプリケーションは、プラットフォーム固有のアプリケーションのように見えます。このオプションを有効にすると、次のことが可能になります:
  - 新しいナビゲーション・バー・エントリInstall Appを追加します
  - ユーザーは、アプリケーションをデバイスにインストールできるようになります
- プッシュ通知 - Webアプリケーションは、ユーザーが現在Webサイトにいない場合でも、ユーザーのデバイスに通知を送信できます。通知はユーザーのデスクトップまたはモバイル・デバイスに送信でき、Webサイト上の新しいコンテンツまたはイベントにユーザーにアラートを送信したり、Webサイトでユーザーを再び引き寄せるために使用できます。このオプションを有効にすると、次のことが可能になります:
  - 新しいナビゲーション・バー・エントリUser Settingsを追加します。
  - ユーザーはプッシュ通知をサブスクライブおよびサブスクライブ解除できます。
  - サブスクライブすると、ユーザーはAPEXアプリケーションからプッシュ通知を受信できます。
「アプリケーションの作成」をクリックします。
プログレッシブWebアプリケーション属性を構成します。「プログレッシブWebアプリケーション属性の構成」を参照してください。

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

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

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

プログレッシブWebアプリケーション属性を構成するには:

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
アプリケーションのホームページから、「プログレッシブWebアプリケーション」ページに、次の2通りの方法でアクセスできます。
- 「アプリケーション定義の編集」ボタン:
  - アプリケーション名の右側にある「アプリケーション定義の編集」をクリックします。
  - 「プログレッシブWebアプリケーション」タブをクリックします。
- 「共有コンポーネント」からの場合:
  1. 「共有コンポーネント」をクリックします。
  2. 「ユーザー・インタフェース」で、「プログレッシブWebアプリケーション」をクリックします。
「一般」で、次を編集します。
1. プログレッシブWebアプリケーションの有効化 - このオプションが有効になっていることを確認します。
2. インストール可能 - このオプションが有効になっていることを確認します。
「インストール性」で、次の操作を実行します:
1. 表示 - アプリケーションの優先表示モードを選択します。このオプションは、ユーザーに表示されるブラウザUIがどの程度かを制御します。オプションは次のとおりです。
  - 全画面 - ブラウザUIなしでPWAを開きます。このオプションは、画面またはウィンドウの全体を使用します。
  - スタンドアロン- スタンドアロン・アプリケーションのように見えるようPWAを開きます。アプリケーションは、ブラウザとは別の異なるウィンドウで実行されます。URLバーやボタンなどの標準のブラウザUIコンポーネントは表示されません。
  - 最小のUI - スタンドアロンと同様ですが、ブラウザの制御ナビゲーション・ボタン(「戻る」、「リフレッシュ」など)は除きます。
  - ブラウザ - 通常のブラウザUIでPWAを開きます。
  ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。詳細は、https://web.dev/add-manifest//を参照してください。
2. 画面の向き - このプログレッシブWebアプリケーションを使用するときに優先される画面の向きを選択します。このオプションは主にモバイル・デバイスに適用されます。
  
  ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。
3. テーマ・カラー - アプリケーションのデフォルトのテーマ・カラーを定義します。
  
  この属性は、オペレーティング・システムがアプリケーションを表示する方法に影響します(たとえば、Androidのタスク・スイッチャの場合、このテーマ・カラーで囲まれます)。
  
  ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。
4. バックグラウンド・カラー - バックグラウンド・カラーを選択します。
  
  バックグラウンド・カラーは、スタイルシートがロードされる前にアプリケーションに表示するプレースホルダのバックグラウンド・カラーを定義します。したがって、バックグラウンド・カラーは、Webアプリケーションの起動とアプリケーション・コンテンツのロードのスムーズな移行のために、テーマ本体のバックグラウンド・カラーと一致する必要があります。
  
  ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。
5. iOSステータス・バー・スタイル - 「iOSステータス・バー・スタイル」属性は、iOSデバイスのホーム画面に追加されるときにWebアプリケーションのステータス・バーの外観を制御するメタ・タグとしてページにレンダリングされます。オプションは次のとおりです
  - デフォルト - これはデフォルト値であり、通常の方法でステータス・バーを表示します。
  - 黒 - この値はステータス・バーを黒にします。
  - 半透明 - この値によってステータス・バーが半透明になり、コンテンツがその背後に表示されます。
    
    ノート: この属性はiOSデバイスでのみ使用されます。Oracle APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。
6. アプリケーションの説明 - アプリケーションの動作について説明します。この属性は、アプリケーションのインストールを求められたときに、ユーザーに詳細情報を提供する場合に使用します。
7. カスタム・マニフェスト - Webアプリケーション・マニフェスト・ファイルの追加のJSONプロパティを格納するために使用されます。ここで見つかったプロパティは、既存のプロパティをオーバーライドするか、新しいプロパティを追加することで、前述の宣言オプションを拡張するために使用されます。
  
  カスタム・マニフェストの構築の詳細は、Webアプリケーション・マニフェストの仕様(https://www.w3.org/TR/appmanifest/)を参照してください。
8. スクリーンショット - プログレッシブWebアプリケーションのインストールをユーザーに促すときにプロモーション目的でスクリーンショットを含めます。
  スクリーンショットを追加するには:
  - 「スクリーンショットの追加」をクリックします。
  - 説明 - PWAのインストール時にアクセシビリティ目的で使用されるPWAスクリーンショットのラベルを入力します。
  - 順序 - このPWAスクリーンショットで使用される表示順序を識別します。
  - スクリーンショットのアップロード:
    - ドラッグ・アンド・ドロップ - このリージョンにファイルをドラッグ・アンド・ドロップします。
    - ファイルの選択 - 「スクリーンショットのアップロード」リージョンをクリックし、ファイルにナビゲートして選択します。
  - ビルド・オプション - このPWAスクリーンショットが使用するビルド・オプションを識別します。
  - コメント - このPWAスクリーンショットに関連付けられたコメントを追加します。
  - 「作成」をクリックします。
9. ショートカット - インストールされたPWAのユーザーが特定のページにすばやくアクセスできるように、ショートカットを含めます。タッチ対応デバイスについては、ホーム画面のアプリケーション・アイコンを長押しすると、ショートカットにアクセスできます。他のデバイスについては、タスク・バーのアプリケーション・アイコンを右クリックすると、ショートカットにアクセスできます。
  ショートカットを追加するには:
  - 「ショートカットの追加」をクリックします。
  - 名前 - PWAショートカットの名前を入力します。
  - ターゲットURL - 現在のショートカットのアプリケーションのページを指定します。
  - 順序 - このPWAスクリーンショットで使用される表示順序を識別します。
  - アイコンをアップロード:
    - ドラッグ・アンド・ドロップ - このリージョンにファイルをドラッグ・アンド・ドロップします。
    - ファイルの選択 - 「アイコンをアップロード」リージョンをクリックし、ファイルにナビゲートして選択します。
  - 説明 - このPWAショートカットの説明を入力します。
  - ビルド・オプション - このPWAショートカットが使用するビルド・オプションを識別します。
  - コメント - このPWAショートカットに関連付けられたコメントを追加します。
  - 「作成」をクリックします。
  ヒント:
  APEXアプリケーションでは、「セッションを再結合」が有効になっている場合にのみPWAショートカットを使用できます。ショートカットを構成する前に、「パブリック・セッションに対する有効化」または「すべてのセッションに対する有効化」をクリックします。詳細は、「セッション管理」を参照してください。
「プッシュ通知」で、次の操作を実行します:
1. プッシュ通知の有効化 - このオプションを有効にすると、Webアプリケーションは、ユーザーが現在Webサイトにいない場合でも、ユーザーのデバイスに通知を送信できます。通知はユーザーのデスクトップまたはモバイル・デバイスに送信でき、ユーザーにWebサイト上の新しいコンテンツまたはイベントのアラートを送信したり、Webサイトでユーザーを再び引き寄せるために使用できます。
  このオプションを有効にすると、次のことが可能になります:
  - 新しいナビゲーション・バー・エントリを追加します: ユーザー設定
  - ユーザーはプッシュ通知をサブスクライブおよびサブスクライブ解除できます。
  - サブスクライブすると、ユーザーはAPEXアプリケーションからプッシュ通知を受信できます。
2. 「プッシュ通知の有効化」が有効になっている場合、次の属性が表示されます:
  - 資格証明 - 認証のための資格証明を選択します。資格証明を編集するには、「共有コンポーネント」、「資格証明」に移動します。
    プッシュ通知をセキュアに設定するには、資格証明が必要です。公開キーと秘密キーのペアが、それぞれ、ユーザーがクライアント側のプッシュ通知をサブスクライブしたり、サーバーがサブスクライバに通知を送信できるようにするために使用されます。
  - 設定ページ - このアプリケーションにすでにプッシュ通知機能ページがある場合は、ここにページ番号が表示されます。アプリケーションにプッシュ通知機能ページがない場合は、機能ページを追加できることが表示されます。
  - 連絡先のEメール - プッシュ通知サービス・プロバイダ(Google、Mozilla、Appleなど)がアプリケーションの所有者に連絡する場合、連絡する電子メール・アドレスを入力します。1人の個人に依存しないように、グループ電子メールを使用することをお薦めします。
「サービス・ワーカー構成」で、サービス・ワーカーを選択します。
サービス・ワーカーは、アプリケーションが使用中でない場合でもコードを実行できるJavaScriptファイルです。サービス・ワーカーは、リソースのフェッチや通知の処理などのイベントをリスニングできます。サービス・ワーカーはフックを使用するか、イベントを完全に置換することで変更できます。サービス・ワーカーのオプションは、次のとおりです。
- デフォルト: 次の方法で、APEXエンジンによって生成されます。
  - サービス・ワーカーをインストールしてアクティブにします
  - キャッシュが存在する場合、キャッシュからリソースを提供します
  - それ以外の場合は、ネットワークから提供し、リソースをキャッシュに挿入します。
  - ネットワークに障害が発生した場合、オフライン・ページを提供します
- フックの構成 - プレースホルダをサービス・ワーカー・コードに入力して独自のものを追加します。フックの場所は、Oracle APEXによって指定されます。このオプションを使用すると、「構成のダウンロード」を選択し、ファイルURLとして使用できます。
- ファイルURL - サービス・ワーカー・フック・インタフェースが含まれるファイルへのURL参照を指定します。これは、複数のアプリケーション間でサービス・ワーカー・フックを共有する場合に便利です。ファイル参照を使用する場合は、インタフェース・アーキテクチャに適切に従うようにしてください。そうしないと、サービス・ワーカーは実行時に障害が発生します。
  
  インタフェース構造を表示するには、この属性のフィールドレベル・ヘルプを参照してください。
「変更の適用」をクリックします。

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