7 min read
Progressive Web Apps in Mendix
Introduction
Did you know you can build progressive web apps with Mendix? And that this is easier and cheaper than a native mobile app? In many cases, a progressive web app (abbreviated PWA) is a good or even better alternative to a native app that you have to install from an app store. A PWA is an application that combines the flexibility of a website with the user experience of a native app. You can think of it as a native app that, like a website, works in a browser. So what exactly are the benefits of a PWA? Are there limitations you need to take into account when developing an app? And how do you develop a PWA in Mendix? In this blog, you'll read all about it.
What exactly is a Progressive Web App
Progressive Web App is a relatively new type of web application that uses modern web technology, giving it a better user experience than traditional web applications. The concept was invented in 2015 by Google Chrome developers. In the years that followed, other browsers also started offering support for this type of application. By now, PWAs work on all well-known browsers, both on mobile devices and desktop.
You can think of a PWA as an evolution of web applications. Unlike traditional web applications, a PWA offers more functionality comparable to a native app, such as:
- A PWA can use functions available on mobile devices, such as the camera, microphone, GPS, and push notifications.
- A PWA can be added to the home screen as an app icon (tile).
- When a PWA is opened via a tile on the home screen, the app looks like a mobile app, because the browser's user interface is hidden.
- A PWA can work partially or fully offline in situations with a poor internet connection or no internet at all. As a user, for example, you could submit a form in a PWA while offline.
- Data can be stored locally on the device by a PWA, and the data can be automatically synchronized with the server as soon as the device is back online.
- In an offline PWA, user sessions stay active much longer than with normal websites, even after the app has been closed on the device.
Thanks to the properties mentioned above, progressive web apps offer a user experience comparable to a native app and are often used for mobile applications. They can also be used for websites and for desktop applications. There are several well-known companies that have converted their website into a PWA, so that the app feels like a native app when used in a mobile browser, while the app in a browser on a desktop functions as a "normal" website. Well-known examples of this are the web apps of Uber, Spotify, and Pinterest.
Advantages of Progressive Web Apps
A progressive web app offers advantages compared to a native mobile app, both for the developer of the app and for the users. The main advantages are listed below.
No more distribution to the app store needed
The most important difference and advantage of a progressive web app compared to a native mobile app is that a PWA doesn't need to be distributed via an app store. A PWA can simply be opened in a browser without first installing the app via the app store. This makes a PWA much more accessible for users. As an app developer, you're also no longer dependent on an app store.
Always working with the latest version
For users of a progressive web app, it's no longer necessary to update the app from the app store to use the newest version. As a user, you always work with the latest version of the app, because you open the app in a browser. This makes rolling out bug fixes and new features much easier than with a native mobile app.
Lower development costs
Although it's not strictly necessary, in practice you often see that different versions of a native app are developed for different mobile platforms (Android and iOS). With a progressive web app, this is no longer necessary. For this reason, you can save time developing a PWA, and the development costs will in many cases also be lower than with a native app.
Are there any limitations?
After reading the advantages of progressive web apps, you might be wondering whether there are still limitations that you don't have with a native mobile app. There are indeed, and below you can read what they are:
Not all device functions are supported
Progressive web apps still can't use all the device functions available on phones and tablets. For example, it's not possible to use Bluetooth, NFC, or Face ID. Some device functions are available on Android, but not on iOS. Because of these kinds of platform-dependent limitations, it's important to thoroughly research beforehand which functions are supported on which platform before deciding whether to develop a PWA or a native app.
Limited data storage for offline use
In general, it can be said that the storage capacity of a progressive web app is smaller than that of a native app. The storage capacity is limited by the browser in which the app is opened. As a result, a PWA cannot make unlimited use of the available storage space on the device, while a native app can. The storage limit differs per browser and can also vary per version of the operating system. So here too, it's important to research beforehand the limitations regarding storage capacity and the expected storage of application data (including photos, videos, etc.) when using your app offline.
Limitations of Safari
While browsers like Chrome, Firefox, and Edge quickly implement the latest features, Safari often lags behind. This delay can range from a few months to even years, depending on the specific web standard or API in question. Apple subjects potential features to a strict evaluation to guarantee compatibility, security, and privacy, but this thoroughness slows down the adoption of new features. As a result, some PWA features work on Android but not yet on iOS. One example is the concept of background execution for running tasks in the background while the app isn't actively being used. This isn't possible on an iOS device, while it is possible with a PWA on Android.
How do you create a Progressive Web App in Mendix?
Step 1: Create a new Mendix project
The first step is creating a new project for your PWA in Mendix. You then need to choose a starter template, and you select the 'Blank Web App' template. This template contains various widgets, building blocks, and page templates for both responsive web applications and PWAs.
Step 2: Configure the navigation profile
Your new app contains the default 'Responsive Web' navigation profile. Once you've opened the app in Mendix Studio Pro (Mendix's development environment), you can adjust the navigation profile in the app settings. In the navigation profile, you need to select the 'Publish as Progressive Web App' option. In principle, this is the only thing you need to configure in Mendix to be able to publish the app as an online PWA.
Navigation profiles for PWA in Mendix
Step 3: Model the app in Mendix Studio Pro
After step 2, you have an empty app without a user interface. As an app developer, you can design your application in Mendix Studio Pro without any programming knowledge. In the visual development environment, you model the application using the same concepts as with a "normal" online web app (domain model, pages, microflows, nanoflows, etc.).
Step 4: Publish the app to the cloud to test it
To test how your PWA works, the app needs to be published to the cloud. Publishing your application to Mendix Cloud is the simplest way and takes just a few mouse clicks. Once that's done, you can open the app in a browser on your desktop, tablet, and phone.
After this step, you have an online PWA that can be opened on any type of device. The steps described after this are optional and depend on the type of PWA you want to create.Step 5: Add navigation profiles for tablet and phone (optional)
If you want to add separate user interfaces for tablets and phones to the app, you need to add extra navigation profiles for this in Mendix Studio Pro. Standard 'Tablet Web' and 'Phone Web' profiles are available that you can select. When the app is opened in a browser, Mendix will automatically determine which type of device is being used and load the corresponding navigation profile based on that. If the profile matching the device type isn't found in the app, the default navigation profile is loaded automatically.
Step 6: Set up offline mode (optional)
To make your PWA work without an internet connection, you need to add one or more offline navigation profiles to the app. Standard profiles are also available for this in Mendix. You can choose 'Responsive Web Offline', 'Tablet Web Offline', and 'Phone Web Offline'. This makes the app behave like an offline mobile app, and a local database is created on the device when the app is opened in a browser. After choosing an offline navigation profile, you can set in Mendix Studio Pro how application data is synchronized between the server and the local database.
Step 7: Configure synchronization (optional)
Mendix offers multiple options for configuring data synchronization. As an app developer, you have various options for determining which datasets need to be synchronized at which moment. In principle, synchronization always takes place when pages in the app are opened while the device is online. If there's no internet connection, an offline PWA will load the pages with data from the local database. In addition, you can set specific datasets to be synchronized in the background when the app starts up, provided the device is online. Synchronization can also be forced by the user in the app with a button, or carried out automatically in the background with a nanoflow.
Step 8: Add push notifications to PWA (optional)
To send push notifications to the users of your PWA, an additional module called 'Push Notification Connector' needs to be added to the app. This module was developed by Mendix and can easily be downloaded from the Marketplace in Studio Pro. The module works in combination with Google's Firebase Cloud Messaging (FCM) to send notifications. Until recently, it was only possible to send push notifications to users with an Android device. Thanks to recent updates by Apple in the iOS operating system, and with the Push Notification Connector module in the new version of Mendix, it's now also possible to send push notifications to iOS devices. After adding the module to your app in Mendix, a number of things need to be configured in Mendix and in FCM to establish the connection between the app and the FCM API. Using FCM Cloud Messaging is, incidentally, free.
Conclusion
A progressive web app is, in many cases, a good alternative to a native mobile app. It combines the flexibility of a website with the user experience of a native app and offers benefits for both users and the developer of an app. Developing a PWA in Mendix takes less time than a native app, and you're no longer dependent on an app store to distribute your app to users. For an offline mobile app, a PWA does still have some limitations compared to a native app that you need to take into account.
Want to know more about Mendix?
Are you considering developing (or having someone develop) a web app with Mendix? Or do you already have an online web app and want to convert it into a PWA? We're happy to help you with advice and think along about the possible applications of Mendix for your specific situation. Get in touch with one of our account managers for an introductory meeting.
Written by Steven Brusse
Low-Code Consultant