Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions content/en/docs/refguide/mobile/pwa-wrapper/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,8 @@ url: /refguide/mobile/pwa-wrapper/
weight: 45
description: "Package Mendix PWAs as native Android and iOS apps and use wrapper capabilities."
cascade:
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.
Expand Down Expand Up @@ -49,13 +44,13 @@ Use PWA Wrapper in the following situations:
The standard workflow is as follows:

1. Build your Mendix app as a web or PWA experience.
2. Install the PWA Wrapper from the Mendix marketplace.
3. Open the builder and configure app metadata, permissions, and signing.
4. Generate an Android APK or iOS package and distribute it through your standard mobile deployment process.
1. Install the PWA Wrapper from the Mendix marketplace.
1. Open the builder and configure app metadata, permissions, and signing.
1. Generate an Android APK or iOS package and distribute it through your standard mobile deployment process.

## Limitations

Keep the following beta limitations in mind:
Keep the following limitations in mind:

* 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
Expand Down
105 changes: 56 additions & 49 deletions content/en/docs/refguide/mobile/pwa-wrapper/build-pwa-wrapper-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ weight: 20
description: "Build Android APKs and iOS packages with PWA Wrapper."
---

{{% 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.
Expand All @@ -28,34 +24,42 @@ Install Android Studio only if you want to use Android emulators for testing.
To generate an Android APK, do the following:

1. [Open the builder](/refguide/mobile/pwa-wrapper/install-pwa-wrapper/#openbuilder) 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
* supported devices
* screen orientation
1. In the app information step, enter the app metadata:

* Version number
* Build number
* Runtime URL of the Mendix app
* App name
* Package name in reverse-domain format such as `com.example.myapp`
* Screen orientation
* Splash screen
* App icon
* Custom font

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/app-information.png" alt="Android app information step in the PWA Wrapper builder" max-width="500px" >}}

3. Review the available permissions and enable only the permissions related to 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).
1. Review the available capabilities your app uses.

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/capabilities.png" alt="Capabilities step in the PWA Wrapper builder" max-width="500px" >}}

1. Review the available permissions and enable only the permissions related to 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).

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/permissions.png" alt="Permissions step in the PWA Wrapper builder" max-width="500px" >}}

4. Go to the signing step and do one of the following:
1. 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)

* 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 click **Generate Package**.
{{< figure src="/attachments/refguide/mobile/pwa-wrapper/signature.png" alt="Signing step in the PWA Wrapper builder" max-width="500px" >}}
1. Click **Build**.

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/package-android-app.png" alt="Packaging step for building an Android APK with PWA Wrapper" max-width="500px" >}}

6. Wait for the build to complete.
7. Open the output directory from the builder.
8. Retrieve the [generated APK](#androidoutput).
9. If you want to test immediately, continue to the optional installation step and install the APK on a connected Android device.
1. Wait for the build to complete.
1. Open the output directory from the builder.
1. Retrieve the [generated APK](#androidoutput).
1. If you want to test immediately, continue to the optional installation step and install the APK on a connected Android device.

### Signing Notes

Expand Down Expand Up @@ -97,28 +101,31 @@ iOS packaging for a final signed device build requires macOS. On Windows, you ca
To generate a signed iOS package on macOS, do the following:

1. [Open the builder](/refguide/mobile/pwa-wrapper/install-pwa-wrapper/#openbuilder) and select **iOS**.
2. In the app information step, enter the app metadata:
1. 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
* supported devices
* screen orientation
* Version number
* Build number
* Runtime URL of the Mendix app
* App name
* Package name in reverse-domain format such as `com.example.myapp`
* Screen orientation
* Splash screen
* App icon
* Custom font

3. Review the available permissions and enable only the permissions related to 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 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 click **Generate Package**.
1. Review the available capabilities your app uses.

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/package-ios-app.png" alt="Packaging step for building an iOS package with PWA Wrapper" max-width="500px" >}}
{{< figure src="/attachments/refguide/mobile/pwa-wrapper/capabilities.png" alt="Capabilities step in the PWA Wrapper builder" max-width="500px" >}}

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.
1. Review the available permissions and enable only the permissions related to 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).

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/permissions.png" alt="Permissions step in the PWA Wrapper builder" max-width="500px" >}}
1. Click **Build**.
1. Wait for the build to complete.
1. Open the output directory and retrieve the generated artifacts.
1. Use the signed `.ipa` for physical-device testing or distribution when a valid signing configuration is provided.
1. Use the `.app` artifact for simulator testing when it is available.
1. If you are testing on macOS, optionally continue to the installation step to install the generated app on a simulator or connected device.

### Steps for iOS on Windows

Expand All @@ -127,8 +134,8 @@ On Windows, PWA Wrapper can prepare the iOS bundle but not complete the final si
On Windows, use the same steps 1 through 7 as in [Steps for iOS on macOS](#steps-on-mac), then continue as follows:

1. Open the output folder and locate the portable signing ZIP.
2. Copy the portable signing ZIP to a Mac.
3. 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) in *Sign PWA Wrapper Apps*.
1. Copy the portable signing ZIP to a Mac.
1. 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) in *Sign PWA Wrapper Apps*.

### iOS Notes

Expand All @@ -155,21 +162,21 @@ After packaging, the builder can help you install the generated app in supported
For Android:

1. Connect the Android device or start the emulator.
2. Select the target device in the builder.
3. Click **Install to Device**.
4. Open the app from the device launcher after installation completes.
1. Select the target device in the builder.
1. Click **Install to Device**.
1. Open the app from the device launcher after installation completes.

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/run-on-android-emulator.png" alt="Install the generated Android app on an emulator from the PWA Wrapper builder" max-width="500px" >}}

For iOS on macOS:

1. Connect the iOS device or start the iOS simulator.
2. Make sure you generated the correct artifact:
1. 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. Click **Install to Device**.
5. Launch the app from the device or simulator after installation completes.
1. Select the target device in the builder.
1. Click **Install to Device**.
1. Launch the app from the device or simulator after installation completes.

{{< figure src="/attachments/refguide/mobile/pwa-wrapper/run-on-ios-simulator.png" alt="Install the generated iOS app on a simulator from the PWA Wrapper builder" max-width="500px" >}}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ weight: 10
description: "Install and enable PWA Wrapper in Mendix Studio Pro."
---

{{% 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. After installation, you can open the builder and package your Mendix app as an Android or iOS app.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,13 @@ weight: 30
description: "Overview of the capabilities exposed by the bundled PWA Wrapper JavaScript actions."
---

{{% 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 using the actual devices you plan to support.

In the current beta release, PWA Wrapper capabilities are documented for Android and iOS.
PWA Wrapper capabilities are documented for Android and iOS.

## Supported Capabilities

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,16 @@
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."
description: "Known limitations and platform constraints for PWA Wrapper."
---

{{% 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 limitations of PWA Wrapper in the current beta release.
This page summarizes the main limitations of PWA Wrapper.

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
## Scope Limitations

Keep the following product-level limitations in mind:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ weight: 25
description: "Configure Android and iOS signing for PWA Wrapper on macOS and Windows."
---

{{% 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.
Expand All @@ -17,7 +13,7 @@ Use this page as a reference while completing [Build PWA Wrapper Apps](/refguide

## 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:
PWA Wrapper includes signing as part of the platform build flow. The following signing scenarios are supported:

| Target Platform | Host Platform | Result |
| --- | --- | --- |
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/attachments/refguide/mobile/pwa-wrapper/permissions.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.