PWA

Business Background

PWA (Progressive Web App) is a type of software application built using web technologies like HTML, CSS, and JavaScript, but designed to provide a user experience similar to native mobile apps. PWAs are intended to work cross-platform, meaning they can run on any device or browser that supports them, whether a desktop, tablet, or mobile phone.

PWAs combine the best of web and mobile apps to provide a fast, reliable, and engaging user experience without requiring installation through an app store.

This functionality is especially useful for companies with, amongst others, field technicians (e.g., HVAC, telecom, or construction services) who need an app to manage work orders, check customer details, and update job statuses.

Titan Solution

With this option, you can turn your Titan Web project into a mobile app that can be used offline. For instance, when data is pushed to Salesforce while the device is offline, the data is cached locally and will be pushed as soon as the device is online again.

PWAs are an excellent choice for Salesforce-integrated applications where accessibility, performance, and offline functionality are essential. Whether for field services, partner portals, customer support, sales teams, or surveys, PWAs provide a seamless, fast, and cost-effective alternative to native apps while leveraging Salesforce’s real-time data capabilities.

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.

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.