PWAとしてのモバイル・アプリケーションの実行

PWAの機能強化とwebアプリケーション用のレスポンシブ・テンプレートにより、モバイル・アプリケーションはPWAを優先して非推奨になりました。 Visual Builderに新しいモバイル・アプリケーションを作成することはできなくなりましたが、既存のモバイル・アプリケーションをPWAとしてデプロイすることで引き続き使用できます。

既存のモバイル・アプリケーションをPWAとしてデプロイするには、モバイル・アプリケーションを「ステージまたは公開」する前に、まずアプリケーションの設定ページで「それをインポート」、次に「PWAオプションを有効にする」を実行します。これを行うと、PWA対応のモバイル・アプリケーションを作成してQRコードを生成でき、ユーザーはスキャンしてアプリケーションをデバイスにインストールできます。これにより、単一のアプリケーションをインストールでき、デスクトップからタブレット、モバイルに拡張できます。オフライン・サポート用に構成されている場合は、オフラインで作業することもできます。

ノート:

PWA対応のモバイル・アプリを含むモバイル・アプリがライフサイクル終了(EOL)に到達するまで、2024年7月まで既存のモバイル・アプリを引き続き使用できます。 2024年7月以降にモバイルPWAを使用するには、「モバイル・アプリケーションをwebアプリケーションとして移行し、PWAとしてデプロイ」を強くお薦めします。

モバイル・アプリケーション設定の構成

インポートされたモバイル・アプリケーションの設定をレビューして、適切な値があることを確認します。

「モバイル・アプリケーション」タブをクリックします。
app_nameノードをクリックし、「設定」をクリックします。
「一般」タブが表示されます。

「図mob_conf_app_setng_redwood.pngの説明」
「アプリケーション設定」ページで、デフォルト・ページ・リストからモバイル・アプリのメイン・ページまたは開始ページを選択します。このページは、アプリケーションを開くと表示されます。
モバイル・アプリで使用するテーマを指定する値を選択します(ある場合)。

ノート:
モバイル・アプリケーション・テーマは、作成時にデフォルトで最新のJETテーマに設定されます。アプリケーションがVisual Builder 20.07以前で作成されている場合、そのテーマはAlta (その時点のデフォルト)である可能性があります。アプリケーションがVisual Builder 20.10以上で作成されている場合、Redwoodテーマがアプリケーションのデフォルトである可能性があります。モバイル・アプリケーション設定エディタでテーマを変更できますが、コンポーネントのディメンションとスタイルは2つのテーマ間で異なるため、AltaからRedwoodへのテーマの変更が自動的に動作するとは想定できません。「Webアプリの外観をカスタマイズ」を参照してください。
「アプリケーション名」フィールドに、アプリが携帯端末にインストールされたときに表示されるアプリ名を入力します。
「ベンダー名」フィールドに、アプリケーションを発行したベンダーの名前を入力します。
説明フィールドに、アプリケーションを説明するテキストを入力します。

PWAとしてのモバイル・アプリケーションの構築

PWA対応のモバイル・アプリケーションを作成して、アプリケーションのQRコードを生成します。ユーザーはQRコードをスキャンして、テスト用および本番用のPWAとしてモバイル・アプリケーションをインストールできます。

モバイル・アプリケーションのステージングおよび公開は、webアプリケーションのステージングおよび公開と似ていますが、最初に、サポートされているプラットフォームにアプリケーションをインストールできる情報を使用してモバイル・アプリケーションを構築する点が異なります。

次のステップに従って、PWA対応のモバイル・アプリケーションをstageします:
1. 構築するPWA対応のモバイル・アプリケーションを開きます。
2. 「プレビュー」アイコン()をクリックして、ブラウザの新しいタブでアプリを実行します。
3. モバイル・アプリケーションがブラウザで開いたら、「私のアプリケーションを構築」ボタンをクリックします。
  
  「図mob_run_app.pngの説明」
4. 「アプリケーションのステージング」ダイアログ・ボックスで、適切なオプションを選択してビジネス・オブジェクトの処理方法を決定し、「ステージ」をクリックします。
  
  「図mob_stage_app.pngの説明」
  
  ビルドが完了すると、生成されたQRコードが表示されます。
5. QRコードをスキャンして、サポートされているデバイスにモバイル・アプリケーションをインストールします。または、「ブラウザで起動」リンクをクリックして、ラップトップまたはデバイス・ブラウザでアプリケーションを表示します。
  
  「図mob_run_app_pwa_built_side.pngの説明」
  
  リンクを開くと、(ここで強調表示されている)アドレス・バーのインストール・アイコンを使用して、アプリをラップトップまたはデバイスにインストールできます:
  
  図mobilepwa-install.pngの説明
ステージング済のPWA対応モバイル・アプリケーションを公開し、稼働させるには、次のステップに従います:
1. 公開するPWA対応のモバイル・アプリケーションを開きます。
2. 右上隅にあるアプリケーションのメニュー・オプションから「公開」を選択します。
3. 「アプリケーションのパブリッシュ」ダイアログ・ボックスで、ビジネス・オブジェクト・データの処理を指定し、公開をクリックします:
  
  「図mob-publish.pngの説明」
  
  ステージング・データベースのスキーマおよびデータは、ライブ・データベースにコピーされます。
4. 公開済アプリケーションを表示するには、ビジュアル・アプリケーション・ホームページに移動してアプリケーションを見つけます。ステータス列で「ライブ」をクリックし、モバイル・アプリケーションを選択します。
  
  アプリケーション起動ページの新しいブラウザ・タブにアプリケーションが開きます。右側には、サポートされているデバイスにモバイル・アプリケーションをインストールするためにユーザーが使用できるQRコードがあります。ブラウザでアプリケーションを起動するオプションも使用できます。このアプリケーションURLをユーザーと共有できるようになりました。

モバイルPWAからWeb PWAへの変換

2024年以降のモバイル・アプリケーション(End of Lifeに到達した場合)を使用できるように、既存のモバイル・アプリケーションをwebアプリケーションに変換し、PWAとしてデプロイすることを強くお薦めします。

PWA対応モバイル・アプリをwebアプリに変換するには:

「既存のモバイル・アプリケーションを開き、アプリケーションをエクスポートしてZIPアーカイブとしてローカル・ファイル・システムにダウンロードします。」

図export.pngの説明

ノート:
アプリケーションのZIPアーカイブのバックアップを作成し、問題が発生した場合に使用できるコピーを作成します。
アーカイブの内容を抽出します。次のようなディレクトリ構造が表示されます:
```
businessObjects/
mobileApps/
settings/
Gruntfile.js
package.json
visual-application.json
```
抽出したフォルダに新しいwebAppsディレクトリを作成します(大文字小文字の区別をノートします)。
mobileAppsディレクトリの内容をwebAppsディレクトリにコピーします。たとえば、mobileAppsディレクトリにhrmobileappフォルダが含まれている場合は、hrmobileappフォルダをwebAppsディレクトリにコピーします。
webAppsディレクトリ(hrmobileappなど)にコピーしたモバイル・アプリケーション・ディレクトリに移動し、次のファイルを削除します:
- manifest.json
- settings/appShellCache.json
- settings/build-configurations.json
- settings/mobile-build.json
- mobile-build-templates/* (存在する場合)
webAppsディレクトリを新しいアーカイブ(webApps.zipなど)に圧縮します。
ヒント:
Macで作業している場合は、次のステップを使用してアーカイブを作成します:
```
% cd <Visual Application Directory>
% find . -name '.DS_Store' -type f -delete
% zip -r webApps.zip webApps
```
モバイル・アプリケーションでin Visual Builderを開き、作成したwebAppsアーカイブを「インポート」します。既存のファイルとリソースの削除オプションは選択しないでください:

図importresources.pngの説明

これで、新しいwebアプリケーションが「Web Apps」ペインに表示されます。
新しいwebアプリケーションのPWAサポートを有効にします:
1. 「Web Apps」ペインでアプリケーションの<app name>ノードを選択し、「設定」およびPWAをクリックします。
2. PWAサポートを無効にして再度有効にするには、「プログレッシブWebアプリケーション(PWA)使用可能」トグルをクリックします。
3. webアプリケーションの場合は「PWA設定の確認」。マニフェスト設定を変更し、オフライン・フォールバック・ページを作成することもできます。
図pwa-convert.pngの説明
次に、アプリケーションをstageしてテストし、すべてが期待どおりに機能することを確認します。

新しいweb PWAは、元のモバイルPWAと同じように動作します。ブラウザでPWA対応のwebアプリケーションを開くと、次のようになります:
1. ブラウザの開発者ツールのデバイス・ツールバーを使用して、シミュレートされたモバイル環境でアプリをデバッグします:
  
  図pwa-convert-debug.pngの説明
2. アプリのアドレス・バーにあるインストール・アイコンを使用して、webアプリをインストールします:
  
  図pwa-convert-install.pngの説明
3. アプリのアドレス・バーの共有アイコンを使用して、ユーザーがカメラを介してモバイル・デバイスでwebアプリをすばやく開くことができるQRコードを生成します:
  
  図pwa-convert-qrcode.pngの説明
アプリが期待どおりに動作することを確認したら、ビジュアル・アプリケーションからモバイル・アプリを削除することを選択できます。

ノート:
モバイル・アプリでOracle JET Offline Persistence Toolkitを利用してオフライン機能を提供する場合、「Gruntコマンド」「以上で、VB Studioでのパイプラインのパッケージ化とデプロイを使用」を使用してアプリケーションを「公開」する必要があります。