Publishing your Oracle APEX Progressive Web App (PWA) to the Google Play Store can significantly increase your app’s visibility and accessibility. Here’s a simple guide to help you through the process.
Prerequisites
Before you start, ensure you have the following:
A Valid PWA: Your app must be a PWA with a web manifest and be accessible via HTTPS.
Google Developer Account: Sign up for a Google developer account, which has a one-time fee of $25.
UI/UX: Have a nice UI and UX in the app, otherwise app will be rejected.
Follow Developer Content Policy: it is required to follow the polices from the following link https://play.google/developer-content-policy/
Android Device or Emulator: You need an Android device or emulator to test your app.
Patience: before published - app might be rejected a few times by Google Play, asking for some additional information about your app.
Web App Manifest
The first thing to start with is the Web Manifest, where you can configure key details of your PWA app.
A web manifest is a JSON (JavaScript Object Notation) file that provides important configuration settings for a Progressive Web App (PWA). It plays a crucial role in defining how your web application should behave when installed on a user's device.
The manifest is crucial because it bridges the gap between a web app and a native app. By defining these settings, you ensure that your PWA behaves like a native app when installed, providing a seamless and engaging user experience. This consistency is key to user adoption and satisfaction.
Here are the key elements and their importance:
name:
Purpose: This is the full name of your web application.
Importance: It is displayed to the user in various contexts, such as the app's title on the home screen and in the app launcher.
short_name:
Purpose: A shorter version of the app's name.
Importance: Used where space is limited, such as on the device's home screen.
icons:
Purpose: An array of images representing different icon sizes for your app.
Importance: Essential for providing a recognizable and professional appearance on different devices and screen resolutions. Recommended sizes include 192x192, 384x384, and 1024x1024 pixels.
theme_color:
Purpose: The color of the browser's UI elements when the app is launched.
Importance: Enhances the user's experience by providing a consistent color theme.
background_color:
Purpose: The background color of the splash screen displayed when the app is launched.
Importance: Improves the visual transition from the splash screen to the app.
display:
Purpose: Defines how the app should be displayed when launched.
Options:
fullscreen: Suitable for games or apps that require maximum screen space.
standalone: The most common setting, hides the URL bar, making the app look like a native app.
Importance: Determines the user interface and experience of the app.
start_url:
Purpose: The URL where the app should start when launched.
Importance: Ensures that the app opens at the correct entry point.
orientation:
Purpose: Specifies the default orientation (portrait or landscape) for the app.
Importance: Helps provide the best user experience by locking the app to the preferred orientation.
scope:
Purpose: Defines the navigation scope of the app, restricting which URLs the app can navigate to.
Importance: Ensures that navigation stays within the app context.
description:
Purpose: A brief description of the web application.
Importance: Provides users with an understanding of what the app does.
Example of a Web Manifest
{
"name": "myapp.com",
"short_name": "MyApp",
"icons": [
{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "icon-48x48.png",
"sizes": "72x72",
"type": "image/png"
},
...
],
"theme_color": "#007bff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"orientation": "portrait",
"scope": "/",
"description": "Description of the app"
}
More about app Manifest - https://www.w3.org/TR/appmanifest/
In APEX, you can add it by navigating to Shared Components > Progressive Web App > Custom Manifest.
Packaging Your PWA App
To package the PWA into an Android app, I will use PWABuilder, which simplifies the process for us. Follow these steps to package the APEX app using PWABuilder.
PWABuilder
This powerful tool is designed to simplify the process of converting Progressive Web Apps (PWAs) into platform-specific apps, such as those for Android, iOS, Microsoft and Meta Quest. Created by Microsoft, PWABuilder offers an intuitive and straightforward way for developers to package their web applications and make them available across various app stores, enhancing the app's accessibility and user reach.
Visit PWABuilder: Go to PWABuilder.com.
Enter Your PWA URL: Input the URL of your PWA and click Start button.
- Select Packaging Option: Click "Package for stores".
- Generate Android Package: Choose "Generate Package" under the Android section.
- Configure Package Options: On the Google Play tab, fill out the necessary information. Check if all the settngs under "All Settings" is correct.
- Download Package: Click "Download Package" to get your Android package.
com.myapp.www.twa, modify it to e.g. com.myapp.www.twa.pwa.Publishing Your PWA App
1. Deploy assetlinks.json
Under PWABuilder .zip, you will find - assetlinks.json is a JSON file used to establish a relationship between your PWA and your website. It proves that you own the domain from which your PWA is served and allows the PWA to be installed without the browser URL bar, making it look more like a native app.
Upload the assetlinks.json file to your web server to prove ownership of your PWA. Place this file in the public folder of your server, making it accessible at https://<URL to your PWA>/.well-known/assetlinks.json.
Key Elements of assetlinks.json
relation:
Purpose: Specifies the permissions or actions that are allowed.
Importance: Ensures the PWA has the necessary permissions, such as handling all URLs related to the domain.
target:
Purpose: Defines the target app and its properties.
Importance: Establishes the connection between your web app and the Android app package.
Within the target, there are several important fields:
namespace:
Purpose: Identifies the type of target. For Android apps, this is always
"android_app".Importance: Confirms the target is an Android application.
package_name:
Purpose: Specifies the package name of the Android app.
Importance: Uniquely identifies your app in the Play Store.
sha256_cert_fingerprints:
Purpose: Lists SHA-256 fingerprints of the app’s signing certificate.
Importance: Ensures the app is securely linked to your web domain.
Example of assetlinks.json
[
{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.myapp.www",
"sha256_cert_fingerprints": [
"SHA256",
"SHA256" // to be replaced later for production
]
}
}
]
2. Upload App to Google Play Store
Log into the Google Play Console: Sign in and create a new app, providing the app name and other details.
Complete Dashboard Tasks: Follow the tasks listed on the Dashboard page. It will ask for some details of your app.
Create a New Release: Under Internal Testing > New Release. In the release creation step, you’ll need to upload an Android App Bundle (.aab) file from the zip file downloaded from PWABuilder.
Generate Google Signing Key: Follow the prompts to generate this key.
Prepare app screenshots: You will need app screenshots for different devices, that will be listed on the Play Store.
Add Testers: You’ll be asked to add Gmail accounts for internal testers, so App will be available for those account on the Play Store.
3. Update assetlinks.json For Production
Copy SHA-256 String: Go to the App Signing page in the Google Play Console and copy the SHA-256 string. Menu > Setup > App Signing > Copy - SHA-256 certificate fingerprint
Add SHA-256 to
assetlinks.json:[ { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.myapp.www", "sha256_cert_fingerprints": [ "OLD_SHA", "NEW_ONE" ] } } ]Testing the App For 14 Days
Before applying for the production, Google will ask you for 20 testers that will test your app for 14 days, so it might be your employees, friends, family... a bit boring.
Application is on Play Store
