diff --git a/content/en/docs/refguide/mobile/_index.md b/content/en/docs/refguide/mobile/_index.md index c3312080d7e..e3fa84f90bd 100644 --- a/content/en/docs/refguide/mobile/_index.md +++ b/content/en/docs/refguide/mobile/_index.md @@ -33,6 +33,10 @@ With Mendix Studio Pro, you can build both native mobile apps and progressive we For more information on the capabilities of various mobile apps, see [Introduction to Mobile Technologies](/refguide/mobile/introduction-to-mobile-technologies/). +## PWA Wrapper + +If you want to package a Mendix PWA as a native Android or iOS app while keeping a web-based application architecture, use [PWA Wrapper](/refguide/mobile/pwa-wrapper/). PWA Wrapper adds a Studio Pro extension for packaging and a capabilities package for device integrations such as biometric authentication, barcode and QR scanning, file download, URL opening, printing, sharing, media upload, geolocation, local notifications, permissions, and network information. + ## Designing Mobile User Interfaces Well-designed mobile apps take various design requirements into consideration. For example, users frequently change location while using them, often do so on a small screen, and might only use the app in short bursts of activity. Luckily Mendix uses technology that addresses these requirements, and provides design documentation to help you build user-friendly apps. diff --git a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/_index.md b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/_index.md index d03e01f6915..1e14564c0a5 100644 --- a/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/_index.md +++ b/content/en/docs/refguide/mobile/introduction-to-mobile-technologies/_index.md @@ -23,6 +23,8 @@ Progressive web apps have several advantages over regular web applications: Publishing PWAs is the same as publishing regular web applications with Mendix. Once the application is deployed, users can simply access the PWA by opening the application URL. Considering PWA and web apps are equally easy to publish, we recommend you use PWAs to take advantage of their additional capabilities. +If you want to distribute a Mendix PWA through mobile app stores or package it in a native shell, see [PWA Wrapper](/refguide/mobile/pwa-wrapper/). + For more information, see [Progressive Web App](/refguide/mobile/introduction-to-mobile-technologies/progressive-web-app/). ## Native Mobile Apps {#nativemobile} diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/_index.md b/content/en/docs/refguide/mobile/pwa-wrapper/_index.md new file mode 100644 index 00000000000..814310ca351 --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/_index.md @@ -0,0 +1,69 @@ +--- +title: "PWA Wrapper" +url: /refguide/mobile/pwa-wrapper/ +weight: 45 +description: "Package Mendix PWAs as native Android and iOS apps and use wrapper capabilities." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +PWA Wrapper lets you package a Mendix progressive web app (PWA) as a native mobile app for Android and iOS. This is useful when you want to keep a web-based application architecture while distributing the app through app stores, installing it on managed devices, or adding a small set of commonly used hardware capabilities. + +In the current beta release, the scope of PWA Wrapper is limited to Android and iOS. + +PWA Wrapper is a Mendix Studio Pro extension that configures the wrapper, generates native packages, and provides a set of JavaScript actions for using a small set of commonly used hardware capabilities in your Mendix app. + +PWA Wrapper does not replace Mendix native mobile development. It is intended for PWA-based mobile apps that need native packaging together with commonly used mobile capabilities, including barcode and QR scanning, biometric authentication, media upload, geolocation, and local notifications. If you need a fully native user interface based on React Native or broader native-device integration, see [Native Mobile](/refguide/mobile/introduction-to-mobile-technologies/native-mobile/). If you want to keep a PWA architecture and add native packaging plus common mobile capabilities, PWA Wrapper is the better fit. + +## Documentation Overview + +This PWA Wrapper documentation section includes the following topics: + +* Overview: this page explains what PWA Wrapper is and when to use it +* Installation guide: [Install PWA Wrapper](/refguide/mobile/pwa-wrapper/install-pwa-wrapper/) +* Build guide: [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/) +* Signing reference: [Sign PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/) explains the signing step in the build flow +* Capabilities guide: [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/) +* Limitations: [PWA Wrapper Limitations](/refguide/mobile/pwa-wrapper/pwa-wrapper-limitations/) + +## Typical Use Cases + +Use PWA Wrapper in the following situations: + +* You have a Mendix PWA and want to distribute it as an Android or iOS app +* You want to keep a single web-based codebase while packaging it in a native shell +* You want to keep a Mendix PWA architecture while still supporting common mobile capabilities such as biometric authentication, barcode and QR scanning, media upload, geolocation, or local notifications, together with related integrations such as sharing, file download, printing, permissions, network information, or URL opening +* You want to install a packaged app on managed devices instead of exposing only a browser URL + +## Workflow Overview + +The standard workflow is as follows: + +1. Build your Mendix app as a web or PWA experience. +2. Install the PWA Wrapper from Mendix marketplace. +3. Open the builder, configure app metadata, permissions, and signing. +4. Generate an Android APK or iOS package and distribute it through your standard mobile deployment process. + +## Limitations + +Keep the following beta limitations in mind: + +* The current beta release supports Android and iOS only +* Some capabilities depend on physical device hardware and cannot be validated reliably on simulators or emulators +* Platform support varies for individual capabilities, so not every capability behaves the same way on Android and iOS +* Some integrations use standard Web APIs, which means behavior can vary between devices, operating system versions, and embedded browser engines + +For build-specific constraints, see [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/). For capability-specific constraints, see [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/). + +## Read More + +* [Install PWA Wrapper](/refguide/mobile/pwa-wrapper/install-pwa-wrapper/) +* [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/) +* [Sign PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/) +* [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/) +* [PWA Wrapper Limitations](/refguide/mobile/pwa-wrapper/pwa-wrapper-limitations/) diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps.md b/content/en/docs/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps.md new file mode 100644 index 00000000000..ef706c8d40e --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps.md @@ -0,0 +1,174 @@ +--- +title: "Build PWA Wrapper Apps" +url: /refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/ +weight: 20 +description: "Build Android APKs and iOS packages with PWA Wrapper." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +Use PWA Wrapper to generate Android and iOS packages from a Mendix PWA. The builder collects your app resources, applies wrapper configuration, and produces platform-specific build artifacts such as APK and IPA files. + +Before following this guide, make sure you have completed [Install PWA Wrapper](/refguide/mobile/pwa-wrapper/install-pwa-wrapper/). + +## Build an Android APK + +### Prerequisites + +No separate Android packaging prerequisites are required before you start the Android build flow in PWA Wrapper. + +Install Android Studio only if you want to use Android emulators for testing. + +### Steps + +To generate an Android APK, do the following: + +1. Open the builder and select **Android**. +2. In the app information step, enter the app metadata: + * app name + * app version + * Android package name in reverse-domain format such as `com.example.myapp` + * app icon + * runtime URL of the Mendix app +3. Review the available permissions and enable only the permissions needed by the capabilities your app uses. For capability-to-permission guidance, see [Capability to Permission Mapping](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/#capability-to-permission-mapping). +4. Go to the signing step and do one of the following: + * choose an existing Android signing configuration + * create a new signing configuration if this is the first Android build for the app; for platform-specific details, see [Sign Android Apps on Windows and macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-android-apps-on-windows-and-macos) +5. Continue to the packaging step and start package generation. +6. Wait for the build to complete. +7. Open the output directory from the builder. +8. Retrieve the generated APK. +9. If you want to test immediately, continue to the optional installation step and install the APK on a connected Android device. + +### Signing Notes + +The signing step is part of the Android build flow. The selected signing configuration determines how the APK can be used: + +* Unsigned packages are suitable only for limited testing scenarios such as emulators +* Signed packages are required for device installation and normal distribution workflows + +For platform-specific details about the signing step, see [Sign Android Apps on Windows and macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-android-apps-on-windows-and-macos). + +### Android Output + +The builder generates an Android APK that you can install on a connected device or submit to your standard Android distribution pipeline. + +If you use the installation step in the builder, keep the following in mind: + +* Connect the Android device before starting installation +* Unlock the device and allow debugging or installation prompts if requested +* If a newer build of the same app is already installed with incompatible signing or versioning, uninstall it first + +## Build an iOS Package + +### Prerequisites + +For iOS packaging, install or prepare the following: + +* Xcode or Xcode Command Line Tools to bundle and sign the iOS app on macOS +* Apple signing assets, including a `.p12` certificate and a `.mobileprovision` profile, if you want to build for a physical device or distribute the app +* A bundle identifier that matches the Apple signing configuration, if you want to build for a physical device or distribute the app + +Install full Xcode if you want to use the iOS simulator for testing. + +{{% alert color="warning" %}} +iOS packaging for a final signed device build requires macOS. On Windows, you can prepare the portable signing package, but you still need a Mac to generate the final signed IPA. +{{% /alert %}} + +### Steps on macOS + +To generate a signed iOS package on macOS, do the following: + +1. Open the builder and select **iOS**. +2. In the app information step, enter the app metadata: + * app name + * app version + * iOS bundle identifier in reverse-domain format such as `com.example.myapp` + * app icon + * supported device type if the builder asks for it + * runtime URL of the Mendix app +3. Review the permissions and enable only the permissions required by your app. For capability-to-permission guidance, see [Capability to Permission Mapping](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/#capability-to-permission-mapping). +4. Go to the signing step and create or select an iOS signing configuration. For platform-specific details, see [Sign iOS Apps on macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-ios-apps-on-macos). +5. Continue to the packaging step and start package generation. +6. Wait for the build to complete. +7. Open the output directory and retrieve the generated artifacts. +8. Use the signed `.ipa` for physical-device testing or distribution when a valid signing configuration is provided. +9. Use the `.app` artifact for simulator testing when it is available. +10. If you are testing on macOS, optionally continue to the installation step to install the generated app on a simulator or connected device. + +### Steps on Windows + +On Windows, PWA Wrapper can prepare the iOS bundle but not complete the final signing step. The builder produces a portable signing package that can be moved to a Mac. + +On Windows, use the same steps 1 through 7 as in [Steps on macOS](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/), then continue as follows: + +8. Open the output folder and locate the portable signing ZIP. +9. Copy the portable signing ZIP to a Mac. +10. Complete the final signing step on macOS as described in [Complete Signing on macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#complete-signing-on-macos). + +### iOS Notes + +Keep the following limitations in mind: + +* Physical iOS devices require a signed IPA +* The builder installation step for iOS is available only on macOS hosts +* Copying packaged web resources is currently not supported on iOS, so the wrapped app must load its frontend resources from the deployed Mendix runtime + +For platform-specific details about the signing step inside this build flow, see [Sign iOS Apps on macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-ios-apps-on-macos) for macOS builds and [Prepare iOS Apps on Windows](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#prepare-ios-apps-on-windows) for Windows builds. + +## Choosing Permissions and Packaging Options + +When configuring the wrapper, only enable the permissions and capabilities that your app actually uses. This reduces unnecessary prompts for end users and makes app review easier. + +For a practical mapping between capabilities and the permissions you typically need to configure, see [Capability to Permission Mapping](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/#capability-to-permission-mapping). + +If the builder offers a choice to skip copying web resources, use that option carefully. Skipping resource copy makes packaging faster, but the wrapped app will fetch its frontend resources from the runtime instead of using packaged resources. + +## Optional Installation Step + +After packaging, the builder can help you install the generated app in supported scenarios. + +For Android: + +1. Connect the Android device or start the emulator. +2. Select the target device in the builder. +3. Start installation. +4. Open the app from the device launcher after installation completes. + +For iOS on macOS: + +1. Connect the iOS device or start the iOS simulator. +2. Make sure you generated the correct artifact: + * `.ipa` for a physical device + * `.app` for the simulator +3. Select the target device in the builder. +4. Start installation. +5. Launch the app from the device or simulator after installation completes. + +If installation fails, check the builder error message first. Common causes are missing signing, incompatible provisioning, unavailable devices, or an already installed newer build. + +## Testing Limitations + +Keep the following testing limitations in mind while validating a wrapped app: + +* Hardware-dependent capabilities often require a physical device for realistic testing +* Barcode and QR scanning, camera capture, geolocation, and biometric authentication should be validated on physical devices +* Features such as network information, file download, URL opening, printing, sharing, local notifications, and permission flows can be tested first on simulators and emulators, but final verification should still happen on real devices +* Web API-backed capabilities such as network information, Share API flows, geolocation, notifications, and permission handling require a secure context. For more information, see [Secure Context](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/#secure-context) +* iOS physical-device testing requires a signed IPA +* Capability behavior can differ between test devices even within the same platform + +If your app depends on device hardware, validate the final packaged app on representative Android and iOS devices before release. + +## Next Steps + +After building the wrapper app, continue with the appropriate distribution process for your target platform. + +If you still need platform-specific details for the signing step in the build flow, see [Sign Android Apps on Windows and macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-android-apps-on-windows-and-macos), [Sign iOS Apps on macOS](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#sign-ios-apps-on-macos), or [Prepare iOS Apps on Windows](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/#prepare-ios-apps-on-windows). + +To understand which capabilities you can use from your Mendix app, see [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/). diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/install-pwa-wrapper.md b/content/en/docs/refguide/mobile/pwa-wrapper/install-pwa-wrapper.md new file mode 100644 index 00000000000..0132db4fc45 --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/install-pwa-wrapper.md @@ -0,0 +1,57 @@ +--- +title: "Install PWA Wrapper" +url: /refguide/mobile/pwa-wrapper/install-pwa-wrapper/ +weight: 10 +description: "Install and enable PWA Wrapper in Mendix Studio Pro." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +This page explains how to install and enable PWA Wrapper for Mendix Studio Pro 10.24 and later. After installation, you can open the builder and package your Mendix app as an Android or iOS app. + +You can start using PWA Wrapper while your Mendix app is still in development. This makes it possible to validate packaging, permissions, device behavior, and capability integrations early, before the app is finalized as a web app or PWA. + +In the current beta release, the scope of PWA Wrapper is limited to Android and iOS. + +## Prerequisites + +Before installing PWA Wrapper, make sure the following prerequisites are met: + +* You are using Mendix Studio Pro 10.24 or later + +Platform-specific build and testing requirements such as Xcode or Xcode Command Line Tools, optional Android emulators or iOS simulators, and Apple signing assets are described in [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/). + +## Install PWA Wrapper + +Install PWA Wrapper from the Marketplace: + +1. Open your app in Mendix Studio Pro. +2. Open the **Marketplace**. +3. Search for and install [PWA Wrapper](https://marketplace.mendix.com/link/component/243288). + +The installed module includes both parts of the feature: + +* **App Builder** adds the Studio Pro extension used to configure and build the wrapper +* **PWA Wrapper Actions** adds the JavaScript actions you can use in nanoflows to access the available capabilities + +After installing the module, Mendix Studio Pro prompts you to enable the extension. Allow that prompt to proceed so you can use PWA Wrapper. + +## Open the Builder + +After installation, open the builder from the **Extensions** menu in Mendix Studio Pro by selecting **Open App Builder**. + +## Use the Bundled JavaScript Actions + +PWA Wrapper includes JavaScript actions that you can use in your nanoflows. These actions support PWA-based mobile apps that need common mobile capabilities, such as biometric authentication, barcode and QR scanning, uploading pictures and video from the camera or gallery, geolocation, and local notifications, together with related integrations such as network information, file download using the Share API, URL opening, printing file documents, sharing, and permission requests. + +Only request the permissions your app actually uses. This keeps the generated wrapper configuration smaller and reduces app store review friction. + +## Read More + +* [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/) +* [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/) diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities.md b/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities.md new file mode 100644 index 00000000000..ce743bbb0d3 --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities.md @@ -0,0 +1,78 @@ +--- +title: "PWA Wrapper Capabilities" +url: /refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/ +weight: 30 +description: "Overview of the capabilities exposed by the bundled PWA Wrapper JavaScript actions." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +PWA Wrapper includes bundled JavaScript actions that a Mendix PWA can call from nanoflows. These actions expose device features through a combination of wrapper-native bridges and supported Web APIs. + +Support can vary by platform, operating system version, browser engine, and configured permissions. Always test the capabilities you depend on on the actual devices you plan to support. + +In the current beta release, PWA Wrapper capabilities are documented for Android and iOS. + +## Supported Capabilities + +Verify the final packaged app on representative physical devices before release. + +| Capability | Description | Physical device required | Secure context required | +| --- | --- | --- | --- | +| Scan barcode and QR code | Opens the camera to scan supported barcode and QR formats from a nanoflow. | Yes | No | +| Network information | Reads the current connection state so the app can react to online or offline conditions. | No | Yes | +| File download using the Share API | Hands a generated file to the system share flow so the user can save or forward it. | No | Yes | +| Open URL | Opens an external or deep link from the wrapped app. | No | No | +| Print file documents | Sends a supported file to the platform print flow. | No | No | +| Share | Shares text, links, or files with other apps or system services. | No | Yes | +| Upload pictures from the camera or gallery | Lets the user capture a photo or select an existing image for upload. | Yes | No | +| Upload videos from the camera or gallery | Lets the user capture a video or select an existing video for upload. | Yes | No | +| Geolocation | Retrieves the device location for map, tracking, or location-aware flows. | Yes | Yes | +| Local notification | Schedules or shows notifications generated by the app on the device. | No | Yes | +| Permissions | Checks or requests supported runtime permissions from the app flow. | No | Yes | +| Biometric authentication | Checks biometric availability and prompts the user for biometric authentication. This depends on device hardware and biometric enrollment. | Yes | No | + +## Secure Context + +Some PWA Wrapper capabilities rely on standard Web APIs that are only available in a secure context. + +A secure context typically means one of the following: + +* the app is loaded over HTTPS +* the app is accessed from `localhost` during local development + +If the wrapped app is loaded from an insecure HTTP origin, capabilities that depend on Web APIs such as geolocation, notifications, permission handling, network information, or Share API flows may not work as expected. + +## Capability to Permission Mapping + +Use the following table as a practical guide when deciding which permissions to configure in the builder. + +{{% alert color="info" %}} +This mapping is guidance, not a fixed contract. Exact permission prompts can vary by platform, operating system version, browser engine, and whether the capability is implemented through a native bridge or a Web API. +{{% /alert %}} + +| Capability | Android builder permissions | iOS builder permissions | +| --- | --- | --- | +| Scan barcode and QR code | `Camera` | `Camera Usage` | +| Upload pictures from the camera or gallery | `Camera` | `Camera Usage` | +| Upload videos from the camera or gallery | `Camera`, `Record Audio` | `Camera Usage`, `Microphone Usage` | +| Geolocation | `Fine Location`, `Coarse Location` | `Location - When In Use Usage` | +| Local notification | `Notifications` | No explicit builder permission message required | + +When a capability relies on camera, location, or notifications, align the configured builder permissions with the JavaScript actions your app actually calls. For video capture flows, also verify whether the target platform requires microphone permission. + +## Designing with Capabilities + +When you build a Mendix app with PWA Wrapper capabilities, follow these guidelines: + +* Request permissions only when they are needed in the user flow +* Add clear fallback logic for devices where a capability is unavailable +* Verify native behavior on physical devices, not only simulators or emulators +* Align the configured wrapper permissions with the JavaScript actions your app calls + +For more general guidance on permissions in Mendix mobile apps, see [App Permissions](/refguide/mobile/using-mobile-capabilities/generic-permission-action/). diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-limitations.md b/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-limitations.md new file mode 100644 index 00000000000..f389c41b79f --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/pwa-wrapper-limitations.md @@ -0,0 +1,57 @@ +--- +title: "PWA Wrapper Limitations" +url: /refguide/mobile/pwa-wrapper/pwa-wrapper-limitations/ +weight: 35 +description: "Known limitations and platform constraints for PWA Wrapper in the current beta release." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +This page summarizes the main cross-cutting limitations of PWA Wrapper in the current beta release. + +Use this page together with [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/), [Sign PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/), and [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/). + +## Beta Scope Limitations + +Keep the following product-level limitations in mind: + +* The current beta release supports Android and iOS only +* Capability coverage is limited to the integrations currently provided by the bundled PWA Wrapper JavaScript actions + +For an overview of the supported capabilities, see [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/). + +## Build and Installation Constraints + +Keep the following build and installation constraints in mind: + +* Final iOS signing requires macOS +* Copying packaged web resources is currently not supported on iOS, so the wrapped iOS app must load frontend resources from the deployed Mendix runtime +* Real-device installation requires signed packages +* If an incompatible or newer build of the app is already installed on a device, it may need to be uninstalled before a new build can be installed + +For build-specific steps and host-platform behavior, see [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/). + +## Capability Limitations + +Some capabilities have additional platform or runtime constraints: + +* Hardware-dependent features such as biometrics, camera capture, barcode and QR scanning, and geolocation should be treated as physical-device scenarios +* Features that rely on standard Web APIs can behave differently depending on operating system version, embedded browser engine, and secure-context availability +* Platform support is not identical across all capabilities, so business-critical behavior must be verified on the target devices + +For capability-specific requirements such as physical-device testing, secure context, and permission mapping, see [PWA Wrapper Capabilities](/refguide/mobile/pwa-wrapper/pwa-wrapper-capabilities/). + +## Signing Limitations + +Keep the following signing-related constraints in mind: + +* iOS signing requires a matching `.p12` certificate, `.mobileprovision` file, and bundle identifier +* Development and distribution signing assets are not interchangeable +* A `.cer` file by itself is not enough for PWA Wrapper iOS signing; you need the exported `.p12` file and its passphrase + +For the full signing workflow and asset requirements, see [Sign PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/). \ No newline at end of file diff --git a/content/en/docs/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps.md b/content/en/docs/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps.md new file mode 100644 index 00000000000..2c859436df4 --- /dev/null +++ b/content/en/docs/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps.md @@ -0,0 +1,242 @@ +--- +title: "Sign PWA Wrapper Apps" +url: /refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/ +weight: 25 +description: "Configure Android and iOS signing for PWA Wrapper on macOS and Windows." +beta: true +--- + +{{% alert color="info" %}} +This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/). +{{% /alert %}} + +## Introduction + +This page explains the signing step within the PWA Wrapper build flow. It covers Android signing on Windows and macOS, iOS signing on macOS, and the Windows-to-macOS handoff required for final iOS signing. + +Use this page as a reference while completing [Build PWA Wrapper Apps](/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps/). + +## Signing in the Build Flow + +PWA Wrapper includes signing as part of the platform build flow. In the current beta release, the following signing scenarios are supported: + +| Target Platform | Host Platform | Result | +| --- | --- | --- | +| Android | Windows or macOS | Create a local signing configuration and generate a signed APK | +| iOS | macOS | Create an iOS signing configuration and generate a signed IPA | +| iOS | Windows | Prepare the iOS package and portable signing bundle, then complete signing on macOS | + +Keep the following rules in mind: + +* Unsigned Android packages are suitable only for limited emulator testing +* Unsigned iOS packages are suitable only for simulator scenarios +* Real-device installation and store distribution require signing +* If you plan to ship app updates, keep using the same signing identity for later builds of the same app + +## Manage Signing Configurations + +To manage signing configurations in PWA Wrapper, do the following: + +1. Open your app in Mendix Studio Pro. +2. Open the **Extensions** menu. +3. Select **Open App Builder**. +4. Select the target platform. +5. Go to the signing step and create or select a signing configuration. + +PWA Wrapper stores signing configurations locally on your machine. By default, the signing data is stored in the following locations: + +* Windows Android signing data: `%USERPROFILE%\.android\config` +* macOS Android signing data: `~/.android/config` +* Windows iOS signing data: `%USERPROFILE%\.ios\config` +* macOS iOS signing data: `~/.ios/config` + +{{% alert color="warning" %}} +Treat keystores, `.p12` files, provisioning profiles, and generated output packages as sensitive files. Back up the signing material you need for future updates and do not commit it to source control. +{{% /alert %}} + +## Sign Android Apps on Windows and macOS + +Android signing works on both supported host platforms. + +### When to Sign + +Use the following guidance when choosing a signing approach: + +* **No signing** is suitable only for local emulator testing +* A signed APK is required for installing the app on Android devices +* A release-signed package is required for normal distribution workflows such as Google Play submission + +### Create an Android Signing Configuration + +In the current beta flow, PWA Wrapper creates the Android keystore for you when you create a new Android signature. + +To create an Android signing configuration, do the following: + +1. Open PWA Wrapper and select **Android**. +2. Go to the signing step. +3. Select **Create New Signature**. +4. Enter a unique signature name such as `test`, `qa`, or `production`. +5. Save the signature. + +PWA Wrapper then creates the local keystore and stores the signing metadata for reuse in later builds. + +### Build a Signed Android Package + +After creating the signature, do the following: + +1. Select the signature in the Android build flow. +2. Complete the remaining packaging steps. +3. Generate the APK. +4. Install the APK on a test device or move it to your Android distribution pipeline. + +### Android Signing Recommendations + +Keep the following recommendations in mind: + +* Use one stable signing configuration per app line if you plan to publish updates +* Back up the generated Android signing directory before moving to another machine +* Validate the signed APK on a physical Android device before release + +## Sign iOS Apps on macOS + +Final iOS signing is supported on macOS. + +### Before You Start + +Before creating the iOS signing configuration, make sure you have the following: + +* An Apple Developer account with permission to manage certificates and provisioning profiles +* A bundle identifier for the wrapped app +* A certificate export in `.p12` format +* A provisioning profile in `.mobileprovision` format +* The passphrase for the `.p12` file + +For Apple-specific background and asset preparation, use the official Apple documentation: + +* [Certificates overview](https://developer.apple.com/help/account/certificates/certificates-overview/) +* [Create a development provisioning profile](https://developer.apple.com/help/account/provisioning-profiles/create-a-development-provisioning-profile/) +* [Import and export keychain items using Keychain Access on Mac](https://support.apple.com/guide/keychain-access/import-and-export-keychain-items-kyca35961/mac) + +Before building, verify the following: + +* the bundle identifier in PWA Wrapper matches the app identifier used in the provisioning profile +* the provisioning profile was generated using the same certificate that was exported as the `.p12` file +* the certificate and provisioning profile type match the intended use, such as development for testing or distribution for release +* the target test devices are included in the provisioning profile when required + +If you receive signing assets from another team, ask specifically for the exported `.p12` file, the `.mobileprovision` file, and the `.p12` passphrase. A `.cer` file by itself is not sufficient for PWA Wrapper. + +### Create the iOS Signing Configuration + +After you have the Apple signing files, do the following: + +1. Open PWA Wrapper and select **iOS**. +2. Go to the signing step. +3. Select **Create New Signature**. +4. Enter a unique signature name. +5. Upload the `.mobileprovision` file. +6. Upload the `.p12` file. +7. Enter the `.p12` passphrase. +8. Save the signature. + +PWA Wrapper stores the signing configuration for later iOS builds. + +### Build the Signed iOS Package on macOS + +After the signature is configured, do the following: + +1. Select the signature in the iOS build flow. +2. Complete the packaging steps. +3. Generate the package. +4. Retrieve the generated output from the build folder. + +Depending on your configuration, the output can include the following: + +* A signed device `.ipa` +* A simulator `.app` + +### macOS Signing Recommendations + +Keep the following recommendations in mind: + +* Use a development certificate for test-device installation and a distribution certificate for production delivery +* Make sure the bundle identifier in PWA Wrapper matches the app identifier used in Apple signing +* If device installation fails, verify that the device UDID is included in the provisioning profile you used + +## Prepare iOS Apps on Windows + +Windows can prepare iOS packages, but it cannot complete the final signing step. + +{{% alert color="warning" %}} +If you build an iOS package on Windows, you still need a Mac to produce the final device-ready IPA. +{{% /alert %}} + +### Prepare the Signing Files + +Before starting the Windows flow, obtain the following files from your Apple signing process: + +* A `.p12` certificate export +* The `.p12` passphrase +* A matching `.mobileprovision` file + +You can create these files yourself through the Apple Developer workflow, or receive them from the team that manages your Apple signing assets. For Apple-specific certificate, provisioning profile, and Keychain export steps, see the official Apple documentation linked in [Before You Start](/refguide/mobile/pwa-wrapper/sign-pwa-wrapper-apps/). + +If the Apple signing assets are created on a Mac by another team member, confirm that the delivered files are a usable `.p12` export and a matching provisioning profile. A `.cer` file alone is not sufficient for PWA Wrapper. + +### Create the iOS Signing Configuration + +To configure iOS signing in PWA Wrapper on Windows, do the following: + +1. Open PWA Wrapper and select **iOS**. +2. Go to the signing step. +3. Select **Create New Signature**. +4. Enter a unique signature name. +5. Upload the `.mobileprovision` file. +6. Upload the `.p12` file. +7. Enter the `.p12` passphrase. +8. Save the signature. + +### Generate the Portable Signing Bundle on Windows + +After the signature is configured, do the following: + +1. Continue through the iOS packaging flow. +2. Generate the package. +3. Open the output directory. +4. Locate the portable signing ZIP created by PWA Wrapper. + +The Windows output can include a portable signing ZIP together with other prepared iOS artifacts. The ZIP is intended to be moved to a Mac for the final modify-and-sign step. + +### Complete Signing on macOS + +To finish the Windows-generated package on macOS, do the following: + +1. Copy the portable signing ZIP to a Mac. +2. Unzip the package. +3. Open Terminal and change to the extracted directory. +4. Run `chmod +x run-on-mac.sh`. +5. Set the `.p12` passphrase as an environment variable by running `export P12_PASSWORD='your-passphrase'`. +6. Run `./run-on-mac.sh`. +7. Open the `output/` folder and retrieve the generated device `.ipa` and simulator `.app`. + +When the portable signing ZIP includes the `signing/` folder, the script can use the bundled `.p12` and `.mobileprovision` files for final signing. + +## Troubleshooting and Limitations + +Keep the following PWA Wrapper-specific signing limitations in mind: + +* Android real-device installation requires a signed package +* iOS real-device installation requires a signed IPA +* The iOS install step in PWA Wrapper is available only when the builder runs on macOS +* Changing signing identity between releases prevents normal upgrade installation for apps that are already installed +* Provisioning profiles, certificates, and bundle identifiers must match the app you are packaging + +Common iOS signing mistakes include the following: + +* uploading a `.cer` file instead of a `.p12` file +* exporting a certificate without its private key +* using a provisioning profile created for a different bundle identifier +* using a development certificate with a distribution profile, or the reverse +* forgetting to include the target test device in the provisioning profile + +If signing succeeds but installation still fails, verify the bundle identifier, signing type, provisioning profile, and target device eligibility before rebuilding. \ No newline at end of file