PWA Configurations

TechMaju platform provides default configurations for PWA and mobile app conversions. However, it is recommended to apply customizations specifically for your instance.

PWA Configuration

The PWA Configuration doctype allows for advanced customizations to the PWA setup for your instance.

Custom: A checkbox that, when enabled, allows you to customize the site's manifest.json and asset_links.json.

Note: Once Custom is enabled, it cannot be turned off.
Manifest: A JSON field where you can view and modify the manifest.json file. Default values are provided and can be adjusted when Custom is enabled.
Asset Links: A JSON field where the asset_links.json configuration is stored. Like the Manifest, it has default values that can be modified when Custom is enabled.

What is `manifest.json`?

The manifest.json file is a key configuration file for PWAs. It defines the metadata required to install your web app on a device and ensures it behaves like a native application. This file includes details such as the app name, icons, theme colors, and other settings that enhance the PWA experience.

When configured correctly, manifest.json helps:

Provide an app-like appearance and functionality when installed.
Control how the app opens (e.g., fullscreen mode or as a standalone window).
Specify icons and other branding elements for various screen resolutions.

What is `asset_links.json`?

The asset_links.json file is a critical configuration file used in mobile PWA conversions. It helps associate your PWA with a native app, creating a seamless experience for users by removing the browser bar at the top of the screen, which would otherwise be unsightly and detract from the native feel of the app.

To configure asset_links.json:

Retrieve your app's package details from the Android Store.
Obtain the SHA fingerprint for your app signing key. This can typically be found in your Android Developer Console or by using keytool commands locally.
Add the SHA fingerprint in the Asset Links field where applicable.

Website Settings

Default Website Settings are added to the platform as seen below.

For customizations, you can replace the relevant link href values with the equivalent icon images that you want displayed for your instance.

Note: All links must be public so they are discoverable.

When Custom is enabled in the PWA Configuration, the manifest.json URL will be changed.

Note: If the Website Settings head HTML is modified manually, it is not guaranteed that the automated logic will work as expected. It is recommended that users manually verify the head HTML to ensure correctness.

Using Frappe Builder Plugin

If the Frappe Builder plugin is installed, additional steps are required to ensure the manifest is correctly added to the header.

Update the Builder Settings field Script with the following code:

// Create a new link element
var linkElement = document.createElement("link");

// Set the rel and href attributes
linkElement.rel = "manifest";
linkElement.href = "/assets/techmaju_core/manifest.json";

// Append the link element to the head of the document
document.head.appendChild(linkElement);

This script ensures that the PWA manifest is dynamically included in the document's head.

PWA Configurations