How to Configure a Custom Splash Screen in a Mendix PWA Application

An arbitrary AI image just here to illustrate the article!

A PWA Application is in essence a traditional web app packed as a mobile or desktop application. Indeed, PWA runs on an application shell provided by your browser. The big advantage is that PWA applications can be distributed outside the app stores (Google Play and Apple Store). However, there are some challenges when developing PWAs. One of them is related to the splash screen. This article will show you how to configure a simplified splash screen for your Mendix PWA Application.

Procedure

• [1] Open Studio Pro and create a new project from the Blank Web App template. Give it a name and enable the online services so that your project can be committed to the TeamServer and deployed to the Mendix Free App Environment. To test the PWA splash screen, the app must be deployed.

Creating a Mendix Web Application from the Blank Web App template

• [2] Every Mendix Web application can be turned into a PWA application. Click on the App/Navigation item in the App Explorer panel and turn on the options related to the PWA.

Turning on the PWA options in the Responsive Web Navigation profile

• [3] To see your PWA application default configuration, click on the Publish button to deploy the app in the Mendix Free App. Notice the button Install Mendix app at the toolbar.

• [4] Mendix automatically defines a default mx logo for you so that you can identify your app in the Start Menu, Desktop, or Taskbar. In addition, the default splash screen is a blank screen that remains for a few instants before your application’s Home page. Click on the mx shortcut on the Taskbar to see for yourself.

PWA running on Microsoft Edge shell

• Let’s configure the splash screen. For this procedure, we will not change the code. The goal is only to define the Splash Screen. To do this, we must change a file called manifest-overrides.webmanifest.json. This file contains some settings that override the file manifest.json, which indeed controls the PWA behavior. See more details at this link: Add a web app manifest.
• [5] First, we need to create an icon. This icon will appear in the Start Menu, Desktop, Taskbar, and also in the center of our Splash Screen. Let’s try this prompt on Bing Image Creator:

A modern logotype of the Mendix LowCode company showing only the text 'mx' 
in lowercase, using the colors darkblue and white

Mendix Logo created by the Bing’s Artificial Intelligence tool

• [6] Edit the file manifest-overrides.webmanifest.json located in [your projects_folder]\mx_splashpwa\theme\web. This file contents should resemble as below:

{
 "short_name": "MxSplashPWA",
 "name": "Mx Splash PWA",
 "background_color": "#021E43",
 "icons": [
  {
   "src": "/images/mx-logo.jpg",
   "type": "image/jpeg",
   "sizes": "512x512"
  }
 ]
}

• [7] However, if you try to run your PWA using the Edge shell, you’ll get the result below:

Oops, it seems that the Splash Screen doesn’t work on Windows Desktop 😢

• It seems that our Splash Screen almost worked on Edge. The background_color, name and short_name were applied, but the icon was only applied in the shortcuts. As expected, a similar result also occurs on Chrome.
• [8] Let’s create a Phone Web navigation profile and test the application on Android and IOS to see if the Splash Screen configuration works. Go to Navigation and add a new navigation profile by clicking on the Add navigation profile button:

• [9] After installing the PWA on an Android device, we can confirm that the icon was properly configured. And, after executing the app, we finally can see the splash screen!

Mendix PWA application with the Icon and Splash Screen configured!

• I would try the same procedure on IOS. Since I don’t have an IOS device, but I do have a Mac mini, I intended to try with the IOS simulator. But unfortunately, the IOS simulator doesn’t have the Apple Store installed and the Safari Browser seems not to work with PWA applications 😢😢😢.

Things are so easier on Android …

Conclusions

• Building PWA applications with Studio Pro is surprisingly easy. You just need to check on three checkboxes and ensure that your app is responsive (i.e. looks good on narrow screens).
• If you are required to show a Splash Screen, you need to configure the manifest file as explained in the Procedure above.
• With some UI/UX effort, your app will appear as good as a Native App. To give you an idea, the Uber mobile app is a PWA app!

References

Web app manifests | MDN

Web app manifest | web.dev

PWA vs Native Apps: What Should You Pick in 2024?

If any of the readers have an IOS device with Chrome installed, you can try the PWA app after installing it on your device:

Mendix

To install a PWA on Android:

Use web apps