GeneXus を使用して Progressive Web Application を作成するには、2 つの方法があります。

1.パネルを使用し、GeneXus Angular ジェネレーターで生成する

Angular で Progressive Web Application を生成するには、[ Build Mode ] プロパティ (ジェネレーターレベルで提供) を "Distribution" に設定し、必要なパネルと補完的なオブジェクトを定義するだけで済みます。
以下の理由から、これが推奨される方法です:

• より良いソリューションが生成されます。
• 一度モデル化すれば、同じ定義を使用してネイティブ モバイル ソリューションを生成できます。

生成されたアプリケーションをカスタマイズするには (タイトル、色、アイコン、表示モードなど)、まずメイン オブジェクト レベル (Panels、Menus、WorkWith オブジェクト) レベルで [ Web Frontend Application ] プロパティを "Progressive" に設定します。次に、必要な詳細を設定するための一連のプロパティが表示されます:

• [ Web Frontend Application Name ] プロパティ
• [ Web Frontend Application Short Name ] プロパティ
• [ Web Frontend Application Description ] プロパティ
• [ Web Frontend Display Mode ] プロパティ
• [ Web Frontend Background Color ] プロパティ
• [ Web Frontend Theme Color ] プロパティ
• [ Web Frontend Application Icon ] プロパティ

例

PlantCare - E コマースのサンプル

2.Web パネルとその他の Web オブジェクトを使用する

この方法で解決するには、以下の手順に従います:
1.Web アプリケーションを通常どおりに作成します (Web Panel オブジェクトやその他の Web オブジェクトを使用)。
2.アプリケーションのメインの Web パネルを編集し、[ Web Application ] プロパティを "Progressive" に設定します。

3.その後、設定する必要がある、関連するプロパティが表示されます。これらのプロパティを設定し、PWA の外観および操作感、そして動作を定義します。

• [ Web Application Name ] プロパティ
• [ Web Application Short Name ] プロパティ
• [ Web Application Description ] プロパティ
• [ Primary Text Direction ] プロパティ
• [ Display ] プロパティ
• [ Background Color ] プロパティ
• [ Theme Color ] プロパティ
• [ Prefer Related Applications ] プロパティ
• [ Web Application Icon ] プロパティ
• [ Android Alternative App ] プロパティ
• [ Android Alternative App Identifier ] プロパティ
• [ iOS Alternative App ] プロパティ
• [ Offline Object ] プロパティ

4.メインの Web パネルをビルドして完了です。
   
   GeneXus は以下のものを自動的に生成します:

• PWA のマニフェストファイル
• アプリケーションの信頼性を担うサービスワーカー

5.推奨事項: Lighthouse を使用して、PWA に問題がないことを検証します。     

サンプル

PWA のサンプル XPZ: PWA Sample Crowdfundme