プログレッシブWebアプリケーションのサポートの構成

アプリケーション設定ページから、webおよびモバイル・アプリケーションのプログレッシブWebアプリケーション(PWA)サポートを有効化および構成できます。

ノート:

モバイル・アプリケーションは、バージョン23.10から非推奨になりました。モバイル・アプリは作成できなくなりましたが、既存のモバイル・アプリをインポートし、それをPWAとしてデプロイして使用できるようになります。 PWA対応のモバイル・アプリは、モバイル・アプリがEOL (End of Life)に到達するまで2024年7月まで使用できます。 2024年7月以降のモバイル対応PWAを使用するには、モバイル・アプリケーションをwebアプリケーションとして移行し、PWAとしてデプロイすることを強くお薦めします。

PWAに対してアプリケーションを有効にすると、Visual Builderによって、webマニフェスト・ファイル(JSON構成ファイル)や必要なアイコンおよびスプラッシュ画面などのプロジェクトに必要なファイルが追加されます。 webマニフェストには、PWAに必要な構成設定が格納されます。これらの設定は、PWAページの「マニフェストの設定」セクションから変更できます。このファイルの詳細は、このpageを参照してください。

Oracleでは、アプリケーションにRedwoodテーマのアイコンとスプラッシュ画面が用意されています。必要に応じて、これらのイメージを独自のブランド・バージョンに置き換えることができます。 Android 8.0以上のデバイスで実行されるPWAでは、異なるデバイス・モデル上の様々なシェイプとして表示される適応アイコンを使用することもできます。

PWAにオフライン・フォールバック・ページを追加し、必要に応じてカスタマイズすることもできます。このオフライン・フォールバック・ページは、接続を必要とするがデバイスがオフラインであるアクションを実行すると表示されます。

Web Apps (または「モバイル・アプリケーション」)タブをクリックして、PWAとして構成するアプリケーションに移動します。

ノート:
応答性の高いwebアプリケーション・テンプレート(バージョン22.04以降)は、ビジュアル・アピールとして設計されており、小型電話からワイド・スクリーン・デスクトップまで、ユーザー画面のサイズを調整できます。ボトム・タブ・ナビゲーション・テンプレートを使用するweb対応PWAが、縦向きおよび横向きモードでどのようにレンダリングされるかを示します。デバイス方向に基づいてヘッダー・アイテムがどのように適応するかに注意してください:

「図responsive-web-app-tabbar.pngの説明」
アプリケーションの<app name>ノードをクリックし、「設定」をクリックします。
「一般」タブが表示されます。
PWAタブを選択します。
「プログレッシブWebアプリケーション(PWA)使用可能」をクリックします。

マニフェストの設定およびリソース・セクションが表示されます。 Visual Builderは、必要なPWAリソースをアプリケーション・フォルダ・ツリーに追加します。

「図mob_pwa_tab-png.pngの説明」
モバイル・アプリケーションで作業している場合は、高度なファイル・キャッシングの設定が表示される場合があります。 webアプリケーションでは拡張ファイル・キャッシングはサポートされていません。
必要に応じて、「マニフェストの設定」セクションの情報を確認および編集します。
1. アプリケーション名を指定します。
  アプリケーション名をダイアログに表示され、アプリケーションのインストールを求めるプロンプトが表示されます。
2. アプリケーションの短縮名を確認します。
  アプリケーション名と短縮名の両方が指定されている場合は、ホーム画面(アプリケーション・アイコンの下)、ランチャ、および領域が制限されているその他の場所で短い名前が使用されます。
3. 必要に応じてバックグラウンド色とテーマ色を変更します。現在選択されている色をクリックして、カラー・ピッカーで新しい色を選択するか、テキスト・フィールドにRGB値を入力します。
(オプション)アプリケーションで使用するスプラッシュ画面およびアイコンをカスタマイズします。
1. リソース・セクションで「サンプル」をクリックして、pwabranding_redwood.zipアーカイブ・ファイルをダウンロードします。
  
  「図mob_pwa_branding-png.pngの説明」
2. 必要に応じてアイコンとスプラッシュ画面を変更します。
  適応型アイコンを設計する場合は、重要な情報が"safe zone"の円内にあり、半径がイメージ・サイズの40%に等しいことを確認します。デフォルトでは、Visual BuilderでPWA用に生成されたRedwoodテーマのアイコンは、サンプル・アーカイブに含まれているアイコンと同様に、このガイドラインに従います。リソース・セクションからサンプルをダウンロードし、内のイメージをガイドラインとして使用して適応アイコンを作成することをお薦めします。
3. 変更されたアプリケーション・イメージ・アーカイブをアップロードするには、ドラッグ・アンド・ドロップ領域にドラッグするか、リンクをクリックして開くダイアログ・ボックスを起動します。
適応型アイコンを使用している場合は、webマニフェスト・ファイルを変更して、次のように"purpose": "any maskable"設定を含めます:
```
{
 "sizes": "512x512",
 "src": "resources/icons/icon-512x512.png",
 "type": "image/png",
 "purpose": "any maskable"
}
```
アプリケーションのオフライン・フォールバック・ページを含めるには、オフライン・フォールバック・ページの横にある「作成」をクリックします。
Visual Builderは、Redwoodテーマのオフライン・ページ(offlinePage.html)をプロジェクトに追加し、オフライン・フォールバック・ページの下のリンクを提供します。オフラインのフォールバック・ページをカスタマイズする場合は、リンクをクリックしてデザイナで開き、必要に応じて変更します。
モバイル・アプリケーションの場合、ユーザー・デバイスにキャッシュするファイルを「拡張ファイル・キャッシュ」セクションで指定します。
デフォルトでは、PWAは最初に起動されたときに、すべてのフローおよびページをユーザーのデバイスにキャッシュします。このセクションを使用して、ブラウザ・キャッシュに格納する必要があるリソースを絞り込みます。

PWAサポートを有効にした後、webアプリケーションをステージングおよび公開して、webアプリケーションと同様に配布できます。「ビジュアル・アプリケーションのステージングおよび公開」を参照してください。 PWA対応の「モバイル」アプリケーションをステージングおよび公開するには、最初にアプリケーションを構築してQRコードを生成する必要があります。「PWAとしてのモバイル・アプリケーションの構築」を参照してください。

ブラウザでPWAのリンクを開くと、アドレス・バーのオプションを使用して、次のようにアプリケーションをインストールできます:

アドレス・バーをクリックしてQRコード・アイコンを使用し、アプリのQRコードを表示します。このコードをスキャンしてアプリをインストールできます:
または、アドレス・バーのインストール・アイコンを使用してアプリケーションをインストールします: