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

webアプリケーションのProgressive Web App (PWA)サポートは、アプリケーションの「設定」ページから有効化および構成できます。

ノート:

モバイル・アプリケーションはサポートされなくなりましたが、既存のモバイル・アプリケーションをwebアプリケーションに変換し、PWAとしてデプロイできます。

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

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

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

Web Appsをクリックして、PWAとして構成するアプリケーションに移動します。

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

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

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

図mob-pwa-tab-png.pngの説明
必要に応じて、「マニフェストの設定」セクションの情報を確認および編集します。
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サポートを有効にすると、任意のWebアプリと同様に、アプリを配布するためにステージングおよび公開できます。「ビジュアル・アプリケーションのプレビュー、ステージングおよび公開」を参照してください。これを行うと、ユーザーがすばやくスキャンしてラップトップまたはデバイスにアプリをインストールできるQRコードを生成できます。「PWA対応アプリケーションのQRコードの生成」を参照してください。