There are two ways to create a Progressive Web Application using GeneXus.
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.
To customize the generated app (title, colors, icon, display mode, etc.), first, you have to set the Web Frontend Application property to "Progressive" at the Main object level (Panels, Menus and/or WorkWith object). Then, a set of properties will be displayed to configure the required details:
PlantCare - ECommerce Sample
To solve it in this way, follow the steps below:
1. Create your web application as usual (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 automatically generate the following:
- 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.
Here is a sample XPZ with a PWA: PWA Sample Crowdfundme