Configure PWA: Turn a Titan Web Project into an Offline Mobile App

Business Background

A PWA, or Progressive Web App, lets you use a web project in a way that feels similar to a mobile app. Instead of downloading the app from an app store, you can access it in a supported browser and install it on your device.

When you configure a PWA for a Titan Web project, you can make the project easier to access on desktop, tablet, or mobile devices. This is useful when your team needs fast access to work orders, customer details, forms, surveys, portals, or Salesforce-connected processes while working away from a desk.

PWA is especially useful for field teams, sales teams, customer support teams, partner portals, and mobile users who need reliable access across devices.

Titan Solution

Titan lets you configure your Web project as a PWA so it can be used like a mobile app and support offline use.

When the device is offline, submitted Salesforce data can be stored locally. Once the internet connection is restored, the data is pushed to Salesforce. This helps users keep working when connectivity is unreliable and reduces the risk of losing submitted information.

PWA is a practical option when you need Salesforce-connected mobile access without building a native app.

How to Guide

Configure the Progressive Web App

1. Click the Gear icon to open the Project settings.
2. Select the Tools option.
3. Use the toggle switch to enable the PWA option. The Offline Mode option is enabled by default.

4. Click the Gear icon. The Configure PWA Settings screen opens.

5. Configure the manifest. This is mandatory.
   • The manifest is crucial to turning a regular web app into a PWA. It bridges the gap between traditional websites and mobile apps, enabling features like offline access, push notifications, and home-screen installation while providing users with a cohesive, app-like experience.
   • It is a JSON file that provides metadata about the web application. This file allows developers to control how the app behaves when installed on a user’s device and defines key details about its appearance and functionality.
   • The following must be completed:
     • Name: The full name of the application (displayed during installation or in the app store).
     • Short Name: A shorter version of the name, used with limited space (such as “Home screen”).
     • Description: A short description of the app, often used in app stores.
     • Display: This option defines the display mode. The options are standalone, browser, fullscreen, or minimal UI.
     • Orientation: This locks the app to a specific orientation, such as portrait or landscape.
   • A check mark is added next to the option on the left when all the mandatory items have been configured.

6. Configure the icons. This is mandatory.
   • The icons serve as the app’s visual identity and should align with your brand. By specifying icons instead of relying on a generic browser icon, you can control how the app appears when installed.
   • The following must be configured with these exact sizes:
     • 192 x 192 Icon Size
     • 512 x 512 Icon Size
7. Click the Select image button to configure the two icon sizes. The Add an Image screen opens.

8. Do one of the following to add an image:
   • Choose an already uploaded image
   • Upload an image
   • Add an image URL

9. Click the Apply button. The image links are added.

10. Configure the colors. This is mandatory.
    • The Web App Manifest file specifies these visual customization options to define the app’s appearance.
    • The following options must be configured:
      • Theme Color: This setting defines the color of the browser’s address bar or system UI when the PWA is launched.
      • Background Color: This setting specifies the background color of the PWA’s splash screen, which appears while the app is loading.

11. Configure the events. This is not mandatory, but you can use this functionality to inform users that they are online or offline by, for instance, showing a message.
12. Click the Configure button for online events. The onOnline Event screen opens.
13. Alternatively, click the Configure button for offline events. The onOffline Event screen opens.

14. Click the + icon next to the Start node.

15. Use the available nodes to configure an action that will be triggered in the event the PWA goes online or offline, for instance, a  Salesforce Action, Generate Documents, Send emails, Redirects, Show messages, and more.

16. Configure a Salesforce Fetch. This will fetch data from Salesforce to the cache in memory.
17. Use the toggle switch to enable the option.
18. Click the Configure Salesforce Integration button. The Salesforce Integration screen opens.

20. Click the Create New button to configure a Salesforce Get.

21. Use the drop-down list to select an object in Salesforce.
22. If necessary, add a description. The Trigger to execute the pull is automatically set to “User action.”

23. Configure any conditions.

24. Under Mapping, use the drop-down list to select fields. You can select multiple fields.
25. Click the Apply button.

26. Click the Close button.

27. Use the Process get drop-down list to select the integration.
28. Click the Apply button.

29. Save and Publish the project. The web page opens in a new tab.
30. Click the Install [PWA name] icon in the address bar to install the PWA. A pop-up message will appear.

Note:

The following is shown on the pop-up:

1. The 192×192 size icon.
2. The PWA name.
3. The project URL.

31. Click the Install button.
    • The PWA opens in a focused window. The theme color is at the top of the PWA.

Clear Salesforce Cache Action

1. Click the + icon to open the list of elements.
2. Click-and-drag a button to the canvas.
3. Click the button’s On Click Action icon.

4. Click the + icon next to the Start node.

5. Click the PWA Clear SF Cache option and then click the Next button.

6. Type a tag in the field and then click the Insert button. The node is added to the On Click Action screen.
7. Click the Apply button.

8. Save and Publish the project. When the button is clicked, the Salesforce cache will be cleared.

Update Salesforce Cache Action

1. Click the + icon to open the list of elements.
2. Click-and-drag a button to the canvas.
3. Click the button’s On Click Action icon.

4. Click the + icon next to the Start node.

5. Click the PWA Update SF Cache option and then click the Next button.

6. Type a tag in the field and then click the Insert button. The node is added to the On Click Action screen.
7. Click the Apply button.

8. Save and Publish the project. When the button is clicked, the Salesforce cache will be updated.

Uninstall the PWA

1. Click the Kebab icon and then click the Uninstall [Name] option.

2. If necessary, click the Remove this app’s data from [browser] checkbox and click the Uninstall button.