Salesforce Mobile App: Visualforce and Lightning Component Development Best Practices

Visualforce Best Practice 1: Landing Page and Performance

Avoid using a Visualforce page as the first tab in the mobile app navigation menu, as loading time increases if complex business logic runs on the app's landing page. If a Visualforce page must be used as the landing page, follow these guidelines: minimize complexity of business logic and link to more complex pages via button click; minimize all CSS and JavaScript libraries and utilize lazy loading so basic HTML loads first; and use JavaScript Remoting to improve performance.

Visualforce Best Practice 2: Navigation Between Pages

When navigating to or from a Visualforce page in the full site, the Page Reference class can instantiate a new URL. In the Salesforce mobile app, it is unsupported to return a Page Reference class to navigate to a new URL or a second Visualforce page. As a workaround, set the return statement to return null, and add conditional logic to use the mobile-supported sforce.one JavaScript library to navigate to the new page.

Visualforce Best Practice 3: Opening PDFs or Excel Files

It is possible to open a PDF or Excel file from a Visualforce page when those documents have previously been saved in the Files tab. However, dynamically generated PDF or Excel files sometimes cannot be rendered in the Visualforce page, as the mobile app's webview does not render custom content types. The recommended workaround is to refactor your controller code to save a copy of the PDF or Excel file in the Salesforce org's Files tab. Then use the sforce.one.navigateToSObject() call in your Visualforce page to navigate to the file using the file's record ID.

Visualforce Best Practice 4: window.open Calls Are Unsupported

Although full-site browsers support window.open calls to open a new Visualforce page, these are not supported in the Salesforce mobile app environment because the call breaks out of the main container, which is not allowed for security reasons. As a workaround, use conditional logic to utilize the sforce.one navigation library when a user accesses the Visualforce page via the Salesforce mobile app.

Visualforce Best Practice 5: Unsupported Visualforce components

Some Visualforce components are not supported in the Salesforce mobile app. For example, any Visualforce tag that does not have the apex namespace is not supported. Support does not troubleshoot issues with unsupported components — developers are encouraged to refactor their code to align with mobile app best practices.

Lightning Component Best Practice 1: Landing Page and Performance

Due to increased latency observed in app loading time with certain Lightning component landing pages in the mobile navigation menu, avoid using a Lightning component as the landing page if possible. If a Lightning component must be used as the landing page, minimize complexity of business logic and link to more complex Lightning components via button click; and minimize all CSS and JavaScript libraries and utilize lazy loading.

Lightning Component Best Practice 2: Supported Lightning Pages

Lightning app pages are the only supported Lightning pages for the Salesforce mobile app. Lightning record pages are also now supported in mobile. To leverage Lightning component functionality in the mobile app, either: Create a Lightning app page and add the Lightning component to it (this type of page works in Lightning Experience full site and in the mobile app); or add the Lightning component as a custom action override to the desired object's record page.

Lightning Component Best Practice 3: Navigating Between Lightning Components

The force:navigateToComponent call is deprecated as of Summer '18 and is replaced by the lightning:navigation event. When customers use lightning:navigation, the recommended approach is to nest additional Lightning components as children within the first Lightning component so that the child components are generated dynamically.

Lightning Component Best Practice 4: Lightning Out Is Not Supported in Mobile

Lightning out is the practice of embedding a Lightning component inside of a Visualforce page using the Lightning.use statement. Lightning Out is a Beta feature and is not supported for use in the Salesforce mobile app. Salesforce Support cannot provide debugging for Beta features. The recommended alternative is to launch Lightning components via a Lightning component tab or a record action override.

Lightning Component Best Practice 5: Supported Components and SLDS Styles

Not every component available for full-site development is supported on mobile devices or in the Salesforce mobile app. Review the Lightning Component Developer Guide for details on each component. Some Lightning component documentation may say "This component inherits styling from the Lightning Design System." Review the Lightning Design System documentation and confirm that the component does not say "Desktop Only," as this indicates it is unsupported in the Salesforce mobile app.

Lightning Component Best Practice 6: window Methods Are Unsupported

The window.open, window.location, and location.href methods are not supported for use within Lightning components in the Salesforce mobile app environment because they cause the code to break out of the main container. Instead, to navigate to URLs, use lightning:navigation with the standard__webPage page type attribute.

Additional Reference : Salesforce Mobile App