8.1 Mobile Architectures: PWA vs. Native Mobile

8.1 Mobile Architectures: PWA vs. Native Mobile

Scope note: Native mobile is not one of the eight published Intermediate exam sections. Navigation profiles, however, sit squarely inside the Pages section, and the PWA-versus-native distinction is the background you need in order to reason about them. Read this section for the navigation-profile mechanics and the client-versus-server model it reinforces, and treat the React Native and device-capability detail as delivery knowledge rather than guaranteed exam content.

Modern enterprise mobility demands versatile solutions that balance rapid cross-platform delivery with high-performance, resilient user experiences. In the Mendix platform, developers do not need to build redundant applications in separate toolchains for iOS, Android, and the web. Instead, Mendix provides a unified visual modeling canvas that supports two modern, production-grade mobile architectures: Progressive Web Apps (PWAs) and Native Mobile Applications.

---

Architectural Foundations: PWA vs. Native Mobile

Understanding how each mobile architecture executes under the hood is critical for making informed design decisions and passing the certification exam.

1. Progressive Web Apps (PWAs)

A Progressive Web App is an application built using standard web technologies (HTML5, CSS/SCSS, JavaScript) that runs within a mobile or desktop web browser while leveraging modern browser APIs to deliver an app-like experience.

• Runtime Environment: PWAs execute within the mobile device's web browser engine (such as Safari WebKit on iOS or Chrome Blink on Android). The application runs inside the standard browser security sandbox.
• Web App Manifest (manifest.json): A JSON metadata file that defines how the PWA appears to the user when installed on their home screen—including app name, icons, theme colors, display mode (standalone, fullscreen, or minimal-ui), and default orientation.
• Service Workers: Client-side background scripts registered by the browser that act as programmable network proxies. Service workers intercept network requests, manage cache policies (Cache API and IndexedDB), and handle background tasks such as Web Push notifications.
• Deployment and Distribution: PWAs bypass public app stores entirely. Users access the application via a standard URL in their browser and can tap "Add to Home Screen" to install it as an icon. Application updates are deployed instantly to the Mendix Cloud or hosting server without requiring app store approval cycles.

2. Mendix Native Mobile (React Native)

Mendix Native Mobile applications are built on the React Native open-source mobile application framework. Rather than rendering web pages inside an embedded browser shell (as legacy hybrid tools like Cordova or PhoneGap did), React Native compiles the user interface directly into authentic native operating system components on iOS and Android.

• Runtime Environment: The application runs as a compiled native mobile binary. It contains an embedded JavaScript runtime engine (such as Hermes or JavaScriptCore) that executes the application's visual models and nanoflows. This JavaScript engine communicates across an asynchronous bridge with the host mobile OS.
• UI Rendering: When you model a button, list view, or input field on a Native Mobile page in Mendix Studio Pro, React Native instantiates true native UI widgets at runtime—such as UIButton and UITableView on iOS, or android.widget.Button and RecyclerView on Android. This architecture delivers fluid 60 frames-per-second (FPS) scrolling, native touch physics, and authentic platform styling.
• Deployment and Distribution: Native mobile apps are packaged into native binaries (.ipa for iOS and .aab/.apk for Android) using Mendix native build tools or third-party pipelines. They are distributed through public marketplaces (Apple App Store, Google Play Store) or enterprise Mobile Device Management (MDM) platforms like Microsoft Intune or VMware Workspace ONE.

Comprehensive Architecture Comparison

---

Navigation Profiles in Mendix Studio Pro

Mendix Studio Pro structures multi-channel user journeys through Navigation Profiles. Located in the Project Explorer under App > Navigation, navigation profiles dictate how the Mendix runtime routes users depending on their device type and client runtime environment.

App
 └── Navigation
      ├── Responsive Web (Default web browser access)
      ├── Progressive Web App (Optimized installable web profile)
      └── Native Mobile (Dedicated React Native application profile)

Configuration of Mobile Profiles

1. Responsive Web Profile: Standard web access for desktop browsers and mobile web viewers. It configures the default homepage, menu items, and responsive web layouts.
2. Progressive Web App Profile: Configured as a specialized web profile. In Studio Pro, developers can toggle PWA capabilities on, configure the application manifest (icons, splash screen color, orientation), and establish an offline-capable or online-only navigation flow.
3. Native Mobile Profile: Activated when building an application intended for React Native deployment. This profile requires its own Native Mobile Default Home Page and role-based homepages.

Strict Model Separation: Web Pages vs. Native Pages

Exam Trap: A frequent source of certification exam confusion is assuming that web pages and widgets can be reused directly on Native Mobile navigation profiles. In Mendix Studio Pro, Web pages and Native Mobile pages are strictly incompatible.

• Web pages are constructed using HTML/CSS layout containers and React web pluggable widgets. If you attempt to assign a Responsive Web page as the homepage of a Native Mobile profile, Studio Pro will flag a blocking consistency error.
• Native Mobile pages use specialized React Native layout structures (such as Native Top Bar, Native Bottom Bar, and Native Scroll Containers) and can only host Native Pluggable Widgets.
• Domain models, enumerations, microflows, and non-persistable entities are shared across all profiles; however, the presentation layer (pages and layouts) remains strictly separated.

Device Capabilities Access & Hardware Integration

When architects choose between PWA and Native Mobile, hardware access is frequently the decisive factor. While modern browsers have made remarkable strides via W3C standards, native mobile execution continues to deliver deeper, more reliable hardware hooks.

1. Camera and Barcode Scanning

• PWA: Accesses the device camera using the HTML5 MediaDevices.getUserMedia() API or standard file upload dialogs (<input type="file" accept="image/*" capture>). Barcode scanning relies on client-side JavaScript decoding libraries running on the main browser thread, which can suffer from latency and poor focus in low-light environments.
• Native Mobile: Uses native camera drivers via specialized React Native modules (such as the Mendix Native Mobile Barcode Scanner). The camera stream processes frames at 60 FPS using hardware-accelerated computer vision algorithms directly on the GPU/CPU, recognizing barcodes instantly.

2. Geolocation and Background Tracking

• PWA: Leverages the W3C Geolocation API (navigator.geolocation.getCurrentPosition()). The browser requires explicit user permission per session or domain. Crucially, browsers suspend or throttle geolocation updates when the screen turns off or when the user navigates away from the browser tab.
• Native Mobile: Interacts directly with iOS CoreLocation and Android Location Services. Native mobile applications can obtain background location permissions, enabling use cases like continuous driver tracking, geofencing triggers, and asset tracking even when the device is locked in a pocket.

3. Biometric Authentication (Touch ID / Face ID)

• PWA: Can utilize the Web Authentication API (WebAuthn) for public-key credentials. However, support varies across mobile browser vendors, and fallback behaviors for enterprise single sign-on (SSO) can be clunky.
• Native Mobile: Connects directly to Apple's Secure Enclave (Face ID / Touch ID) and Android's BiometricPrompt API. Nanoflows can trigger instant biometric challenges to decrypt locally stored session tokens or authorize high-risk field transactions with sub-second response times.

4. Push Notifications

• PWA: Relies on the W3C Push API and Service Workers. While fully supported on desktop browsers and Android Chrome, Apple introduced Web Push for iOS Safari only in iOS 16.4+, and it strictly requires the user to manually add the PWA to their home screen first.
• Native Mobile: Leverages carrier-grade, OS-level push services: Apple Push Notification service (APNs) and Firebase Cloud Messaging (FCM). Native push tokens support background silent notifications (waking up the app to download data before the user even unlocks the phone), interactive notification buttons, and badge counter manipulation.

5. Advanced Peripherals (Bluetooth LE, NFC, Sensors)

• PWA: Web Bluetooth and Web NFC specifications are experimental, partially supported in Android Chrome, and strictly blocked by Apple in iOS Safari due to privacy sandboxing.
• Native Mobile: Fully supports Bluetooth Low Energy (BLE) peripheral pairing (e.g., medical devices, warehouse RFID scanners, industrial sensors) and near-field communication (NFC) chip reading through React Native bridge modules.

---

The Offline-First Paradigm: Native Mobile vs. PWA

A common intermediate exam theme is designing for the offline-first paradigm—building applications that operate normally when disconnected from the central server.

Native Mobile Offline Architecture

Mendix Native Mobile is engineered from the ground up as an offline-first architecture:

• Every native app contains an embedded SQLite relational database running on the local device file system.
• When a user logs in, Mendix synchronizes the required domain model data into SQLite.
• When the user creates, updates, or deletes records, these transactions commit directly to the local SQLite database via nanoflows without requiring any network connectivity.
• A dedicated Synchronize activity manages pushing local changes to the Mendix Server and pulling fresh updates when connectivity is restored.

PWA Offline Limitations

PWAs achieve offline capability through Service Workers caching static assets (HTML, JavaScript bundles, CSS, images) and storing structured data in IndexedDB:

• While PWAs can cache static pages and offline forms, managing complex relational domain models with cross-entity associations inside IndexedDB requires custom JavaScript plumbing.
• Mobile operating systems impose strict storage eviction quotas on browser cache. If the mobile device runs low on local disk space, the OS may purge PWA IndexedDB data without user consent, risking uncommitted offline records.

---

Architectural Tradeoffs: Decision Matrix

When evaluating customer requirements, intermediate developers should apply the following decision criteria:

---

Mobile Architecture Exam Traps

Exam Trap 1: Assuming Cordova/PhoneGap is current Mendix mobile architecture. Prior to Mendix 8, hybrid mobile applications used Apache Cordova to wrap HTML5 pages in a native WebView. Modern Mendix mobile development (Mendix 8, 9, 10+) uses React Native for Native Mobile and modern Service Workers for PWAs. Do not select Cordova-based answers on intermediate exams.

Exam Trap 2: Believing PWAs can be downloaded from the Apple App Store without third-party wrappers. Standard Mendix PWAs are installed exclusively through web browsers via web app manifests. Listing a PWA on the Apple App Store requires third-party native shell wrappers (such as PWABuilder or custom Xcode projects), which are not native Mendix features.

Exam Trap 3: Mixing Web and Native widgets. Native Mobile pages compile to React Native widgets. Dragging a web-only marketplace widget (such as a standard jQuery or web chart component) onto a Native page will result in model compilation errors in Studio Pro.