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

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

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

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

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

5.6.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.6.2.2 プログレッシブWebアプリケーションの作成

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

ヒント:

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

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

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

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

ノート:
アプリケーションの作成ウィザードで使用可能なすべてのオプションの詳細は、「アプリケーションの作成ウィザードを実行するとき」を参照してください。
「名前」で、開発者がアプリケーションを識別するための名前を入力します。
ページを追加するには、「ページの追加」をクリックし、目的のページ・タイプを選択します。ユーザー・インタフェースは、選択したページ・タイプによって異なります。

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

作成したページは、「ページ」の下に表示されます。
「機能」で、アプリケーションに含める機能を選択します。「プログレッシブWebアプリケーションのインストール」を選択します。

図create_app_wiz_c.pngの説明

「機能」は、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。さらに学習するには、ヘルプを参照してください。すべての機能を選択するには、「すべてをチェック」をクリックします。
「アプリケーションの作成」をクリックします。
プログレッシブWebアプリケーション属性を構成します。「プログレッシブWebアプリケーション属性の構成」を参照してください。

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

5.6.2.3 プログレッシブ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ステータス・バー・スタイル: プログレッシブWebアプリケーションのiOSステータス・バーのスタイルを決定します。Appleには、次の3つの異なる選択肢があります。
  - 黒いテキストと白い背景
  - 黒いテキストと黒い背景: このオプションを選択すると、完全に黒く表示されます
  - 半透明: このオプションでは、白いテキストの背景色がWebアプリケーションの本体と同じになります。明るい背景色を使用する場合でも、テキストの色は白のままです。半透明を使用する場合、ページのコンテンツは画面全体に表示されます。
6. アプリケーションの説明: アプリケーションの動作について説明します。この属性は、アプリケーションのインストールを求められたときに、ユーザーに詳細情報を提供する場合に使用します。
7. カスタム・マニフェスト - Webアプリケーション・マニフェスト・ファイルの追加のJSONプロパティを格納するために使用されます。ここで見つかったプロパティは、既存のプロパティをオーバーライドするか、新しいプロパティを追加することで、前述の宣言オプションを拡張するために使用されます。
  
  カスタム・マニフェストの構築の詳細は、Webアプリケーション・マニフェストの仕様(https://www.w3.org/TR/appmanifest/)を参照してください。
「サービス・ワーカー構成」で、サービス・ワーカーを選択します。
サービス・ワーカーは、アプリケーションが使用中でない場合でもコードを実行できるJavaScriptファイルです。サービス・ワーカーは、リソースのフェッチや通知の処理などのイベントをリスニングできます。サービス・ワーカーはフックを使用するか、イベントを完全に置換することで変更できます。サービス・ワーカーのオプションは、次のとおりです。
- デフォルト: 次の方法で、APEXエンジンによって生成されます。
  - サービス・ワーカーをインストールしてアクティブにします
  - キャッシュが存在する場合、キャッシュからリソースを提供します
  - それ以外の場合は、ネットワークから提供し、リソースをキャッシュに挿入します。
  - ネットワークに障害が発生した場合、オフライン・ページを提供します
- フックの構成: プレースホルダをサービス・ワーカー・コードに入力して独自のものを追加します。フックの場所は、Oracle APEXによって指定されます。このオプションを使用すると、「構成のダウンロード」を選択し、ファイルURLとして使用できます。
- ファイルURL: サービス・ワーカー・フック・インタフェースが含まれるファイルへのURL参照を指定します。これは、複数のアプリケーション間でサービス・ワーカー・フックを共有する場合に便利です。ファイル参照を使用する場合は、インタフェース・アーキテクチャに適切に従うようにしてください。そうしないと、サービス・ワーカーは実行時に障害が発生します。
  
  インタフェース構造を表示するには、この属性のフィールドレベル・ヘルプを参照してください。
「変更の適用」をクリックします。

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