Online-First, Offline-Smart: 4 Lessons learned from a Hybrid Mendix App
That was my case: a Mendix app designed for connected environments, with just a few cases needing to run smoothly in the field, even without internet, think remote job sites or low-connectivity zones. Rather than force everything into an offline-first app, I designed a hybrid setup that played to Mendix’s strengths in both worlds. With clever architecture and a few custom tricks, the result was a seamless user experience, no matter the connection.
Here’s what I learned:
In this blog
Author of the blog:
Chelsea Veenstra
Lesson 1: Architectural Foundation: Keep It Light
One of the best decisions I made was to separate the offline logic and entities into a separate module. Rather than reuse the full domain model, I designed a set of simplified entities specifically for offline use and kept all offline logic confined within this module.
This gave me five major advantages:
- Performance: Lightweight data structures meant faster syncs, reduced memory usage, and leaner storage on the device.
- Security: No sensitive fields were exposed in the offline model, reducing risk.
- Maintainability: The offline module was easy to version, test, and evolve independently of the main application.
- Control over sync logic: By decoupling the offline entities, I had precise control over what data gets synchronised in and out, which reduced unnecessary traffic and boosted performance.
- Scalability: Keeping all offline logic self-contained meant the boundaries between the online core and offline sibling were crystal clear, opening the door to exporting the offline module as a standalone app if volume or usage patterns ever change.
Lesson 2: Automating Sync Between Online and Offline
Mendix doesn’t automatically sync data when a device reconnects, so I built my logic around it using the “Event” widget and a custom connectivity check. Every 5 minutes, the event widget checks if the device is back online. If it is, it automatically triggers a sync with no buttons, no user intervention, and no confusion. Updates happen quietly in the background. I also added a second sync trigger whenever a user switches back to the app’s online version, ensuring their data is immediately up-to-date.
To give users better visibility into synchronization, I introduced a helper entity, SyncHelper , with entity access set so users could only view their own records. This entity stores the timestamp of the last successful sync, allowing me to display helpful UI cues like “Last synced: 2 mins ago.” Not only does this improve transparency, but it also builds trust in offline behaviour by letting users know exactly when their data was last synchronised.
Lesson 3: Switching Profiles: Online ↔ Offline
Since the application now has multiple navigation profiles, Tablet Web for online use and Tablet Web Offline for the PWA, I wanted users to switch between the two seamlessly without noticing any difference. For them, it should feel like one unified application, even though it’s switching between two separate navigation contexts under the hood.
To achieve this, I built a nanoflow that redirects users to a specific hardcoded URL based on their context:
- /?profile=Tablet for the online app
- /?profile=TabletOffline for the offline PWA
This approach gave me complete control over which profile to load, ensuring the right experience every time.
But here’s the tricky part: switching back from offline to online wasn’t smooth initially. PWAs aggressively cache resources, so users often get stuck in the offline version, even when reconnected. The fix? I extended the nanoflow to clear the browser cache before redirecting to the online app. That way, when returning online, users always get a fresh, up-to-date app version.
Why use URLs? Because simply navigating to a page part of the offline flow doesn’t switch the navigation profile. Mendix will keep using the currently active profile, and offline-specific features might silently fail. On the flip side, when returning from offline to online, calling certain logic or pages from within an offline context has many restrictions. However, using a direct URL redirect bypasses those limitations entirely. Just make sure to check for internet connectivity first before attempting the switch.
Lesson 4: When Not to Use a PWA
As powerful as Mendix PWAs are, they’re not the right fit for every situation. In our case, the PWA worked well because we only needed limited offline capabilities and access to the camera, which PWAs handle just fine on most devices. But there are scenarios where you’ll want to think twice:
– iOS limitations: PWAs on Safari (especially older versions or iPads) can behave unpredictably.
– Extensive native features: You’ll likely run into walls if your app needs biometric authentication or Bluetooth access.
– Strict offline-first: If your users expect everything to work offline all the time, a fully native app might be better.
The PWA provided the perfect middle ground for our needs, giving us offline flexibility without the overhead of a native app store deployment.
More mendix tips:
Final Thoughts
Combining online and offline capabilities in Mendix isn’t a checkbox; it’s a design choice. But with exemplary architecture and clever workarounds, you can deliver a powerful and resilient app, no matter where your users take it.
By combining a primarily online-first Mendix app with a selectively used offline PWA profile, I was able to give users a seamless experience, one where they never needed to think about connectivity, syncs, or profile switches.
Investing in a strong hybrid setup pays off, whether you’re building for field workers in remote areas or just planning for those occasional dead zones.
