Mobile and Offline Developer Guide

Mobile App Development with Lightning Web Components and LWC Offline
Create Mobile-Ready Components
Use Mobile Device Features in Mobile Apps
Offline Considerations and Limitations
Offline Environment Details
Use Salesforce Features While Offline
Development Tools and Processes
Understand the Mobile Development Cycle
Set Up Your Development Environment
Preview Components on Mobile
Mobile Development Preview Environments
Preview from the Command Line
Preview from VS Code
Preview in the Salesforce Mobile App
Preview in Custom Mobile Apps
Validate Lightning Web Components for Offline Use
Develop Offline-Ready LWCs with the LWC Offline Test Harness
Debug Mobile Components
Customize the Offline Experience for the Salesforce Mobile App
Quick Start Tutorials
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Preview Components from Visual Studio Code

After you’ve installed the Mobile Extensions plug-in and set up Xcode and Android Studio, install Salesforce Extensions for Visual Studio Code. Now you can launch mobile previews from the VS Code command palette. Mobile previews immediately reflect visual changes you make to your component as you edit.
When you launch a mobile preview, the extension initializes a virtual device for the platform you selected—an Android emulator or an iOS simulator. You can choose:
  • The default virtual device
  • A compatible device that you’ve configured in Android Studio or Xcode
  • A new named device based on the default configuration, using a custom name that you provide
  • Your most recently used named device, if one exists
  1. To install the Visual Studio Code extension, follow the instructions for Salesforce Extensions for Visual Studio Code.
  2. While in Settings, you can also customize extension features.
    1. For Log Level, select the degree of granularity that you prefer for compiler messages.
    2. Check Remember Device to easily recall the named device that you most recently used.
  3. In Visual Studio Code, open your Lightning Web Component project.
  4. To preview your component, use one of the following methods.
    • In your project, right-click your component folder and select SFDX: Preview Component Locally.
    • In the Command Palette, enter preview component, and select SFDX: Preview Component Locally.
  5. Select Use Android Emulator or Use iOS Simulator.

    The extension searches your computer for virtual devices on the selected platform. It then displays a list of all discovered virtual device names that support Salesforce mobile previews.

  6. Do one of the following:
    • If a list of remembered device names appears, select a device from the list.
    • Enter the name of a new virtual device.
    • Leave the field blank to use the default configuration.
  7. For previews in custom native apps only: Select whether to preview the component on your mobile browser or in a custom native app. Custom apps appear in the list when your Lightning web component project has mentioned them in its configuration file. For VS Code, this file is required to be in the root directory of your project.