How to create a PWA using GeneXus

Official Content
This documentation is valid for:

There are two ways to create a Progressive Web Application using GeneXus.

1. Using Panels and generating with GeneXus Angular Generator

To generate a Progressive Web Application with Angular you only have to set the Build Mode property (offered at the generator level) to "Distribution" and define the necessary Panels and complementary objects.

This is the recommended option because:

  • The generated solution is better.
  • You model it once and the same definitions can be used to generate a Native Mobile solution.

Note:  To customize the generated app (title, colors, icon, display mode, etc.) you have to edit the manifest file located under mobile/Angular/Main/src.

Sample

PlantCare - ECommerce Sample

2. Using Web Panels and other Web Objects

To solve it in this way, you have to:

  1. Create your web application as always (Use Web Panel objects and other Web Objects).
  2. Edit the main Web Panel of your application and set the Web Application property to "Progressive".
     
  3. After that, related properties appear and need to be set. Set those to define the look and feel and the behavior of the PWA.
     
  4. Build the Main Web Panel and that's it!

    GeneXus will generate automatically:
    • A manifest file for your PWA.
    • A service worker which is in charge of the reliability of the application}}}

  5. Recommended: Verify with LightHouse that you've got a PWA.     

Sample

Here is a sample XPZ with a PWA: PWA Sample Crowdfundme