1 How Do Mendix Progressive Web Apps (PWA) Work?
A progressive web app (PWA) is a special type of web application that progressively uses more functionality from the browser to improve the user experience. Mendix progressive web apps are similar to web applications, but PWAs offer more functionality — such as an option to work partially or fully offline, an option to be added to the device’s home screen, and support for device capabilities and web push notifications. PWAs are often used for mobile apps, but they can also be used for desktop apps.
Developers can create a PWA similar to how they create a web app. This symmetry gives developers all the options they are used to, and enables them to re-use existing components and knowledge. In addition, developers can apply an offline-first approach to improve the performance and availability of their app.
Developers can enable just the PWA features their use case requires, for example Add to Home Screen support, resource caching (for things like pages, styling, and logic), or full offline support. Developers can also add functionality to leverage device functionality like the camera, location services, or add support for web push notifications. Note that the available features depend on browser capabilities.
Using the WYSIWYG page editor in Mendix Studio and Mendix Studio Pro, users can model pages and interactions that can run locally or be deployed directly from Mendix Studio and Mendix Studio Pro. When running locally, the changes are made visible directly. This is done with our instant update feature that instantly reloads the UI while preserving the current state, making testing and previewing apps a breeze.
2 How Does Mendix Support Different Screen Sizes & Devices?
Mendix pages are responsive by default, so they automatically adjust to screen size. This results in web apps that look great out of the box on screen sizes ranging from desktops to phones. For an optimized user experience, you can define separate mobile web channels for phone and tablet. The device type (as in phone, tablet, or desktop) can also be used in the logic for other scenarios.
Mendix provides several common patterns and best practices per device to help you build great user experiences. You can also extend these patterns with custom variants, as discussed in User Interface Design.
3 How Can I Extend My Progressive Web App?
Mendix offers several options for extending web apps. These are discussed in the section How Can I Extend the Mendix Front-End? of Front-End and the section How Can I Customize the Look and Feel of My Apps? of User Interface Design.
Based on settings a default Web App Manifest is generated, but developer can fully customize if needed. Next to that, both the index.html and login page can be fully customized to your needs.
4 How Can I Distribute My Progressive Web App?
As PWAs are web apps, these can be easily tested and distributed by opening the URL in a browser. For local development, Mendix generates a QR code so you can quickly test a PWA on a mobile device.
5 How Can I Test My Progressive Web App?
Mendix offers an integrated Application Testing Suite (ATS), in which (non-technical) users can test web applications using recorded test scripts on multiple browsers and multiple devices.
It is also possible to use standard test tooling, like Selenium. Because Mendix widgets have unique identifiers in the document object model (DOM), test tooling can easily leverage these IDs to create readable and robust test scripts.