WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›App solution

How-to-documents

  • How-to Wiki
  • WaveMaker Best Practices

App solution

  • Creating a Registration Page
  • Support for Password Encryption
  • Error Handling in WaveMaker App
  • Leaving Page with Unsaved Changes
  • Micro frontend using iframes
  • Enabling PWA

UI design

  • Passing Parameters to Pages
  • Passing Parameters to Partial Page
  • Accessing Script
  • Use Static Variable to pass data between pages
  • Customise Login Page
  • Incorporating Additional Icons
  • Change Icon Color on Condition
  • Change Icon for the Global Spinner
  • Changing Default Favicon
  • Changing App Logo
  • Changing Page Title
  • Customise App Style
  • How to use Conditional Class Property
  • How to use Conditional Style Property
  • Customize an Existing Theme
  • Adjust Left Navigation Width
  • Customizing Theme
  • Enable SPA
  • Choose Widget Template and Layout
  • Widget Template and Icons
  • Custom Template for Widgets
  • Apply Custom Data Formatter

Nav & Dropdown

  • Dynamic Menu based on User Role
  • Restricting Menu Items based on the User Role
  • Localization for Dropdown Menu

Localization

  • Localization in WaveMaker Apps
  • Setting Language and Date Format
  • Localization Using Select Locale
  • Localization of Error Messages

Security

  • SAML Integration - OneLogin
  • SAML Integration - ADFS
  • OpenID Integration - Azure AD
  • Custom Security using Google OAuth Prefab
  • Multiple Security Provider Implementation
  • Customizing Post Authentication Handlers
  • Configuring Content-Security-Policy
  • Configuring MTLS

Databases

  • Queries with Dynamic Where Clause
  • Connect To Azure SQL Server
  • Recommended JDBC Driver Versions for Databases
  • How to fetch more than the default number(100) of records from database?
  • How To: One-to-Many Relationship
  • Working with Temporals
  • Connect To AWS Redshift Database
  • Connect To SAP Hana Cloud Database
  • Transactional History of Entity
  • Row-Level Security using DB Event Listeners
  • Validations using CRUD Listeners
  • Custom Logic DB Event Listeners
  • Connect to MySQL database using SSL
  • How to Switch MariaDB to MySQL Connector

Web services

  • Using App Environment Properties
  • Consuming an Existing WaveMaker API
  • Using POST method to send data to a REST API
  • Request-Response Processing for REST Services
  • How to Intercept Request and Response of all API Calls in One Place
  • WebSocket Usage - Chatroom App
  • UI for API Server-side Pagination
  • Working with API with different pagination formats

Java services

  • Sending Email using WaveMaker Connector
  • Implementing Forgot Password feature using Java Service
  • Accessing REST APIs from Java Service
  • Scheduling a Java Service
  • Integrating JUnit Tests for WaveMaker Application
  • ORM Artifacts
  • Pre-Post Processing for Database Service APIs
  • Accessing Logged-in User Details using Java Service
  • Design a workflow in Camunda BPM and integrate into a WaveMaker app
  • Integrate Azure File Storage
  • Insert Data from Excel into Database
  • Integrate Amazon S3 into WaveMaker App
  • Integrate Twilio Connector
  • Integrate OTP (One-Time Passcode) Verification with WaveMaker App

Variables

  • Using Filter Conditions on Variable
  • Using Live Variable APIs
  • Using Notification Actions
  • Using Navigation Action
  • Using Variables for Queries and Procedure
  • Using Service Variable in a Form
  • Using Filter Criteria for a Data and Live Widgets
  • Using Filter Criteria for a Database CRUD Variable

JavaScript

  • Using JavaScript in Binding
  • Using JavaScript from External URL
  • Using JavaScript to loop a command
  • Using function for evaluating conditions

Developer options

  • Synchronizing WaveMaker Apps with IDEs
  • Synchronizing Java Services Controller
  • Integrating Amazon Cognito for User Authentication
  • Integrating Sample Jasper Report in WaveMaker Application
  • How to generate PDF File using Jasper Reports
  • Upgrading an App from WaveMaker 9.x to WaveMaker 10.0
  • App Migration from WaveMaker 9x to 10x
  • Setup Fusion Reactor for Debugging Issues

Deployment

  • SSL Termination in LoadBalancer

Mobile App Solutions

  • Notify users about new update

Mobile gesture

  • Setting Swipe Gestures on a List Widget
  • Working with Pull to Refresh

Mobile widgets

  • Using Search Widget within the Navbar

Mobile UI design

  • Setting Splashscreen Images and App Icons
  • Using Cordova Plugins
  • Designing Tablet Views in Mobile Project
  • Sliding left navigation for Mobile App
  • Mobile App using Bar code
  • Custom Date Picker in Mobile

Cards

  • Capturing Card Items

DataTable

  • Customising Data Table Row Action
  • How to Configure Row Expansion in a Data Table
  • Using Widgets to represent Data Table Columns
  • View Master-Detail Data Records using Data Table
  • Add Master-Detail records using Data Table
  • Export Data from Data Table
  • Export Data from Data Table - 2
  • Setting Blob Filename
  • Dynamic Data Tables
  • Customize Dynamic Datatable
  • Data Table Column bound to Query
  • Combining Columns in Data Table
  • Custom Styling Data Table Columns & Rows
  • Formatting Data Table Columns
  • Concurrency and Record Locking in WaveMaker
  • Edit DataTable records bound to Query API

List

  • Creating an Employee List grouped by City
  • Creating an Employee List grouped by Birth Month and City
  • OnRender Event
  • Including a Data Table within a List
  • Building an Editable List
  • Building Cascading Lists
  • Accessing List Items
  • Localization of Data Table Column Headings

Forms

  • Using Live Form
  • How Tos: Form
  • Building Tabbed Live Form
  • How Tos: Live Form
  • Linking Live Form with another Widget for Input
  • Handling Related Fields in a Live Form
  • How to Get Validation Messages from a Form
  • Adding Master-Detail records in the same transaction
  • Submit Parent and Child Records in a Single Transaction
  • Submit Parent and Child Records in a Single Transaction using Form and Data Table
  • Using Cascading Select & Autocomplete for Live Form Fields
  • Using Cascading Select within Live Form
  • Using cascading Filter to populate Live Form
  • Using Wizard for Master-Detail Live Form
  • Copy to Clipboard
  • Create a form with multiple wizard steps
  • Smart Forms: Conditional Flows for form Widget

Calendar

  • How Tos: Calendar
  • Calendar Usage - Create an Event
  • Calender Usage - Google Calendar Integration

CheckboxSet

  • CheckboxSet to Filter List data

FileUpload

  • FileUpload - Basic Usage
  • File Upload Widget Operations
  • Upload File & Save in Database
  • File Upload & Blob Data
  • File Upload - Custom Directory
  • Accessing File Upload from Java Code
  • Upload Files from Live Form & Form

Radioset

  • Radioset to Filter a List

Rating

  • Building Rating Widget using Static Data
  • Building Rating Widget using Static Variable
  • Build Rating Widget using Model Variable
  • Building an Interactive Rating Widget

Select

  • Configuring Select Widget from a Static List of Values
  • Configuring Select Widget from a Static Variable
  • Configuring Select Widget from a Variable
  • Configuring Select Widget using Display and Data Fields
  • Configuring Select Widget from Database Fields
  • Configuring Cascading Select
  • Selection Widgets - Use Case

Progress Circle

  • Using Progress Circle Widget

Charts

  • Working with Charts
  • Display User Selection in another Widget
  • Handling Dynamic Data
  • Custom Data

Richtext Editor

  • Adding Custom Fonts to Richtext Editor

Live filter

  • Applying Live Filter to a Data Table or a Chart
  • Building a Multiple Selection Live Filter
  • Building a Range Live Filter

Container

  • Setting partial page content for Accordion within a List
  • Setting partial page content for Panel within a List using JavaScript
  • How Tos: Wizard
  • Dynamic Tabs and Accordions

Tree

  • Tree using Static Variable
  • Tree using Java Service
  • Tree using Dynamic Tree

Prefabs

  • Creating Partials in a Prefab
  • Create Prefab using Third Party UI Widgets
  • Create a Simple Prefab
  • Create Prefab Using D3 & NVD3 Charts
  • Create Prefab Using D3 Library DataMaps
  • Create Prefab using JQuery Plugin
  • Create Prefab using Angular Module
  • Create Prefab using Angular, React Components
  • Azure OAuth Prefab Integration

Team Poral Configure Vcs

  • Configure Azure Repos In CodeRepository
Edit

Enabling PWA - Beta


What is PWA (Progressive Web Application)

PWA (Progressive Web Application) are web applications that provide a native mobile app experience. These applications combine great functionalities and enhanced user experience based on the browser's capabilities and work on any platform, including desktop and mobile devices. You can develop PWA using web technologies such as JavaScript, HTML, and CSS.

WaveMaker web applications are already responsive and ready to be converted to Progressive Web App. In this document, learn how to turn any WaveMaker web application into a PWA.

When to Use PWA vs. Mobile App

WaveMaker Studio allows you to create two types of projects:

  1. Web Application
  2. Mobile Application

PWA applies explicitly to web applications, allowing them to behave closer to native mobile apps. However, to list a mobile app on Google Play or App Store, you should create a Mobile application project instead.

Advantages of Using PWA

PWAs have many features and benefits that make them more unique compared to traditional web and native apps, including:

  • Fully responsive apps and compatible with browsers
  • Connectivity independence
  • App-like interface
  • Push notifications
  • Automatic updates
  • More secure
  • Discoverability and easy installation without going through app store approval cycles

These features make PWA unique from native mobile applications and provide more robust features on any platform using any device.

PWA Features Supported by WaveMaker

Currently, the following features are implemented in WaveMaker; that includes:

  • Add to the home screen
  • Offline capabilities - storing of application code on mobile
  • Push notifications

Deploying a New Version of the App

Understanding PWA: When PWA is installed on a mobile device, the application's code, including JavaScript, CSS, and other artifacts, is stored and served from mobile file storage. Thus, it decreases the application startup time.

What happens when a new version is deployed: WaveMaker build process configures the service worker manifest file to make this happen without having to do anything. When a new version of the web application is deployed on the cloud during the PWA startup, it performs the up-to-date check to verify if its cached contents are valid. If cached content is not valid, the new version of the deployed code is downloaded before starting the application.

Prerequisites

You must enable SSL and deploy the application using a secure connection to work with PWA features. When developing your application in WaveMaker, go to Security dialog and enable SSL. Then make sure you deploy the application on a domain with a valid SSL certificate.

Steps to Enable PWA Capabilities

Create a project, add the PWA flag, and set the value as “true”. For example, app.pwa.enabled=true from the corresponding profile properties file.

  • The default behavior of the PWA feature is disabled. Therefore, if the PWA flag is not set or not available, it is considered disabled.
note

This feature is under active development, and hence to enable it, you need to turn the feature flag on for every project.

  • Deploy the app and launch the deployed app on any browser using the deployed URL.
  • Once the app loads, an install icon shows up in the address bar of the browser.
  • You can install the app by clicking on the icon highlighted below.

  • When you click the icon, a pop-up shows up, allowing you to install the application or cancel the installation.

  • After installing the application, the app opens up as a standalone application.

Enable PWA in Old Applications

To enable the PWA feature in old applications, along with the above step, i.e., enabling PWA flag, do the following.

  • Projects without Authentication enabled: Add Manifest pattern in project-security.xml, i.e., add the following lines in the project-security.xml file.
<security:http pattern="/manifest.json" security="none"/>
<security:http pattern="/ngsw.json" security="none"/>
  • Projects with Authentication enabled: Re-save the security config from the Studio, which would regenerate the project-security.xml with the manifest pattern.

Steps to Set App Icon

When PWA is installed on a mobile device, the icon you provide for the app will show on the mobile home screen.

You can set the app icon as a user-provided icon for PWA in WaveMaker. Please find the steps below to add the app icon.

  1. Create a folder named “PWA-icons” in the root directory of a project.
  2. Place the icon in the “PWA-icons” folder with either of the sizes:
    • 512x512
    • 384x384
    • 192x192
    • 152x152
    • 144x144
    • 128x128
    • 96x96
    • 72x72
  3. Image file naming should be an icon-.png. For example, icon-384x384.png.

  1. Re-deploying the app reflects the above changes.
note
  • In case of any missing icon(s), the nearest resolution will be used from the “pwa-icons” directory.

Example:

In the above image, we have uploaded two different image sizes. But the chrome browser uses 128x128, which is not present in the upload list; therefore, the PWA generation uses 384x384 size as the app icon.

  • If no icons are present in the "pwa-icons" directory, PWA will use the WaveMaker default icons.
  • As of now, only PNG format images are supported.

Steps to Install PWA in Mobile Devices

The above features can be applied in mobile, including Android and iPhone. To install the app on mobile, load the deployed app URL in Chrome browser and add the app to the home screen/install the app.

You can observe the app in the app drawer.

And once you open the app, it will be opened as a native mobile application.

Browser Support for PWA

  • All browsers do not support all the features of PWA.
  • Please load this URL on any browser to know the PWA features it supports.
Last updated on 11/1/2021 by Swetha Kundaram
← Micro frontend using iframesNext →
  • What is PWA (Progressive Web Application)
  • When to Use PWA vs. Mobile App
    • Advantages of Using PWA
  • PWA Features Supported by WaveMaker
    • Deploying a New Version of the App
    • Prerequisites
  • Steps to Enable PWA Capabilities
    • Enable PWA in Old Applications
  • Steps to Set App Icon
  • Steps to Install PWA in Mobile Devices
    • Browser Support for PWA
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.