How to Configure a Custom Splash Screen in a Mendix PWA Application
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.
- [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.
- [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.
- 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 filemanifest.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
- [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:
- It seems that our Splash Screen almost worked on Edge. The
background_color
,name
andshort_name
were applied, but theicon
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!
- 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 😢😢😢.
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
If any of the readers have an IOS device with Chrome installed, you can try the PWA app after installing it on your device:
To install a PWA on Android: