1. Home
  2. chevron_right
  3. Blog
  4. chevron_right
  5. Mendix & Progressive Web Apps

Mendix & Progressive Web Apps

With the evolution of mobile technology, we see a rapid change in smartphone software, form factors, and UX designs and frameworks. Mendix team decided to deprecate the Hybrid Mobile Apps based on Apache Cordova framework as they believe Native Mobile Apps and PWA (Progressive Web Apps) are the future.

PWAs have evolved over the years to mimic a fully functional native mobile app and deliver the same User experience and performance while still running inside a browser page and behaving like a web app. The major difference being the distribution of PWAs does not require any app store and can be simply accessed directly via a browser.

In this blog, let’s look at how the Mendix platform can be leveraged to build a PWA and deploy it on Mendix Cloud. PWAs traditionally have three main characteristics:

Mendix 9.0 Beta 1 introduced offline-first PWAs
  • Installable: PWAs can be accessed initially from the browser and then the browser allows to add the PWA to the user’s home screen and start a full-screen app that looks and feels like a Native Mobile App.
  • Reliable: Using a browser feature called Service Workers (supported by Chrome, Safari, and Chromium-based Edge), PWAs can function partially offline (service worker caches resources like styling, pages, and images) or fully offline (just like a hybrid or a native mobile app)
  • Capable: PWAs built by Mendix can also utilize the Smartphone’s hardware features such as Camera and GPS Location and, in some cases, offer support for web push notifications. The complete functionality set of the PWA will depend on the browser used.
Mendix 9.0 Beta 1 introduced offline-first PWAs

Medix PWA

Mendix 9.0 Beta 1 introduced offline-first PWAs. To support PWA functionalities in a regular Mendix web app, we need to add a PWA-specific Navigation Profile. To be able to test all PWA functionalities, we have to deploy the Mendix app to Mendix Cloud as the Service Worker is registered on Mendix Cloud over HTTPS.

Add to Home Screen Browser Prompt

After Mendix App is deployed to Cloud and the user opens the Mendix App on his Android or iOS Smartphone or a Desktop PC, the user might be actively asked to add the app icon on the smartphone home screen or Desktop. Once the user agrees to this, the icon will be placed on the home screen and it launches the PWA just like a Native App would with a splash screen and without any address bar or browser functionalities. This PWA will now resemble a Native mobile app in terms of performance, appearance, and functionalities.

Preload Static Resources

Enabling this option inside Mendix Studio Pro will make the PWA pre-load and cache the static resources like pages, images, and widgets in the background. This ensures the first time when the app is opened all static resources are identified and cached locally on the client device along with necessary data models. If any model changes, the Service worker will be responsible to push the changes to the client device when the app is opened the next time. This improves the overall performance.

Accessing Device Hardware

Modern Browsers offer access to low-level device hardware features such as Bluetooth, Camera, GPS Location through APIs that can be leveraged in PWAs. These device features can be used by available widgets or microflow/nanoflow actions. It is also possible to leverage device features by extending the Mendix platform using JavaScript Actions and building a custom pluggable widget using ReactJS.

Offline-first PWAs

Offline-first applications work without an active Internet connection to provide a rich seamless experience for the user. Pages and Backend logic interact and utilize a local on-device database and such databases get synchronized with the server when the internet connection is established again. Synchronization usually happens when the service worker or sync service determines from Mendix Cloud that an entity model update needs to be performed or when pages and microflow logic are updated. Synchronization can be periodically triggered or when an event occurs within the PWA. This results in a snappier UI, increased reliability, and prolonged battery life on portable devices such as Tablets and Smartphones.

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.