Introduction

Building and deploying Native Mobile apps can be complex and resource-intensive. Until recently, Progressive Web Apps (PWAs) were limited in functionality, making native apps the preferred option. However, with recent advancements in PWA technology, PWA's now offer a compelling alternative, providing improved performance, ease of development, and cross-platform compatibility.  Moving forward, the goal is to eliminate barriers and empower businesses to choose the best technology that aligns with their needs and development capabilities.

This article outlines the necessary steps to move from a Native app to a PWA within Mendix.

Environment

• Native Mobile
• Progressive Web App

Instructions/Procedure

Before starting the process, ensure the following points are considered:

• The Native mobile app must be using Mendix version 9.24 or later, as PWAs are not supported in Mendix 8.
• If the Native mobile app is listed on app stores, it's important to consider the implications of moving to a PWA. While PWAs do not require app stores for installation, there are situations where app store distribution is still necessary. In such cases, using a wrapper, like PWABuilder.com can help package the PWA for submission to app stores.
• If the Native mobile app uses Push notifications, consider using web push notifications for the PWA to maintain this feature.
• Due to web browsers changing what is supported, offline-first PWA are only supported in the mentioned versions of Mendix.

Follow these essential steps to move a Native mobile app into a Progressive Web App (PWA):

1. Identify which features(e.g., camera, GPS) from the Native mobile app need to be available in the PWA. 
2. In Mendix Studio Pro, navigate to the Navigation settings to enable the PWA functionality for the app.
3. Design and create new pages to define the app’s business logic, ensuring responsiveness and seamless adaptation to various screen sizes and devices.
4. Implement offline capabilities to work regardless of the connection to provide a continuous experience.
5. Implement synchronization to handle data updates when the app reconnects online.
6. Test the application to make sure it works correctly with various browsers and devices.
7. Publish the PWA and use the Add to Home Screen option to install the app on your mobile device.

Outcome

After following the above steps, the Native mobile app will be successfully transitioned to a Progressive Web App (PWA) for use.

Additional information 

• Mendix documentation: Progressive Web App
• Related KBA: How to update a PWA app?