Mobile Offline Developer Guide

Version 58.0, Summer ’23

PREVIEW

Note: This release is in preview. Features described in this document don’t become generally available
until the latest general availability date that Salesforce announces for this release. Before then, and @salesforcedocs
where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability Last updated: March 29, 2023
within any particular time frame or at all. Make your purchase decisions only on the basis of generally
available products and features.
© Copyright 2000–2023 Salesforce, Inc. All rights reserved. Salesforce is a registered trademark of Salesforce, Inc., as are other

names and marks. Other marks appearing herein may be trademarks of their respective owners.
CONTENTS

Chapter 1: Offline App Development with Lightning Web Components and LWC
Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About This Developer Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
LWC Offline Enabled Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Learn Lightning Web Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Learn Lightning Web Components with Trailhead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Learn Lightning Web Components with Documentation . . . . . . . . . . . . . . . . . . . . . . . . 3

Chapter 2: Considerations and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

General Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Considerations for Field Service Mobile App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Base Components Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Modules Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Wire Adapters Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Entity Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Metadata and Custom Metadata Types Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Chapter 3: Offline Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

What Happens When Something Isn’t Primed (Preloaded) . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Create Components with Offline Analysis In Mind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Determine Online or Offline Status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapter 4: Use Salesforce Features While Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Use Apex While Mobile and Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Use Apex in Lightning Web Components While Online . . . . . . . . . . . . . . . . . . . . . . . . . 21
Apex Results Are Separate from Other Primed Data . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Additional Considerations for Apex in an Offline-Enabled Mobile App . . . . . . . . . . . . . . 24
Understand Apex Behavior While Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Additional Documentation for Apex in Lightning Web Components . . . . . . . . . . . . . . . . 26
Use Images in an LWC Offline-Enabled Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Image Priming and Offline Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Use Images Uploaded as Files (ContentDocument) in an LWC . . . . . . . . . . . . . . . . . . . 27
Use Images Uploaded as Asset Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Navigation User Experience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Base Components with Built-In Navigation Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Programmatic Navigation Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Chapter 5: Development Tools and Processes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Set Up Your Development Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Contents

Validate Lightning Web Components for Offline Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Install the Komaci Static Analyzer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Troubleshoot Installation Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Validate Components During Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Static Analyzer Validation Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Develop Offline-Ready LWCs with the LWC Offline Test Harness . . . . . . . . . . . . . . . . . . . . . . 38
Prerequisites & Setup Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Download and Install — Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Download and Install — iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Use the Test Harness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Debug Lightning Web Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Chapter 6: Quick Start Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Develop a Lightning Web Component Quick Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Field Service Org Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
iOS Simulator Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Android Emulator Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Workspace Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Create and Configure a Lightning Web Component . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Debug Lightning Web Components in the Field Service Mobile App . . . . . . . . . . . . . . . . . . . 59
Install Local Development Server Plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Debug in iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Debug in Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
CHAPTER 1 Offline App Development with Lightning Web
Components and LWC Offline
In this chapter ... Customize Salesforce mobile apps with features built with Lightning web components, and deploy your
customizations to mobile users. Create components and apps that work even when mobile devices are
• About This Developer offline while in the field. Optimize your features to handle low- and no-network connectivity situations
Guide with grace.
• LWC Offline Enabled
LWC Offline is an advanced runtime environment for Lightning web components. Available only for
Apps
mobile devices, it replaces the standard Lightning components runtime, and augments it with features
• Learn Lightning Web designed specifically for mobile and offline use.
Components
• Briefcase Builder lets you define advanced data priming strategies, customized for the objects and
records that your users need access to while offline.
• A new priming engine preloads records when you prepare to go offline.
• A durable on-device cache holds primed records for offline access, including changes made while
offline.
• Lightning Data Service (LDS) is enhanced to work seamlessly with primed records. While online, LDS
uses the cache as a performance enhancer. While offline, LDS allows transparent access to existing,
changed, and even new records.
There are many, many other changes that you (mostly) don’t need to worry about. The overall goal for
LWC Offline is to let you develop Lightning web components that “just work” whether you’re online or
offline.

1
Offline App Development with Lightning Web Components About This Developer Guide
and LWC Offline

About This Developer Guide

Documentation for LWC Offline is a work in progress, and will improve continuously throughout the pilot and beta programs. The initial
release of the program documentation is shared across several LWC Offline-enabled mobile apps. Use this developer guide for the
purpose of evaluating LWC Offline in your own orgs.
Where possible, documentation refers to LWC Offline features generally, and applies to all LWC Offline-enabled mobile apps. However,
these efforts are in progress and incomplete. You’ll likely notice references to Field Service in the documentation, and some instructions
might be specific to Field Service. In the early stages of this pilot, we’ll ask for your forbearance and forgiveness.
In the meantime, if you’re unable to interpret these differences, don’t hesitate to reach out with questions on the relevant Trailblazer
community.

LWC Offline Enabled Apps

LWC Offline is available as an optional, opt-in enhancement to existing Salesforce mobile apps.
The following apps can use LWC Offline when the feature is enabled for your org.
• Salesforce mobile app
Available as a closed pilot. Submit a request to join the program.

• Field Service mobile app

Available as GA feature that any Field Service org can opt into. Join the Trailblazer community for access to additional resources.

Learn Lightning Web Components

To create Lightning web components for use in LWC Offline-enabled mobile apps, you must learn the basics of Lightning web components.
Lightning Web Components (the name of the framework) was introduced in 2018, and represents the best, most performant, and most
modern framework for building custom apps for Salesforce. Learning Lightning web components lets you build apps for desktop, mobile
online, and mobile offline environments.

IN THIS SECTION:
Learn Lightning Web Components with Trailhead
If you’re not already an experienced LWC developer, the best way to learn Lightning web components is with the extensive collection
of lessons and projects on Trailhead.
Learn Lightning Web Components with Documentation
Use the Lightning Web Component Developer Guide to understand the Lightning Web Components framework and how to use it
with Salesforce.

Learn Lightning Web Components with Trailhead

If you’re not already an experienced LWC developer, the best way to learn Lightning web components is with the extensive collection
of lessons and projects on Trailhead.

2
Offline App Development with Lightning Web Components Learn Lightning Web Components with Documentation
and LWC Offline

Comprehensive Trailhead Trails

For the most complete foundation, start with these Trailhead trails to get you up to speed with Lightning web components, including
necessary JavaScript skills.
• Learn to Work with JavaScript
Lightning web components are implemented using modern HTML, JavaScript, and CSS. We suggest that you have at least an
intermediate level of skill with JavaScript. This trail consists of two modules that make sure your JavaScript background is solid.

• Build Lightning Web Components

This Trailhead trail provides a complete foundation for working with Lightning web components.

Essential Trailhead Modules

To focus only on the essentials, these Trailhead modules provide the conceptual basics of Lightning web component development.
Every developer working with LWCs should complete all of these modules to ensure they have solid, basic skills.
• Lightning Web Components Basics
• Lightning Web Components and Salesforce Data
• Communicate Between Lightning Web Components

Focused Trailhead Projects

These projects get you going fast with Lightning web components. Fast is exciting!

Note: Most LWC modules and projects are general purpose, rather than specific to a particular mobile app. For setting up to
specifically work with Lightning web components and your specific mobile app, such as the Field Service mobile app, follow the
steps provided in Set Up Your Development Environment on page 35.
• Quick Start: Lightning Web Components
• Set Up Your Salesforce Mobile Developer Tools for Lightning Web Components
• Set Up Your Lightning Web Components Developer Tools

MOAR, MOAR, MOAR

These modules and projects are great if you want to learn specific areas of Lightning web components, or have experience with our
other UI customization frameworks, such as Visualforce or Lightning Aura components.
• Lightning Web Component Troubleshooting
• Lightning Web Components Tests
• Lightning Web Components for Aura Developers
• Lightning Web Components for Visualforce Developers
• Build a Bear-Tracking App with Lightning Web Components

Learn Lightning Web Components with Documentation

Use the Lightning Web Component Developer Guide to understand the Lightning Web Components framework and how to use it with
Salesforce.

3
Offline App Development with Lightning Web Components Learn Lightning Web Components with Documentation
and LWC Offline

The Lightning Web Component Developer Guide is the canonical resource for all details of developing with Lightning web components.
After you’ve learned the conceptual basics, you continue to use the developer guide to find answers to specific “how do I...?”-type
questions. The developer guide also includes the Component Reference, which provides reference documentation for all of the built-in
base components available in the framework.
Mobile-specific documentation for Lightning web components includes the following:
• Preview Lightning Web Components on Mobile (full details on development tools)
• Create Mobile-Ready Components (guidelines and best practices)
• Use Mobile Device Features in Mobile Apps (add platform native features to LWCs)
While not specific to Lightning web components or LWC Offline, the following documentation can be helpful during your development
efforts.
• Field Service Developer Guide
• Field Service Mobile App Salesforce Help
• Briefcase Builder Salesforce Help
• Quick Actions Salesforce Help
• Salesforce Mobile Debugging Tools
• Field Service Mobile LWCs Trailblazer community
• Mobile Automated Testing Trailblazer community

4
CHAPTER 2 Considerations and Limitations
In this chapter ... LWC Offline is designed to let you build great apps that can function without a network connection, but
it’s not the full Salesforce service. Lightning web components have a number of limitations when used
• General offline, including missing capabilities, reduced performance, and software defects (bugs). Keep these
Considerations limitations in mind as you design and develop your offline customizations.
• Considerations for
Field Service Mobile
App
• Base Components
Support
• Modules Support
• Wire Adapters
Support
• Entity Support
• Metadata and
Custom Metadata
Types Support

5
Considerations and Limitations General Considerations

General Considerations
Consider these general details when planning your Lightning web components development efforts.
• The Lightning Web Components framework includes a wide range of built-in components, a number of modules that enable features,
and a range of wire adapters for data access. The implementation available in LWC Offline supports a subset of these features. See
additional details elsewhere in this guide.
• You can only use Lightning web components that are used as global or object-specific quick actions.
• Object-specific quick actions can only be added to record detail pages.
• Your components must be Lightning web components.
– You can’t use Aura-based Lightning components, despite the similar name.
– You can’t use Visualforce at all with Lightning web components.

• Headless quick actions aren’t supported at this time.

• Deep links to quick actions are supported. Deep links to global quick actions aren’t supported at this time.
• To work offline, your custom components must be statically analyzable by the Salesforce service so that they can be preloaded
before going offline. See Offline Considerations for details.
• Calling alert() from JavaScript in a Lightning web component is unsupported. It’s also an anti-pattern in Lightning web
components. For debugging and logging, use console.log() and console.error(). Better yet, use Chrome DevTools
or Safari Web Inspector.
• For user-facing messages, the correct pattern is to use a toast message. However, the lightning/platformShowToastEvent
module isn’t supported. Use LightningAlert instead.
• Lightning web components perform minimal validations while offline. It’s possible for a record to be changed, or a new record
created, which passes local validation while offline. However, it’s possible for this record to subsequently fail server-side validation
when the draft record is uploaded. Record drafts that fail server-side validation block the offline queue and prevent record changes
from uploading. Manually clear the invalid record to unblock the queue.
• Depending on context, it can be unclear which field of a draft record has failed server-side validation.
• Some Lightning web components don’t render properly due to incorrect form factor detection in certain circumstances. See the
known issues in Modules Support for details.
• A maximum of 50 records are fetched for each related list. The list size indicator — for example, “(50+)” — reflects the number of
records downloaded to the app, not the number of records that exist. This limit will be customizable in a future release.
• Priming fails if the number of page references in the priming hierarchy is greater than 1000.

Considerations for Field Service Mobile App

The following considerations apply to LWC Offline when you run your components in the Field Service Mobile app.
These considerations apply to LWCs only when run in the Field Service mobile app.
• Global quick actions are available on all pages that have the Actions menu. They do not receive the record ID of the current record
when invoked from a record detail page.
• A Community license user who opens a Service Appointment can experience a missing record error. This is a known issue with this
specific user type.
• Task objects added to a briefcase aren’t primed. If a briefcase contains a Task object and priming is attempted, an error message is
displayed. However, other objects in the briefcase are primed. To resolve the error, remove Task objects from the briefcase.

6
Considerations and Limitations Base Components Support

• There’s a conflict between Appointment Assistance and LWC Offline that can result in missing URLs. See this known issue for details.
• (iOS only) Changes to Lightning web components are loaded into the app only when the app is fully quit and then relaunched (a
“cold start”).

Base Components Support

Base components are described in the Lightning Web Components Reference. All components are being reviewed for correct behavior
in LWC Offline-enabled mobile apps.
The following table provides details for base components where support is incomplete or not available. Base components that are
generally available but not listed here are supported.
•
— Limited Support. Can be used, but has known (and possibly unknown) issues.
•
— Not Supported. Doesn’t work, or shouldn’t be used.

Component Status Comments

lightning-combobox Supported for use, but not mobile friendly.

lightning-datatable This complex component was never designed for mobile use, and
its behavior in mobile contexts is subject to change without notice.
See this post in the Trailblazer community for sample code for a
simplified, mobile-friendly data table.

lightning-file-upload

lightning-formatted-address The static map feature only works in online mode. If a user is offline,
an error message is displayed instead.

lightning-formatted-date-time Supported for en-US locale only.

lightning-formatted-rich-text URLs don’t open within a navigation view; external URLs work, but
links to records don’t. Additionally, you can’t open any URL with a
target="_blank" attribute.

lightning-formatted-time Supported for en-US locale only.

lightning-formatted-url URLs don’t open within a navigation view; external URLs work, but
links to records don’t. Additionally, you can’t open any URL with a
target="_blank" attribute.

lightning-input Supported for en-US locale only.

Image uploading using the type="file" attribute isn’t
supported. See Upload Photos from LWCs Using
lightning-input Base Component in the Trailblazer
community for additional details and a partial work-around.

lightning-input-address The address lookup feature only works in online mode. If a user is
offline, an error message is displayed instead.

7
Considerations and Limitations Base Components Support

Component Status Comments

lightning-input-rich-text Associated components,
lightning-rich-text-toolbar-button and
lightning-rich-text-toolbar-button-group,
aren’t supported.
Image uploading within a rich text field isn’t supported.

lightning-map This component requires a connection to a mapping service, and

can’t work while offline.
If users access this component while offline, an error message is
displayed instead.

lightning-pill URLs don’t open within a navigation view; external URLs work, but
links to records don’t.

lightning-pill-container URLs don’t open within a navigation view; external URLs work, but
links to records don’t.

lightning-record-form lightning-record-form doesn’t work with draft records,

that is, records created while offline. See Considerations for
getRecordUi for an explanation of the limitations.
Lookup fields are read-only.
Getters and setters aren’t supported in offline priming. In your
custom components, make sure attributes passed to
lightning-record-form are either hardcoded or have a
simple API.

lightning-record-edit-form lightning-record-edit-form doesn’t work with draft

records, that is, records created while offline. See Considerations
for getRecordUi for an explanation of the limitations.
Lookup fields are read-only.
Getters and setters aren’t supported in offline priming. In your
custom components, make sure attributes passed to
lightning-record-edit-form are either hardcoded or
have a simple API.
If the input field isn’t on the page layout, you must pass the field
in using optional-fields.

lightning-record-view-form lightning-record-view-form doesn’t work with draft

records, that is, records created while offline. See Considerations
for getRecordUi for an explanation of the limitations.
Getters and setters aren’t supported in offline priming. In your
custom components, make sure attributes passed to
lightning-record-view-form are either hardcoded or
have a simple API.

8
Considerations and Limitations Modules Support

Component Status Comments

If the input field isn’t on the page layout, you must pass the field
in using optional-fields.

lightning-tab Supported for use, but not mobile friendly.

lightning-tabset Supported for use, but not mobile friendly.

lightning-tree-grid

Additional Component Considerations

Several localization and globalization issues affect a number of components. These issues generally affect formatting of dates, times,
currencies, and numbers. They’re mostly irritating, but only cosmetic. However, a few can cause errors, most often due to incorrect
processing of numbers with too many digits (15 or more digits) in them. If you encounter these, try rounding the number manually in
JavaScript, to no more than 14 digits of precision, before passing it to a base component.
None of the lightningsnapin-* components are supported.

SEE ALSO:
Component Reference

Modules Support
Lightning web component modules in the lightning namespace are described in the Component Reference in the Lightning Web
Components Developer Guide. Modules scoped with @salesforce are described in @salesforce Modules in the Lightning
Web Components Developer Guide. All modules are being reviewed for correct behavior in LWC Offline-enabled mobile apps.
The following table presents current findings.
•
— Supported. Expected to behave as documented.
•
— Limited Support. Can be used, but has known (and possibly unknown) issues.
•
— Not Supported. Doesn’t work, or shouldn’t be used.

Module Status Comments

lightning Namespace Modules
These modules contain resources that don’t change and are universal to all orgs.

lightning/alert
Create an alert modal within your component.

lightning/confirm
Create a confirm modal within your component.

9
Considerations and Limitations Modules Support

Module Status Comments

lightning/empApi Not supported in mobile apps.
Provides methods for subscribing to a streaming
channel and listening to event messages.

lightning/flowSupport
Provides events to control flow navigation and
notify the flow of changes in attribute values.

lightning/messageService Lightning Aura components and Visualforce aren’t supported in

Communicates across the DOM between the Field Service mobile app. This isn’t expected to change.
Visualforce pages, Aura components, and
Lightning web components.

lightning/navigation Available for use, but supported page reference types are limited.
Generates a URL or navigates to a page reference. See Navigation for details.

lightning/pageReferenceUtils Not supported in mobile apps.

Provides utilities for encoding and decoding
default field values.

lightning/platformResourceLoader Not supported for offline use.

Imports a third-party JavaScript or CSS library.

lightning/platformShowToastEvent You can import this module and fire toast events. However, toast
Displays toasts to provide feedback to a user messages aren’t handled or displayed. Use lightning/alert,
following an action, such as after a record is lightning/confirm, or lightning/prompt instead.
created.

lightning/prompt
Create a prompt modal within your component.

lightning/userConsentCookie Relevant only for Experience Builder pages.

Utility functions to incorporate the Cookie
Consent mechanism in your components.

@salesforce Scoped Modules

The shape of these modules can be dynamic, defined by your organization’s metadata.

@salesforce/apex See Use Apex While Mobile and Offline for usage details.
Import Apex methods as functions that a
component can call either via @wire or
imperatively.

@salesforce/apexContinuation See Use Apex While Mobile and Offline for usage details.

10
Considerations and Limitations Modules Support

Module Status Comments

Import methods from Apex continuation classes.

@salesforce/client/formFactor This module “works,” but always returns Small when used in an
Import a name that refers to the form factor of LWC Offline-enabled app.
the hardware running the app.

@salesforce/community Relevant only for Experience Builder pages.

Import the ID of the current Experience Builder
site.

@salesforce/contentAssetUrl
Import content asset files.

@salesforce/i18n
Import internationalization properties.

@salesforce/label
Import labels defined in your Salesforce
organization.

@salesforce/messageChannel Lightning Message Service isn’t supported in LWC Offline-enabled

Import a Lightning message channel that a mobile apps.
component can use to communicate via the
Lightning Message Service.

@salesforce/resourceUrl
Import static resources defined in your Salesforce
organization.

@salesforce/schema
Import references to Salesforce objects and fields
defined in your org.

@salesforce/user
Import the current user’s ID.

@salesforce/userPermission
Import a permission and check whether it’s
assigned to the current user.

11
Considerations and Limitations Wire Adapters Support

Module Status Comments

@salesforce/customPermission
Import a custom permission and check whether
it’s assigned to the current user.

SEE ALSO:
Component Reference
Lightning Web Components Developer Guide: @salesforce Modules

Wire Adapters Support

Lightning web component wire adapters and JavaScript functions are described in “lightning/ui*Api Wire Adapters and
Functions” in the Lighting Web Components Developer Guide.
The following wire adapters and functions can be used.
Support Status
•
— Supported. Expected to behave as documented.
•
— Limited Support. Can be used, but has known (and possibly unknown) issues.
•
— Not Supported. Doesn’t work, and shouldn’t be used.
Offline Capability
• Drafts-Enabled. Supports creation and modification of records while offline.
• Offline-Supported. Supports offline read-only use of primed data while offline, but not creation or modification.

Wire Adapter Status Offline Capability Comments

lightning/uiRecordApi
Read record data and default values. Create, update, delete, and refresh records.

createRecord Drafts-Enabled

createRecordInputFilteredBy
EditedFields

deleteRecord Drafts-Enabled

generateRecordInputForCreate

generateRecordInputForUpdate

getFieldValue

getFieldDisplayValue

12
Considerations and Limitations Wire Adapters Support

Wire Adapter Status Offline Capability Comments

getRecord Drafts-Enabled getRecord supports two ways to
specify which fields to load:
• explicitly, by providing a fields list,
or
• implicitly, by providing a layout
that contains the desired fields.
At this time, you must provide a specific
list of fields; getRecord by layout
isn’t supported.

getRecords Drafts-Enabled

getRecordCreateDefaults Offline-Supported

getRecordNotifyChange

getRecordUi (deprecated) See Wire Adapter Considerations.

updateRecord Drafts-Enabled

Wire Adapter Status Offline Capability Comments

lightning/uiObjectInfoApi
Get object metadata, and get picklist values.

getObjectInfo Offline-Supported

getObjectInfos Offline-Supported

getPicklistValues Offline-Supported

getPicklistValuesByRecordType Offline-Supported

Wire Adapter Status Offline Capability Comments

lightning/uiAppsApi (beta)
Get data and metadata for apps displayed in the Salesforce UI.

getNavItems (beta) Not yet supported due to beta status.

13
Considerations and Limitations Wire Adapters Support

Wire Adapter Status Offline Capability Comments

lightning/uiListApi (deprecated)
Get records and metadata for a list view.

getListUi (deprecated) See Wire Adapter Considerations.

Wire Adapter Status Offline Capability Comments

lightning/uiListsApi
Get metadata for a list view.

getListInfoByName Offline-Supported Use this adapter instead of

lightning/uiListApi.getListUi.

getListInfosByName

Wire Adapter Status Offline Capability Comments

lightning/uiRelatedListApi
Get records, metadata, and record count for a related list.

getRelatedListRecords Offline-Supported getRelatedListRecords works

while offline, but doesn’t update to add
or remove records that are created or
deleted while offline.

getRelatedListRecordsBatch

getRelatedListInfo Offline-Supported

getRelatedListInfoBatch Offline-Supported

getRelatedListsInfo Offline-Supported

getRelatedListCount Offline-Supported getRelatedListCount works

while offline, but doesn’t update to add
or remove records that are created or
deleted while offline.

Wire Adapter Considerations

We describe getRecordUi and getListUi as having Limited Support. Both adapters are deprecated for all customers, and each
has additional considerations for offline use. getRecordUi in particular has significant limitations. We would prefer to note both of
these adapters as Not Supported, but each provides functionality that’s not easily replaced today. We recommend you carefully limit
your use of these wire adapters.

14
Considerations and Limitations Wire Adapters Support

Note: Forward looking statement: Our goal is to provide supported alternatives to getRecordUi and getListUi. If you
limit your usage of these adapters today, you’ll have an easier time migrating later.
• In the case of getRecordUi, limit yourself to getting layout metadata details, and use the data-only adapters getRecord and
getRecords for data access.
• In the case of getListUi, use the new getListInfoByName wire adapter to get list view metadata. If you must use
getListUi to access list view records, see the following considerations.
Considerations for List Adapters
List- or collection-oriented adapters such as getListUi, getRelatedListRecords, and getRelatedListCount have
limited support for offline updates. Specifically, list logic isn’t re-evaluated for changes made while you’re offline. That is, if you create or
modify a record offline and it falls into or out of the list criteria, the record isn’t added or removed from the list until you’re back online.
The list updates only after the changes sync back to Salesforce. This limitation affects list membership, but does not affect the display of
records that are a part of a list.
Here’s an example to make this clear. Let’s say you use getRelatedListRecords as a source to display a list of records, and the
related list criteria limits list membership to accounts whose name begins with “A”. While offline, if you update one of those records to
change an account name to begin with a “B”, from “Apple” to “Banana”, that record will still display in the list, with the updated account
name “Banana”. Once you return online, the change syncs to Salesforce, and the list criteria is reevaluated. The Banana account will no
longer be a member of the related list, and the wire adapter is updated, triggering a component refresh. The list of records returned by
getRelatedListRecords won’t include the record for the Banana account, and it will disappear from the list displayed in your
component’s user interface.
Considerations for getRecordUi
getRecordUi is affected by numerous issues when used while offline.
• Invoking getRecordUi on a draft record that was created while offline returns an error.
• If you edit a record such that its layout changes—for example, by changing the record type—the results of invoking getRecordUi
on that record can be inconsistent.
• If you change a relationship field on a record, and the new relationship references a record with a different object type or record
type, the results of invoking getRecordUi on that record can be inconsistent or result in an error.
In theory, if you’re able to limit changes to records while offline to the scalar (non-relationship, non-metadata affecting) fields of that
record, then invoking getRecordUi on that record should work as documented. In practice this is challenging, and when you miss
it results in inconsistent or incorrect behavior that can be hard to troubleshoot. If you must use it, exercise extreme caution.
getRecordUi is used in the implementations of the following Lightning base components, causing them to have similar limitations:
• lightning-record-form
• lightning-record-edit-form
• lightning-record-view-form

Handle Errors Defensively

When handling errors returned by wire adapters there’s potentially an issue with the “shape” of the error response. In contexts outside
LWC Offline, the response returns a single error object. However, when an LWC wire adapter receives an error running in an LWC
Offline-enabled mobile app, the response is returned as an array of error objects—most often, an array containing just one error object.
To make your components compatible across environments, we recommend a small amount of defensive coding at the start of your
error handling. Convert a non-array into an array to ensure that the error shape is consistent:
let errors = ...; // errors from wire adapter
if ( ! Array.isArray(errors) ) {

15
Considerations and Limitations Entity Support

errors = [ errors ];
}

SEE ALSO:
Lightning Web Components Developer Guide: lightning/ui*Api Wire Adapters and Functions

Entity Support
LWC Offline uses the UI-API to access entity data. The UI-API supports a long list of standard entities, and all custom entities.
For a complete list of supported entities, see Supported Objects in the User Interface API Developer Guide.

Note: The ContentDocument, ContentVersion, and associated entities, used as part of file uploading features, aren’t fully supported
at this time. This limitation affects all base components that provide file uploading functionality. See Upload Photos from LWCs
Using lightning-input Base Component in the Trailblazer community for additional details and a partial work-around.
The following entities aren’t fully supported by UI-API, but are commonly used in Field Service. Support for them is incomplete.
• Case (not supported in related lists)
• LinkedArticleTask (recurrence isn’t supported)
• WorkOrder (not supported in related lists)
• WorkOrderStatus (not supported in related lists)
• WorkOrderLineItem (not supported in related lists)

SEE ALSO:
User Interface API Developer Guide: Supported Objects
User Interface API Developer Guide

Metadata and Custom Metadata Types Support

LWC Offline uses the UI-API to access standard metadata.
Metadata for entities, layouts and other customizations, and Lightning web components is automatically primed or loaded when used,
and is cached for offline use. However, the UI-API doesn’t support loading custom metadata types. As a consequence, custom metadata
isn’t primed or cached automatically. This affects features that use custom metadata, such as Flows.
If you must retrieve custom metadata, you can do that using Apex requests. If your Apex request methods are cacheable, the custom
metadata you access is available while offline. See Use Apex While Mobile and Offline.

SEE ALSO:
User Interface API Developer Guide

16
CHAPTER 3 Offline Considerations
In this chapter ... The offline environment presents a number of technical challenges for LWC Offline-enabled mobile
apps, and for your Lightning web components.
• What Happens When
Something Isn’t
The Salesforce Field Service mobile app is heavily optimized for offline use. These optimizations are
Primed (Preloaded) enabled by our complete understanding of how the built-in features are implemented, including code,
data, and metadata relationships. The app contains or loads the information it needs for built-in features
• Create Components
to perform well, online and offline. See Offline Priming in the Field Service Mobile App in Salesforce Help
with Offline Analysis
for more details.
In Mind
• Determine Online or The Field Service mobile app doesn’t, and can’t, have this same level of knowledge about your custom
Offline Status features built with Lightning web components. Instead, the app analyzes your custom objects, page
layouts, components, and other metadata, and then loads the data and metadata it thinks you need. To
improve the quality of this analysis, and thus the performance of your components, you must follow a
number of guidelines when developing your Lightning web components.

17
Offline Considerations What Happens When Something Isn’t Primed (Preloaded)

What Happens When Something Isn’t Primed (Preloaded)

Priming for offline use is a “best effort” mechanism. The Field Service mobile app is resilient in situations where resources are required
by a mobile client but weren’t primed.
• If the client is online, missing data and metadata resources are loaded when needed. There’s a minor performance impact due to
the extra network requests.
• If the client is offline, then missing data and metadata can’t be retrieved. The Lightning Web Components framework and the Field
Service mobile app handle this situation with either a status display or an error message, depending on what wasn’t primed before
going offline. Specific behavior is dependent on the component and how it’s implemented.

Create Components with Offline Analysis In Mind

To use a feature implemented with Lightning web components while offline, it must be preloaded, or primed, before you go offline.
Specifically, an LWC Offline-enabled mobile app must prime:
• The component, and all its dependencies.
• The data to be displayed by the component, and all its dependencies.
The process for determining and resolving component dependencies is complex, and our implementation is continually improving. The
fundamental aspect to understand is that this dependency resolution must be done without executing or rendering the component.
Dependency calculations are performed by static analysis of the component code, recursively applied to every child component, module,
and wire adapter used by the top-level component.
In general, anything that requires code to execute to determine its execution path can’t be resolved during static dependency analysis.
The following guidelines are an incomplete list of ways to avoid anti-patterns that can prevent a complete dependency analysis of a
component.
• Don’t use a private property as an input value to a wire adapter.
• Don’t use a getter as an input value to a wire adapter when the getter result depends on an instance member or any computation.
• Don’t use any computed value as an input value to a wire adapter where the value can’t be determined without creating and
executing the component, or which might be null when the component is instantiated.
• Don’t create a wire adapter chain where an earlier wire adapter outputs its results into a function.
• Don’t reference an array member from an array that is chained between wire adapters.
• Don’t reference an inherited property in an input value to a wire adapter in a subclass.

Tip: See Validate Lightning Web Components for Offline Use to install validation tools that provide support within VS Code for
the previous guidelines.

Example and Workaround

Let’s consider an example. It’s common for a component to use CurrentPageReference in its code.
import { CurrentPageReference } from 'lightning/navigation';// ...@wire(CurrentPageReference)
pageRef;

During initial priming when the app loads, the “current page” can’t be known. This means that resources associated with that page —
layout metadata, object and field metadata, record data — can’t be fully determined in advance. And so the component can’t be primed
completely.

18
Offline Considerations Determine Online or Offline Status

The workaround in this case, and in general, is to find another way to make these dependencies explicit, instead of implicitly defined by
a reference that can’t be resolved until runtime. Referencing a specific recordId, recordTypeId, or apiName provides enough
information to determine the dependencies without the specific page context.

Determine Online or Offline Status

The Salesforce mobile app, Field Service mobile app, and Lightning Web Components generally, don’t have a supported mechanism
for detecting whether a device is online or not. This is by design.
Online vs. offline connectivity is dynamic, and the signal given to the app from the mobile operating system is notoriously unreliable
because the state of connectivity changes frequently. In general, our design goal is that LWCs work offline first, and treat being offline
as a normal condition, not a failure. We recommend your components adhere to this practice.

19
CHAPTER 4 Use Salesforce Features While Offline
In this chapter ... Although LWC Offline is intended to “just work” when you use features while offline, there are nuances
and additional considerations for using some features while offline. This chapter provides details for how
• Use Apex While to use these features effectively in LWCs to make them offline-ready.
Mobile and Offline
• Use Images in an
LWC Offline-Enabled
Component
• Navigation

20
Use Salesforce Features While Offline Use Apex While Mobile and Offline

Use Apex While Mobile and Offline

Use Apex-backed wire adapters and imperative Apex in your Lightning web components to call Apex methods in your org.
When you use Apex in an LWC Offline-enabled mobile app, there are considerations to keep in mind so that you make efficient use of
network resources, data caching, and handle offline behavior correctly.
First, when the client device is online, Apex-based features of Lightning web components, including Apex continuations, “just work.”
You can use all of the features as documented in Call Apex Methods in the Lightning Web Components Developer Guide.
When a client device is offline, Apex-based features can read data that was cached while online, but changes (writing data) can’t be
saved back to the server. Nor can a change via Apex methods be enqueued as a draft into the Offline Queue. A Lightning web component
that uses Apex must be prepared to handle a network connection error as a normal response, for both reading and writing operations.

Important: Before you make plans to reuse existing Apex custom code in your offline features, read important details about
offline caching for Apex in Apex Results Are Separate from Other Primed Data.

IN THIS SECTION:
Use Apex in Lightning Web Components While Online
The essentials of using Apex within Lightning web components are described in "Call Apex Methods" in the Lightning Web Components
Developer Guide. While Apex features behave as documented when a client device is online, there are additional features available
within an offline-enabled mobile app.
Apex Results Are Separate from Other Primed Data
Apex results are saved in the durable store separately from data stored by built-in components, modules, and wires that use
Lightning Data Service (LDS) to access data.
Additional Considerations for Apex in an Offline-Enabled Mobile App
The following differences in behavior compared to Apex run from a browser-based connection apply to Apex when used in Lightning
web components in an offline-enabled mobile app.
Understand Apex Behavior While Offline
Additional features that are built into offline-enabled apps allow the app, including Lightning web components and even Apex, to
continue to function. Knowing these features, and their limitations, is critical to writing LWCs that function well, even without a
connection to the Salesforce service.
Additional Documentation for Apex in Lightning Web Components
Learn more about how to use Apex, including continuations, from Lightning web components documentation resources.

Use Apex in Lightning Web Components While Online

The essentials of using Apex within Lightning web components are described in "Call Apex Methods" in the Lightning Web Components
Developer Guide. While Apex features behave as documented when a client device is online, there are additional features available within
an offline-enabled mobile app.
To take advantage of these features, you need to know the basics of using Apex within Lightning web components. In particular, there
are two different ways of calling an Apex method from a Lightning web component.

21
Use Salesforce Features While Offline Use Apex in Lightning Web Components While Online

IN THIS SECTION:
Reactive Apex Wires
Reading data via a wire adapter is the “natural” way to access data in Lightning web components. To add a read-only Apex method
to a Lightning web component, first import the Apex method from the @salesforce/apex module, and then use the @wire
annotation to connect that method to a property or function in your component.
Imperative Apex
Imperative Apex is the more traditional way to call an Apex method, as a network-based API call. Imperative Apex allows you to
control exactly when the method is called. You’re in control of the invocation, rather than the framework.

Reactive Apex Wires

Reading data via a wire adapter is the “natural” way to access data in Lightning web components. To add a read-only Apex method to
a Lightning web component, first import the Apex method from the @salesforce/apex module, and then use the @wire
annotation to connect that method to a property or function in your component.
Read the details in Wire Apex Methods to Lightning Web Components in the Lightning Web Components Developer Guide.
The important things to understand about this method of using Apex are:
• @wire adapters are read-only.
• When you use @wire adapters, you don’t call your Apex method directly. Instead, the framework decides when to call it, when it
needs the value of the property or function connected to the @wire. This can happen more or less frequently than you expect.
• Your Apex method must not make server-side changes when called by the @wire service.
• The result of calling your Apex method is cached on the client. See important details in Apex Results Are Separate from Other Primed
Data.
These points are standard behavior for Lightning web components. They aren’t specific to the additional mobile and offline features of
an offline-enabled mobile app.
What is different is the cache. The mobile app saves the results of @wire calls to Apex methods in a durable store, instead of an
in-memory cache. The durable store is longer-lived than the standard cache used by Lightning web components. The standard cache
is designed for performance, rather than offline use. The durable store, in contrast, is designed specifically for offline use. It survives client
app restarts, and even device restarts. Data in the durable store is available to provide a result for an Apex method call, even when offline.
Again, see considerations in Apex Results Are Separate from Other Primed Data.

Imperative Apex
Imperative Apex is the more traditional way to call an Apex method, as a network-based API call. Imperative Apex allows you to control
exactly when the method is called. You’re in control of the invocation, rather than the framework.
Imperative Apex is more flexible—and less restrictive—than reactive Apex wires. For example, you can use imperative Apex calls to
change data on the server. The full details are described in Call Apex Methods Imperatively in the Lightning Web Components Developer
Guide.
However, imperative Apex has a significant limitation in an offline-enabled mobile app. You can’t use imperative Apex while offline.
This is by design, since imperative Apex is allowed to change data on the server. There’s no way to reconcile what might change on the
server side with data cached on the client side. This is because the client has no knowledge of the implementation of a server-side Apex
method. See Imperative Apex While Offline.

22
Use Salesforce Features While Offline Apex Results Are Separate from Other Primed Data

Apex Results Are Separate from Other Primed Data

Apex results are saved in the durable store separately from data stored by built-in components, modules, and wires that use Lightning
Data Service (LDS) to access data.
This is because Apex methods return arbitrary data, as an opaque data blob, rather than returning typed records in expected formats.

Data that’s loaded during priming activities, or that’s loaded using base components, wire adapters, and other built-in features of
Lightning web components, is stored in one consolidated cache. In an offline-enabled mobile app, it’s also saved to the durable store
for offline use. As you load new data, it’s merged into the local store of cached data. This merging includes updating existing items with
changes loaded from Salesforce.
The mechanism that makes this possible is Lightning Data Service, or LDS. LDS results include metadata about the returned results. This
metadata, sometimes referred to as ObjectInfo, allows LDS to treat the results as real Salesforce objects.
Apex requests are different. While Apex methods can return nothing more than records, there’s nothing that ensures this. Apex requests
can return arbitrary data, in any format you build in your Apex code. As a result, Apex methods don’t return ObjectInfos for the data
contained in the response. And without the ObjectInfos for the results, there’s no way to treat those results as Salesforce records—and
therefore no way to merge them in with records saved locally by LDS.
To simplify the actual implementations, think of LDS results as being records that are indexed by record ID, with each record stored in
a separate representation of a Salesforce object. In contrast, Apex results are stored as one big opaque blob per request, indexed on the
request URL, including parameters.
While you can interpret structured data inside that opaque blob, LDS and the LWC framework can’t. If you load the same records with
LDS and Apex, those records are stored separately, as duplicates. Updates to one copy don’t affect the other, unless you fire the Apex
request again (to load changes performed via LDS), or tell the framework to reload stale LDS data (to load changes performed via Apex).
This poses a challenge for implementing features that use both the built-in data access features of Lightning Web Components and the
fully customizable logic of Apex. Our advice is to use the base Lightning components whenever possible, then use LDS wire adapters,
and then if necessary, use Apex. An extensive discussion of this tiered strategy can be found in Data Guidelines in the Lightning Web
Components Developer Guide.

Note: We recognize that LDS and built in components don’t cover every use case, and that there’s always a place for custom
logic performed on the server, especially for transactional operations. We intend to improve the capabilities of LDS over time,
including adding advanced capabilities for complex queries and other operations. We advise planning your use of Apex in such
a way that you can refactor your data access logic to adopt new LDS features as they become available.

23
Use Salesforce Features While Offline Additional Considerations for Apex in an Offline-Enabled
Mobile App

Additional Considerations for Apex in an Offline-Enabled Mobile App

The following differences in behavior compared to Apex run from a browser-based connection apply to Apex when used in Lightning
web components in an offline-enabled mobile app.
If a quick action uses a wired Apex method, and that quick action is primed at app startup, then the Apex results data can be primed as
well, and available offline. The LWC must be statically analyzable for priming to take place. Specifically, input parameters for the wire
adapter must be analyzable. For example, if the input parameters are derived from page reference attributes, or from the output of
another LDS wire that is also analyzable. See Validate Lightning Web Components for Offline Use for additional details about static
analysis. Note that the Apex method will be invoked during priming, possibly many times, to prime results for all possible adapter input
parameters.
Apex continuations are supported. However, because continuations tend to be longer running requests, we recommend providing
feedback to the user while a continuation is active. Otherwise, they might go offline before a continuation completes, which results in
an error.

Understand Apex Behavior While Offline

Additional features that are built into offline-enabled apps allow the app, including Lightning web components and even Apex, to
continue to function. Knowing these features, and their limitations, is critical to writing LWCs that function well, even without a connection
to the Salesforce service.
The standard Salesforce web interface requires a continuous network connection to the Salesforce service. When a standard Salesforce
client, such as a desktop browser, is offline, features that require a connection to the Salesforce service—which is most features—don’t
work. Since Apex runs on the Salesforce service, this includes all Apex-based features of Lightning web components.
An offline-enabled mobile app, in contrast, is designed to continue to function even when no connection to the Salesforce service is
available. The offline features of the app aren’t magic; data that’s not already available on the client device is inaccessible. But carefully
designed features, including Lightning web components that use Apex, can continue to run with data that’s available locally, on the
device, even without a network connection.

IN THIS SECTION:
Apex Wires While Offline
Lightning web components that wire properties or functions to Apex methods continue to provide cached values from the durable
store, if available.
Imperative Apex While Offline
Imperative Apex calls always fail when the client device is offline. When using imperative Apex in an offline-enabled mobile
app, it’s essential to handle the possibility of a network failure error.
Refresh Records Cached in Durable Store While Offline
While it’s not possible to retrieve updated data from Salesforce while a client device is offline, it’s still possible to request updates
when data is known to be stale.

Apex Wires While Offline

Lightning web components that wire properties or functions to Apex methods continue to provide cached values from the durable
store, if available.
If the result of an Apex method hasn’t been retrieved previously and saved to the durable store, an error is returned. The correct way to
handle the error depends on whether the Apex method is wired to a property or a function.

24
Use Salesforce Features While Offline Understand Apex Behavior While Offline

When using a property, the wire service either provisions the results to the <property>.data property, or returns an error to the
<property>.error property. Use an if:true directive in your component template to check for the presence of each, and
render the appropriate output. Changes to <property> trigger a re-render of your component with new values.
With a function, the wire service provisions results to the wired function via an object with either an error or data property. Check
for the presence of each in your JavaScript function, and set an appropriate property of your component. This triggers a re-render of
your component with new values.
Example code for each of these approaches is available in Wire Apex Methods to Lightning Web Components in the Lightning Web
Components Developer Guide.

Imperative Apex While Offline

Imperative Apex calls always fail when the client device is offline. When using imperative Apex in an offline-enabled mobile app,
it’s essential to handle the possibility of a network failure error.
Treat errors as a normal, expected outcome, rather than a failure condition. Provide appropriate feedback to the user, and suggest
alternative behavior, rather than treating the situation as unexpected.
// apexImperativeMethod.js
import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexImperativeMethod extends LightningElement {

@track contacts;
@track error;

handleLoad() {
getContactList()
.then(result => {
this.contacts = result;
})
.catch(error => {
this.error = error;
});
}
}

Offline-savvy components expect to be offline at times, and know what to do when that happens.

Refresh Records Cached in Durable Store While Offline

While it’s not possible to retrieve updated data from Salesforce while a client device is offline, it’s still possible to request updates when
data is known to be stale.
For example, after updating a record via imperative Apex, you would want any version of that record cached by LDS to be updated. It’s
straightforward to write code that handles this process when your imperative Apex succeeds while online, but also handles an update
error if the client device is offline.
getRecordNotifyChange() is used to advertise the need to update cached records that were modified by imperative Apex. It
isn’t supported at this time. Note that getRecordNotifyChange(recordIds) simply notifies LDS that the records represented
by recordIds provided in the function call are known to be stale. It doesn’t share updated record values with LDS, even if those
records are available offline. It’s the responsibility of LDS to retrieve the latest values for those records. LDS can only do so when the
client is online.

25
Use Salesforce Features While Offline Additional Documentation for Apex in Lightning Web
Components

refreshApex() is used to request a refresh for data provisioned by an Apex @wire. It’s usable today and, while online, behaves
as expected. However, while refreshApex(valueProvisionedByApexWireService) can be called while offline, it
requires a network connection to actually succeed, and push a new value to the wired property or function.
Using getRecordNotifyChange() and refreshApex() to request updates for cached data that are possibly stale is
described in Client-Side Caching of Apex Method Results in the Lightning Web Components Developer Guide.

Additional Documentation for Apex in Lightning Web Components

Learn more about how to use Apex, including continuations, from Lightning web components documentation resources.
In addition to the Call Apex Methods chapter, see the @salesforce/apex and @salesforce/apexContinuations
sections of the @salesforce Modules reference in the Lightning Web Components Developer Guide.

Use Images in an LWC Offline-Enabled Component

Lightning Web Components supports multiple ways of referencing graphics assets in a component. Not all of these methods work when
the component runs offline. LWC Offline supports two methods of referencing images in your offline-ready Lightning web components.
The standard methods for referencing images (and other binary assets) in an LWC are:
• Images uploaded as Files, using the VersionDataUrl field of the latest ContentVersion related to a particular
ContentDocument record.
• Content Assets, using the @salesforce/contentAssetUrl module.
• Static Resources, using the @salesforce/resourceUrl module.
For LWCs intended to be used offline, only consider the first two options. Static resources aren’t supported for offline use at this time.

Note: Support for offline images requires that both your Salesforce org and your mobile app are updated to the Spring ’23 release
or later.

IN THIS SECTION:
Image Priming and Offline Considerations
LWC Offline isn’t magic. If an image hasn’t been primed before you go offline, it can’t be displayed while offline. LWC Offline primes
image assets that are referenced in component template files, in the src attribute of a standard HTML img tag.
Use Images Uploaded as Files (ContentDocument) in an LWC
Files are a general mechanism to upload and make binary files, such as images, available in your Salesforce org. Files can be associated
with a specific record, which makes them ideal for product photos, images captured during a service call or other transaction, and
otherwise adding images to business activities that you track in Salesforce.
Use Images Uploaded as Asset Files
Asset files are the modern alternative to static resources. Asset files are ideal for images that are used throughout your components
and apps—for example, user interface elements like icons—or otherwise aren’t related to a specific record.

Image Priming and Offline Considerations

LWC Offline isn’t magic. If an image hasn’t been primed before you go offline, it can’t be displayed while offline. LWC Offline primes
image assets that are referenced in component template files, in the src attribute of a standard HTML img tag.

26
Use Salesforce Features While Offline Use Images Uploaded as Files (ContentDocument) in an LWC

Note: Only the img tag is supported at this time. Images referenced in other ways or tags aren’t primed and won’t display
sometimes, even when online.
Primed images are stored locally on the mobile device, in a new binary durable store (cache). Images stored in individual files are primed
and cached individually. Images stored in archive asset files are accessible, but be aware that the entire archive is primed and cached.
Updates to images in archive files require reloading the entire archive.
In Spring ’23, primed images aren’t purged from the offline cache when they get stale. Be mindful of the size of your images or archive
asset files, and the space they take up locally on devices.
The binary contents of an item referenced in an img tag isn’t validated. It’s up to you to ensure that referenced files are valid images.
Support for specific image formats is dependent on the capabilities of the web view, which is provided by the operating system. Providing
an unsupported or non-image file to an img tag is an HTML error and can cause unpredictable behavior. As the joke goes, don’t do
that. Safe formats are the usual web image formats: GIF, JPEG, PNG, and so on. When in doubt, test specific image formats on your specific
supported mobile devices and operating system versions.

Use Images Uploaded as Files (ContentDocument) in an LWC

Files are a general mechanism to upload and make binary files, such as images, available in your Salesforce org. Files can be associated
with a specific record, which makes them ideal for product photos, images captured during a service call or other transaction, and
otherwise adding images to business activities that you track in Salesforce.
Files have a complex representation in Salesforce, using multiple standard objects to store the file itself and information about it, including
ownership, access controls, and multiple versions of that file. ContentDocument is the primary object and, for the purposes of displaying
images in your LWCs, you can reference the binary data of a file through a relationship that is the same for any uploaded file.
The critical elements of an implementation are:
• Access the URL of the File’s current version through the
@salesforce/schema/ContentDocument.LatestPublishedVersion.VersionDataUrl related field.
• Provide the image URL via a getter function that parses the record data of the current version.
• Use the getter function for the src attribute of an img tag in your HTML template.
The following example is simple, and uses a hard-coded ContentDocument record ID, but it illustrates the details. You can also
access named renditions (thumbnails) of the image by adding a thumb parameter to the URL.
// imageFromContentDocument.js
import { LightningElement, wire } from 'lwc';
import { getFieldValue, getRecord } from 'lightning/uiRecordApi';
import IMAGE_URL_FIELD from
'@salesforce/schema/ContentDocument.LatestPublishedVersion.VersionDataUrl';

export default class ImageFromContentDocument extends LightningElement {

@wire(getRecord, {recordId: '069RO0000003FMoYAM', fields: [IMAGE_URL_FIELD] })

contentDocImage;

get imageUrl() {
return getFieldValue(this.contentDocImage.data, IMAGE_URL_FIELD);
}

get resizedImageUrl() {
return getFieldValue(this.contentDocImage.data, IMAGE_URL_FIELD) +
'?thumb=THUMB240BY180';

27
Use Salesforce Features While Offline Use Images Uploaded as Files (ContentDocument) in an LWC

}
}

With the image URL provided by the getter functions in the preceding component JavaScript, referencing the images in the HTML
template is just like referencing any image in HTML. Use it in the src attribute of an HTML img tag.
<!-- imageFromContentDocument.html -->
<template>
<lightning-card>Display an image from
ContentDocument {imageUrl}</lightning-card>

<template if:true={contentDocImage}>
<img src={imageUrl}/>
</template>

<lightning-card>Display a resized image from ContentDocument

{resizedImageUrl}</lightning-card>

<template if:true={contentDocImage}>
<img src={resizedImageUrl}/>
</template>

</template>

This feature works in LWC Offline beginning in Spring ’23, which is API version 57.0. Be sure to set that minimum API version for any
component that references images while offline.
<?xml version="1.0" encoding="UTF-8"?>
<!-- imageFromContentDocument-meta.xml -->
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__RecordAction</target>
<target>lightning__GlobalAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction,lightning__GlobalAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

SEE ALSO:
User Interface API Developer Guide: Upload Files
Salesforce Object Reference Guide: ContentDocument
Salesforce Object Reference Guide: ContentVersion

28
Use Salesforce Features While Offline Use Images Uploaded as Asset Files

Use Images Uploaded as Asset Files

Asset files are the modern alternative to static resources. Asset files are ideal for images that are used throughout your components and
apps—for example, user interface elements like icons—or otherwise aren’t related to a specific record.
Referencing an image stored in an Asset file is straightforward, and fully documented. We present only a simple example here. See Access
Content Asset Files the Lightning Web Component Developer Guide for complete details.
// imageFromAssetFile.js
import { LightningElement } from 'lwc';
import ASSET_IMG from '@salesforce/contentAssetUrl/avatars-light-mode';
import ARCHIVE_IMG from '@salesforce/contentAssetUrl/branding-images';

export default class ImageFromAssetFile extends LightningElement {

get assetUrl() {
return ASSET_IMG;
}

get assetArchiveUrl() {
return ARCHIVE_IMG + '&pathinarchive=images/logo-large.png';
}
}

Warning: The assetArchiveUrl function in the preceding example appends a pathinarchive query parameter and
value, using a “&” separator. The “&” isn’t used in examples in the standard LWC documentation. The need for the “&” separator is
inconsistent between desktop and mobile today, and we consider this discrepancy to be a software defect. For now, adding the
“&” separator generally works on both desktop and mobile, even though it results in a double “&&” on desktop.
With the image URL provided by the getter functions in the preceding component JavaScript, referencing the images in the HTML
template is just like referencing any image in HTML. Use it in the src attribute of an HTML img tag.
<!-- imageFromAssetFile.html -->
<template>
<lightning-card>
Display an image directly from an Asset file {assetUrl}
</lightning-card>

<template if:true={assetUrl}>
<img src={assetUrl}/>
</template>

<lightning-card>
Display an image from an archive Asset file {archUrl}
</lightning-card>

<template if:true={assetArchiveUrl}>
<img src={assetArchiveUrl}/>
</template>

29
Use Salesforce Features While Offline Navigation

</template>

SEE ALSO:
Salesforce Help: Asset Files
Lightning Web Components Developer Guide: Access Content Asset Files
Lightning Web Components Developer Guide: @salesforce/contentAssetUrlin @salesforce Modules

Navigation
Build navigation for Lightning web components.
When we talk about “navigation,” we can broadly separate things into two categories: things that appear on the screen—buttons, tabs,
links, and so on—and what actually happens when someone interacts with those things. Call these two categories navigation user
experience and navigation actions. These terms are loose, not specific to Salesforce, mobile apps, or Lightning web components, and we
use them informally here.

IN THIS SECTION:
Navigation User Experience
There are a variety of base components available to design the visual user interface that users tap or click to move around in your
app.
Base Components with Built-In Navigation Actions
Use base components that have automatic or built-in navigation actions.
Programmatic Navigation Actions
Some features require more complicated navigation designs. For the most complete control of your user interface and navigation
scheme, define navigation actions using JavaScript.

Navigation User Experience

There are a variety of base components available to design the visual user interface that users tap or click to move around in your app.
See Create Mobile-Ready Components in the Lightning Web Components Developer Guide for mobile-specific basics, and the Component
Reference for a complete catalog of available base components, including usage documentation.

Base Components with Built-In Navigation Actions

Use base components that have automatic or built-in navigation actions.
The following base components support adding navigation controls to your own components. These components provide ways to
open another page, or otherwise perform URL-based actions. You supply the URL, or text containing linkable items, and the component
takes care of the rest.

Base Component Details

lightning-breadcrumb Behaves like a hyperlink if a URL is provided via the href attribute.

lightning-carousel-image Behaves like a hyperlink if a URL is provided via the href attribute.

30
Use Salesforce Features While Offline Programmatic Navigation Actions

Base Component Details

lightning-click-to-dial Displays a formatted phone number as click-to-dial enabled or disabled for Open
CTI and Voice.

lightning-formatted-address Displays a formatted address with a link to the given location on Google Maps.

lightning-formatted-email Displays an email as a hyperlink with the mailto: URL scheme.

lightning-formatted-phone Displays a phone number as a hyperlink with the tel: URL scheme.

lightning-formatted-rich-text Creates hyperlinks in rich text automatically for linkable text and email addresses.

lightning-formatted-text URLs and email addresses are displayed as hyperlinks when you specify the
linkify attribute.

lightning-formatted-url Displays a URL as a hyperlink.

lightning-pill Behaves like a hyperlink if a URL is provided via the href attribute.

lightning-vertical-navigation Behaves like a hyperlink if a URL is provided via the href attribute.

Note: Some of these components have limitations when used in an offline-enabled mobile app. See Base Components Support
for details.
There are additional base components that can have navigation actions attached to them, such as buttons and tabs. These components
require you to add click handlers or other functionality in the form of JavaScript code. See Programmatic Navigation Actions.

Programmatic Navigation Actions

Some features require more complicated navigation designs. For the most complete control of your user interface and navigation scheme,
define navigation actions using JavaScript.
In Lightning web components, navigation actions are built using the navigation service, provided by the lightning/navigation
module. See Navigate to Different Page Types in the Lightning Web Components Developer Guide to get started.
This module is supported for use, however, the navigation service currently has an incomplete understanding of the different page types
within the Field Service mobile app. This limits the kinds of pages you can programmatically navigate to from your LWCs. Currently, the
only PageReference type supported with the LWC navigation service within the Field Service mobile app is:
• standard__webPage
While that sounds limiting, you can implement a surprising number of different navigation actions using it. The following are examples
of navigation actions, and the PageReference used to implement them.
Navigate from LWC to a Native Screen
Create a navigation action that moves from a LWC to a screen native to the Field Service mobile app.
{
"type": "standard__webPage",
"attributes": {
"url": `com.salesforce.fieldservice://v1/sObject/${this.recordId}/details`
}
}

31
Use Salesforce Features While Offline Programmatic Navigation Actions

There’s a wide range of targets available for deep linking into the Field Service mobile app. See Deep Linking Schema for the Field
Service Mobile App in the Field Service Developer Guide for available URL formats.
Navigate to a Quick Action via Deep Link
Create a navigation action that opens a quick action, including quick actions built with LWCs.
{
"type": "standard__webPage",
"attributes": {
"url":
`com.salesforce.fieldservice://v1/sObject/${this.recordId}/quickaction/<api_name>`
}
}

This action can also be used as a deep link into the Field Service mobile app. See Deep Linking Schema for the Field Service Mobile
App in the Field Service Developer Guide for additional details.
Open Salesforce Mobile App via Deep Link
Create a navigation action that leaves the Field Service mobile app, and opens a specific page in the Salesforce mobile app.
{
"type": "standard__webPage",
"attributes": {
"url": "salesforce1://sObject/WorkOrder/home"
}
}

See Salesforce Mobile App URL Schemes for available URL formats.
Open Web Page
Create a navigation action that opens a screen that displays an external web page.
{
"type": "standard__webPage",
"attributes": {
"url": "https://salesforce.com"
}
}

Open Email App

Create a navigation action that opens the device’s native email client and pre-fills the addressee and subject lines.
{
"type": "standard__webPage",
"attributes": {
"url": "mailto:[email protected]?subject=Help with Asset"
}
}

Open Phone App

Create a navigation action that opens the device’s native phone app, and dials a phone number.
{
"type": "standard__webPage",
"attributes": {
"url": "tel:123-456-7890"
}
}

32
Use Salesforce Features While Offline Programmatic Navigation Actions

Open Message App

Create a navigation action that opens the device’s native SMS or message app, and pre-fills the recipient phone number.
{
"type": "standard__webPage",
"attributes": {
"url": "sms:12345678"
}
}

33
CHAPTER 5 Development Tools and Processes
In this chapter ... Set up and use your development tools for the most efficient developer experience while building mobile
and offline LWCs.
• Set Up Your
Development
Developing LWCs and apps for use in Salesforce mobile apps uses all the same developer tools and
Environment processes that developing LWCs for desktop use. It also poses special challenges, especially in the areas
of testing and debugging. This chapter describes a number of additional tools and processes designed
• Validate Lightning
specifically for developing mobile LWCs.
Web Components for
Offline Use
• Develop
Offline-Ready LWCs
with the LWC Offline
Test Harness

34
Development Tools and Processes Set Up Your Development Environment

Set Up Your Development Environment

Before you can create your first Lightning web component (LWC), or test a LWC in a mobile app, you must set up your development
environment for mobile components.
The complete development environment for building Lightning web components for offline-enabled apps includes the following
elements.
• Salesforce CLI (SFDX)
• Visual Studio Code (VS Code)Salesforce Extensions for VS Code
• Android Studio and a virtual device emulator
• Apple Xcode and a virtual device simulator
• Salesforce Mobile Extensions
• A virtual device build for the relevant mobile app

Note: Don’t let Android Studio or Xcode intimidate you. You only need to use it to provision a device emulator (Android) or
simulator (iOS). You don’t need both Android Studio and Xcode. If you want both, great. If not, pick the one you’re most comfortable
with.
While you can eventually choose to replace or add tools to this list, start with these and add to them as you become more experienced.
The Develop a Lightning Web Component Quick Action quick start provides hands-on instructions for setting up your development
environment, and also for creating, deploying, and running your first LWC.
We recommend the following installation sequence. See the links for more detailed instructions than those in the tutorial.
• Install and configure Android Studio.
• Install and configure Xcode.
• Install the Salesforce CLI.
• Install the Mobile Extensions.
• Install VS Code.
• Install Salesforce Extensions for VS Code.
• Download the latest virtual device build for the mobile app.
– For the Salesforce mobile app, use the standard virtual device builds, as described in Preview Your Components in the Salesforce
Mobile App in the Lightning Web Components Developer Guide.

Note: Your org must be enabled for LWC Offline before you can see or use LWC Offline features.

– For the Field Service mobile app, the download link is posted in the Trailblazer Community.

• Install a virtual device build into a configured Android emulator or iOS simulator instance.

Validate Lightning Web Components for Offline Use

Use the Komaci Static Analyzer (or static analyzer for short) during component development to validate your Lightning web components
for offline use. Using the static analyzer helps you ensure that code dependencies and data your component depends on can be primed
when a network connection is available, making the component and its data available offline when the network has limited or no
connectivity.

35
Development Tools and Processes Install the Komaci Static Analyzer

IN THIS SECTION:
Install the Komaci Static Analyzer
The Komaci static analyser is an ESLint plugin that you install using a package manager, such as NPM or Yarn.
Troubleshoot Installation Problems
The Komaci Static Analyzer is implemented as a plugin for ESLint, a well-known JavaScript validation tool. ESLint plugins can be
finicky in their installation and configuration, requiring that all pieces are perfectly aligned for success.
Validate Components During Development
To ensure your components can be used in offline environments, watch for and act on the recommendations of the static analyzer.
Static Analyzer Validation Rules
The static analyzer validates that various code constructs and references in Lightning web components, such as wire decorators and
server calls, support offline priming. The majority of the rules focus on determining whether all code dependencies, such as imports
and modules, can be resolved; or on correct usage of offline-compatible wire adapters.

Install the Komaci Static Analyzer

The Komaci static analyser is an ESLint plugin that you install using a package manager, such as NPM or Yarn.
• Node.js >= 14.0.0
• A supported package manager
– NPM >= 6.0.0
– Yarn (Classic) >= 1.22.19

Note: Use Terminal (or your command line tool of choice) to run all commands from the root directory of your Lightning web
components project.
1. Add the Komaci Static Analyzer plugin and its dependencies to the development dependencies of your project.
NPM
npm install --save-dev @salesforce/eslint-plugin-lwc-graph-analyzer

YARN
yarn add --dev @salesforce/eslint-plugin-lwc-graph-analyzer

2. Install all project modules and dependencies locally in the project.

NPM
npm install

YARN
yarn install

3. Configure your project to use the new plugin.

Modify the .eslintrc.json file under your project’s force-app/main/default/lwc directory by adding the bolded
text:
{

"extends": [

36
Development Tools and Processes Troubleshoot Installation Problems

"@salesforce/eslint-config-lwc/recommended",

"plugin:@salesforce/lwc-graph-analyzer/recommended"
],
"overrides": [
...

Troubleshoot Installation Problems

The Komaci Static Analyzer is implemented as a plugin for ESLint, a well-known JavaScript validation tool. ESLint plugins can be finicky
in their installation and configuration, requiring that all pieces are perfectly aligned for success.
Unfortunately, there’s often not much feedback—if any—if something went wrong in the process. The most likely clue that there’s a
problem is when known errors in your code produce no feedback.
If you’re not sure if the static analyzer or ESLint has been successfully configured, open an LWC JavaScript file where you would expect
linting feedback. Then, check the ESLint section of the Output panel in VS Code for feedback messages. To open the Output panel, click
View Output. Then, to open the ESLint logs, select ESLint from the dropdown in the upper right corner of the Output panel.

Common Issues
• Install into your project — For the validation package to function properly, you must install all dependent packages using the
commands in the installation instructions from the root directory of your project. For example, the error in the preceding Output
panel screenshot indicates a missing package. This is due to not installing a package required for the project.
• Check your .eslintrc.json file — If you misconfigure your .eslintrc.json, the ESLint Output panel might show an
error related to that file. Ensure that the lines you add to your .eslintrc.json look exactly like the example in the installation
instructions and fix any syntax errors.
• ESLint must be authorized — If you don’t see any feedback in the ESLint output view, the ESLint server itself is likely not getting
initialized for your project. Make sure that you have:
– Installed theESLint extension for Visual Studio Code.
– Installed project dependencies into your project with npm install (or yarn install) from your project’s root directory.
The command installs the ESLint package and other dependencies locally to your project.
– Authorized ESLint to run in your project. If it’s not, you might see an “error” squiggly line in the first line of your JavaScript file,
indicating that ESLint isn’t authorized. Hovering over that error gives you the option to authorize it for your project.

Validate Components During Development

To ensure your components can be used in offline environments, watch for and act on the recommendations of the static analyzer.
As you develop your Lightning web components, validation indicators, displayed as colored squiggly lines, appear under code to highlight
that it violates a validation rule. Red lines indicate an error, and yellow lines indicate a warning.

37
Development Tools and Processes Static Analyzer Validation Rules

To fix an issue, hover over the problematic code. A pop-up appears near the code, describing what the problem is and how to fix it.

• You’ll see a description of the issue, along with the linting package that found the issue.
• Click View Problem to highlight the code causing the issue, with a box underneath describing the issue and what linting package
found the issue.
• Click Quick Fix to show a dropdown of options of how to fix the issue. Then, select an option from the menu to automatically
perform that fix.

Static Analyzer Validation Rules

The static analyzer validates that various code constructs and references in Lightning web components, such as wire decorators and
server calls, support offline priming. The majority of the rules focus on determining whether all code dependencies, such as imports and
modules, can be resolved; or on correct usage of offline-compatible wire adapters.
Using a wire provides an efficient and mostly transparent mechanism to deliver required data for a given set of Lightning web components.
Today, not all wire adapters are enabled for offline use, and even those that are must be used correctly to work while offline. Without a
properly formatted wire, the number of network requests increases, components render slowly, and performance suffers.
For offline support, mobile apps at Salesforce use these wires to ensure the correct data for each record and its components are always
ready to use. A wire that doesn’t align with the validation rules defined in this package can result in features implemented with Lightning
web components not working correctly when offline.
For more information on wires and how to use them, see Use the Wire Service to Get Data in the Lightning Web Components Developer
Guide.

Develop Offline-Ready LWCs with the LWC Offline Test Harness

The LWC Offline Test Harness (Test Harness, for short) is a lightweight testing and debugging app that enables developers to easily
debug Lightning web components for use in their LWC Offline-based mobile apps. Use Test Harness to execute Quick Actions on selected
SObjects from your Salesforce org.
Test Harness provides error, warning, and info logs for your LWCs as it loads, runs, and interacts with Salesforce. You’ll get logging details
for your data sync via the drafts queue, Lightning logs from Debug Console, and be able to attach Chrome and Safari debuggers to view
the console logs of the webview your LWCs are running in.

38
Development Tools and Processes Prerequisites & Setup Considerations

Test Harness helps you confirm that your LWCs work as expected in LWC Offline-based environments and are ready for integration
testing within an offline-enabled Salesforce mobile app.

Features
• Quick and convenient app flow, centered around launching LWC Quick Actions with a selected SObject.
• Dedicated draft queue, for viewing the status of pending data modification operations.
• Debug Console embedded into the app, for both a broad view of ongoing tasks and granular inspection of log messages.
• Immediate, on-demand app reloads for quickly re-bootstrapping and re-running your latest LWC code changes.
• Uses the latest version of LWC Offline.
• Can attach browser debuggers to view more developer-specific errors and warnings from the LWC webview.

IN THIS SECTION:
Prerequisites & Setup Considerations
To fully use Test Harness, you need a working mobile development environment. If you haven’t set up your mobile development
tools yet, see the following resources for guidance.
Download and Install — Android
After you’ve gotten your mobile development tools up and running, getting started with Test Harness on Android devices is a breeze.
Download and Install — iOS
After you’ve gotten your mobile development tools up and running, getting started with Test Harness on iOS devices is a breeze.
Use the Test Harness
Learn how to use the Test Harness to perform common testing and debugging actions.
Debug Lightning Web Components
The best way to develop and debug your Lightning web components is the same way you develop and debug anything built with
HTML, CSS, and JavaScript: with the built-in debugging tools in your web browser.

Prerequisites & Setup Considerations

To fully use Test Harness, you need a working mobile development environment. If you haven’t set up your mobile development tools
yet, see the following resources for guidance.
Salesforce DX Setup
• Set Up Your Development Environment for Lightning Web Components
• Set Up Your Development Environment for LWC Offline
• Preview Lightning Web Components on Mobile
• Set Up Xcode
• Set Up Android Studio
Third-Party Developer Tools
• Xcode Overview (Apple developer documentation)
• Meet Android Studio(Google developer documentation)

39
Development Tools and Processes Download and Install — Android

Compatibility & Considerations

On Android devices, the Test Harness app is distributed as an APK that can be installed on emulators or physical devices.
Minimum SDK version: 27/8.1 Oreo
On iOS devices, the Test Harness app is distributed as an app that can be installed on simulators.
Minimum iOS version: iOS 14.0

Download and Install — Android

After you’ve gotten your mobile development tools up and running, getting started with Test Harness on Android devices is a breeze.
1. Download the Test Harness APK file.
2. Open Android Studio and start an emulator compatible with Test Harness on page 39.
For help with emulators in Android Studio, see Run an app on the Android Emulator (Google).

3. Using Finder (macOS) or File Explorer (Windows), navigate to your Downloads folder.
4. Find the Test Harness APK file you downloaded, and drag it onto a running Android emulator.
The Test Harness app is now installed on your emulated device!

Download and Install — iOS

After you’ve gotten your mobile development tools up and running, getting started with Test Harness on iOS devices is a breeze.
1. Download the Test Harness iOS app file.
2. Open Xcode and start a simulator compatible with Test Harness on page 39.
For help with simulators in Xcode, see Getting Started in Simulator (Apple).

3. Using Finder, navigate to your Downloads folder.

4. Locate the Test Harness iOS app file you downloaded (its name is LSDKTestHarness.app.zip, or similar).
5. Unzip LSDKTestHarness.app.zip by double-clicking it. Then, find the newly extracted file in your Downloads folder, named
LSDKTestHarness.app.
6. Drag the LSDKTestHarness.app onto a running iOS simulator.
The Test Harness app is now installed on your simulated device!

Use the Test Harness

Learn how to use the Test Harness to perform common testing and debugging actions.

IN THIS SECTION:
Create a Quick Action with an LWC
Display and Run an LWC from a Quick Action

40
Development Tools and Processes Debug Lightning Web Components

Create a Quick Action with an LWC

To create a Quick Action with an LWC, the LWC must have a target of type lightning__RecordAction defined in the component’s
meta.xml file:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordAction</target>
</targets>
</LightningComponentBundle>

After a component is deployed to Salesforce, create a Quick Action that uses it. For details, see Quick Actions in the Lightning Web
Components Developer Guide.

Tip: You don’t need to add Quick Actions to a page layout to see it in Test Harness. The Test Harness app automatically shows all
LWC-based Quick Actions for the displayed sObject type.

Display and Run an LWC from a Quick Action

After you log in, the Test Harness home page displays a list of all of your org’s sObjects. Tap an sObject in the list to display the 10 most
recently viewed records for the selected sObject.

Tip: If the list is empty, log in to the org with the same user and view a few sample records you wish to test with. Those records
are added to the Most Recently Viewed list in Salesforce. Return to Test Harness and access the sObject again by tapping on it.
The recently viewed records appear in the list.
When you tap a record, you’re presented with all of the Quick Actions that are defined in Buttons, Links, and Actions in Setup for the
selected sObject.

Note: To streamline the user interface and focus on development activities, Test Harness only displays Lightning web
component-based Quick Actions.
Tap a Quick Action to launch the LWC. If the LWC exposes a recordId property using the @api annotation, the LWC receives the
ID of the tapped record set on that property.

Debug Lightning Web Components

The best way to develop and debug your Lightning web components is the same way you develop and debug anything built with HTML,
CSS, and JavaScript: with the built-in debugging tools in your web browser.
For debugging on Android, use Chrome Devtools (Google).
For debugging on iOS, use Safari Web Inspector (Apple).

IN THIS SECTION:
Enable Debugging for LWC Developers
Admins must enable debugging for each LWC developer user that uses Test Harness in their org.

41
Development Tools and Processes Debug Lightning Web Components

Install Local Development Server Plugin

Whether you’re debugging your component for iOS or Android, you must first install the LWC Development Server for mobile.
Debug in Android
Debug in iOS

Enable Debugging for LWC Developers

Admins must enable debugging for each LWC developer user that uses Test Harness in their org.
To enable debugging for these users, from Setup:
1. Navigate to Settings > Session Settings.
2. Deselect Use Lightning Web Security for Lightning web components (GA) and Aura components (beta).

Install Local Development Server Plugin

Whether you’re debugging your component for iOS or Android, you must first install the LWC Development Server for mobile.
1. In a terminal window in VS Code or Terminal, run the following command to install the LWC Development Server for mobile.
sfdx plugins:install @salesforce/lwc-dev-server

Debug in Android
1. On your emulated Android device, open the Settings app.
2. Enter About emulated device into the search bar, and tap the result titled About emulated device.
3. Scroll to the bottom of the page and tap Build number seven times. The message “You are now a developer!” appears after the
seventh tap, meaning that developer mode is enabled for the emulator.
4. Launch Chrome on your desktop. In the location bar, enter chrome://inspect/#devices.
5. Select Inspect for the WebView under the Remote Target emulator you’re using.
A window appears containing your emulator with Chrome DevTools connected to it. You can use Chrome DevTools to inspect the
LWC element, set breakpoints, and see the console output. As with iOS, you can use the standard web development techniques for
working with HTML, CSS, and JavaScript to run, test, debug, and improve your LWC.

42
Development Tools and Processes Debug Lightning Web Components

For additional information on the basics of debugging with Chrome Developer Tools, see Remote debugging WebViews (Google).
For a deeper dive on debugging JavaScript in an embedded WebView of an Android mobile app, see Debugging embedded JavaScript
in an Android app using Chrome DevTools.

Debug in iOS
Note: Debugging in iOS currently only works with simulators running on macOS Big Sur or later, and requires using the Safari
Technology Preview browser.
1. Launch Safari on your Desktop.
2. Select Safari > Preferences.
3. Select Advanced.

43
Development Tools and Processes Debug Lightning Web Components

4. Enable Show Develop menu in menu bar. Then, close the Preferences panel.
5. Select Develop > Simulator - device - version, where the Simulator is the one that you’ve opened with the Test Harness app for
testing your new Lightning web component.
A window appears, showing the Safari Web Inspector developer tools connected to your simulator. You can use these tools and
standard web development techniques to refine and improve your content.

For additional information about the Web Inspector and how to use it, see Apple Web Development Tools (Apple).

44
CHAPTER 6 Quick Start Tutorials
In this chapter ... These hands-on tutorials get you started with creating custom LWCs for your mobile apps.

• Develop a Lightning
Web Component
Quick Action
• Debug Lightning Web
Components in the
Field Service Mobile
App

45
Quick Start Tutorials Develop a Lightning Web Component Quick Action

Develop a Lightning Web Component Quick Action

Welcome to developing quick actions using Lightning web components (LWCs) in the Salesforce Field Service (SFS) mobile app. With
custom quick actions, you can tailor your Field Service mobile app users’ experience to have easier access to viewing and updating
information relevant to them.
This quick start guides you through the basic steps to create a custom record-specific quick action. It’s a hands-on tutorial, intended to
guide you through the steps, developing your “muscle memory” for a specific development lifecycle. While you can just read it, you’ll
get more out of it if you follow along on your own development system.

IN THIS SECTION:
Prerequisites
Ensure you’re ready for this tutorial by verifying that you have the right software installed and configured, and your org has Lightning
web components enabled for mobile users.
Field Service Org Setup
Create a permission set with the Access Lightning Web Components in Field Service Mobile permission,
and assign this permission set to users who develop for or use Lightning web components in the mobile app.
iOS Simulator Setup
During development it’s convenient to test your code in a virtual device. Use Xcode to create a device simulator, and install the
virtual device build of your mobile app into it.
Android Emulator Setup
During development it’s convenient to test your code in a virtual device. Use Android Studio to create a device emulator, and install
the virtual device build of your mobile app into it.
Workspace Setup
Set up your development environment, create a project to develop your LWC in, and connect your project to Salesforce.
Create and Configure a Lightning Web Component
In this section, you’ll create a basic component named demoLWCAction that displays a “Hello World!” message on the screen.

Prerequisites
Ensure you’re ready for this tutorial by verifying that you have the right software installed and configured, and your org has Lightning
web components enabled for mobile users.
• Salesforce CLI is installed and up-to-date.
• VS Code is installed and up-to-date.
• Salesforce Extension Pack for VS Code is installed and up-to-date.

Note: Ensure all prerequisites listed on the extension pack page are also satisfied.

Field Service Org Setup

Create a permission set with the Access Lightning Web Components in Field Service Mobile permission, and
assign this permission set to users who develop for or use Lightning web components in the mobile app.

Note: This step is required for Field Service orgs. If you’re using LWC Offline in the Salesforce mobile app, skip to the next step.

46
Quick Start Tutorials Field Service Org Setup

Lightning web components for LWC Offline-enabled mobile apps is an opt-in feature. To enable it for your org, you must create and
assign a permission set for your mobile users that includes enabling the Access Lightning Web Components in Field
Service Mobile permission. This permission set is required to access and run LWCs within the Field Service mobile app. (While
not technically required to develop LWCs, you’ll have a hard time developing components when you can’t run them.)
You can use this one permission set for any number of Lightning web components and mobile users.

IN THIS SECTION:
Define a Permission Set for Your Org
Create a permission set that applies the permissions required to enable Lightning web components to users with the permission
set.
Assign the Permission Set to a Mobile User
Assign the permission set that enables Lightning web components to users who must use or develop LWCs.

Define a Permission Set for Your Org

Create a permission set that applies the permissions required to enable Lightning web components to users with the permission set.
1. From Setup, enter Permission Sets in the Quick Find Box and select Permission Sets.
2. Click New.
• For Label, enter Field Service - LWC Offline.
• For Description, enter Assign to Field Service Mobile users to give them permission to
run LWC actions.
• For License, select Field Service Mobile.

3. Click Save.
4. In the Find Settings box, enter Access Lightning Web Components in Field Service Mobile and click it.
5. Click Edit.
6. Select the Access Lightning Web Components in Field Service Mobile checkbox.
7. Click Save.

Assign the Permission Set to a Mobile User

Assign the permission set that enables Lightning web components to users who must use or develop LWCs.
1. From Setup, enter Permission Sets in the Quick Find Box and select Permission Sets.
2. Select Field Service - LWC Offline, which is the new permission set.
3. Click Manage Assignments.
4. Click Add Assignments.
5. Select your mobile user’s checkbox.
For this quick start, the mobile user is you.

6. Click Assign.

47
Quick Start Tutorials iOS Simulator Setup

iOS Simulator Setup

During development it’s convenient to test your code in a virtual device. Use Xcode to create a device simulator, and install the virtual
device build of your mobile app into it.

IN THIS SECTION:
Configure Minimum Required iOS Simulator Settings
Ensure your virtual device meets the minimum device and iOS version requirements to run your mobile app.
Install the Field Service App for iOS
To run the Field Service mobile app in an iOS simulator, download and install a virtual device build of the app. After it’s installed,
open the app and log into your development org.

Configure Minimum Required iOS Simulator Settings

Ensure your virtual device meets the minimum device and iOS version requirements to run your mobile app.
Review the minimum requirements for your mobile app.
• Requirements for the Salesforce Mobile App
• Field Service Mobile App Requirements
1. Download and install the latest version of Xcode. If you already have Xcode installed, there’s no need to reinstall it.
2. Launch Xcode.
3. In the menu bar, select Xcode > Open Developer Tool > Simulator.
A new program called Simulator opens, displaying a mobile screen.
4. Go to File > Open Simulator to choose your preferred device.
If you want to create a simulator, go to File > New Simulator and follow the prompts.

After the device simulator launches you can close Xcode, but keep the Simulator app’s window open to install the Field Service app in
the next section.

Install the Field Service App for iOS

To run the Field Service mobile app in an iOS simulator, download and install a virtual device build of the app. After it’s installed, open
the app and log into your development org.
1. Download the iOS virtual device build of the Salesforce Field Service mobile app, in the form of a zip file.
A link to download the latest version of the app is available in this Trailblazer Community post. If you encounter an insufficient
permissions page, log in to Trailhead and try the link again.

2. Double-click the downloaded zip file to extract the app file.

3. Drag the downloaded .app file into the Simulator window.
4. In Simulator, click (a simulated tap in this case) the newly installed Field Service app to open it.
If you don’t see the app on the first page, it’s probably installed on a different app page. You can swipe the page with your mouse
to see additional pages to find the app.

5. Click (simulator tap, you get the idea) the Field Service app. Click Get Started.
6. Click the screen to run through the tutorial or click Skip.

48
Quick Start Tutorials Android Emulator Setup

7. Click Log In.

8. Click I Agree to agree to the Order Form Supplement agreement.
9.
Click and select a connection.

Warning: If you’re logging in as a community user for the first time, click to add a new connection.
• For Host, enter your org’s URL in the following format: https://[yourURL].my.salesforce.com.
• For Label, enter a nickname for your connection.

10. Click Done.

11. Enter your username and password for your org.
12. Click Log In.
13. Click Allow to allow the app to access your Salesforce information.
14. Click through the various permissions screens and allow them the appropriate access.
When finished, you arrive at the app’s home screen.

Android Emulator Setup

During development it’s convenient to test your code in a virtual device. Use Android Studio to create a device emulator, and install the
virtual device build of your mobile app into it.

IN THIS SECTION:
Configure Minimum Required Android Emulator Settings
Ensure your virtual device meets the minimum device and Android API version requirements to run your mobile app.
Install the Field Service App for Android
To run the Field Service mobile app in an Android emulator, download and install a virtual device build of the app. After it’s installed,
open the app and log into your development org.

Configure Minimum Required Android Emulator Settings

Ensure your virtual device meets the minimum device and Android API version requirements to run your mobile app.
Review the minimum requirements for your mobile app.
• Requirements for the Salesforce Mobile App
• Field Service Mobile App Requirements
1. Download and install the latest version of Android Studio.
If you already have Android Studio installed, there’s no need to reinstall it.

2. Launch Android Studio.

3.
Click More Actions or in the top left, depending on your version of Android Studio, and then select Virtual Device Manager
from the dropdown.
4.
Click the in the Actions column of the device you’d like to edit.
Or, if you want to create an emulator, click Create Device and follow the prompts.

49
Quick Start Tutorials Android Emulator Setup

5. Click Change in the line that displays the version number.

6. In the pop-up window, select API 30 version or later.

7. Click OK.
8. Scroll down in the window to the Memory and Storage section.

50
Quick Start Tutorials Android Emulator Setup

9. Click in the RAM field and enter 4096.

If you can’t change the RAM value, use a newer device for the emulator.

10. Click Finish.

11.
Click in the Actions column of the device to launch the Android Emulator.
After the device emulator launches you can close Android Studio, but keep the Android Emulator app window open to install the Field
Service app in the next section.

Install the Field Service App for Android

To run the Field Service mobile app in an Android emulator, download and install a virtual device build of the app. After it’s installed,
open the app and log into your development org.
1. Download the Android virtual device build of the Salesforce Field Service mobile app in the form of an APK file.
A link to download the latest version of the app is available in this Trailblazer Community post. If you encounter an insufficient
permissions page, log in to Trailhead and try the link again.

2. Drag the downloaded .apk file into the Android Emulator window.
3. Click a blank space on the Android Emulator’s screen and drag up to view the installed apps.
4. Click the newly installed Field Service app.
5. Click I Agree to accept the Order Form Supplement agreement.

51
Quick Start Tutorials Workspace Setup

6. Click the vertical dots button on the top right and select Change Server.

7. Select a connection.

Warning: If you’re logging in as a community user for the first time, click Add New Connection, fill in the form as indicated
in the following bullet list, and then click Apply to save the changes.
• For Name, enter a nickname for your connection.
• For URL, enter your org’s URL. It must be in the following format: https://[yourURL].my.salesforce.com

8. Click the arrow in the top left to go back to the login screen.
9. Enter your username and password for your org.
10. Click Log In.
11. Click Allow to allow the app to access your Salesforce information.
12. Click through the various permissions screens and allow them the appropriate access.
When finished, you arrive at the app’s home screen.

Workspace Setup
Set up your development environment, create a project to develop your LWC in, and connect your project to Salesforce.
1. Launch VS Code.
2. Select File > Open and open a project to use with your org.

Note: If you don’t have a project created, you can open the VS Code Command Palette by clicking View > Command Palette,
enter SFDX, and select SFDX: Create a Project. Then follow the prompts.

3. In the menu bar, select View > Terminal to open VS Code’s integrated terminal if it’s not already visible.

52
Quick Start Tutorials Create and Configure a Lightning Web Component

4. Run the following command to install the Salesforce Extension Plugins for mobile.
sfdx plugins:install @salesforce/lwc-dev-mobile

5. In the menu bar, select View > Command Palette to open the VS Code Command Palette.
6. Enter SFDX and select SFDX: Authorize an Org.
7. Select the org you want to use and press Enter.
A web page opens for the org login.
8. Verify your org authorization by checking the bottom left in VS Code.
You should see your username in the VS Code status bar.

If you have difficulty authorizing SFDX for access to your org, see SFDX Authorization.

Create and Configure a Lightning Web Component

In this section, you’ll create a basic component named demoLWCAction that displays a “Hello World!” message on the screen.
If this is your first Lightning web component ever, you might be tempted to rush through this. Take your time, and make sure you
understand what each of these steps accomplishes.

IN THIS SECTION:
Create and Deploy a Lightning Web Component to Salesforce
Create a simple Lightning web component, configure its metadata, and then deploy the component to your Salesforce org—all
from within VS Code.
Verify the Component Was Deployed to Your Org
The simplest way to verify that a Lightning web component is available in your org is to view the list of components in Setup in
Salesforce.
Create a Quick Action in Salesforce
To access your Lightning web component, you must assign your component to a new Quick Action, and then assign the Quick
Action to a page layout in Salesforce. This configuration makes it visible in the Actions launcher in the mobile app.
Add the Quick Action to a Page Layout in Salesforce
Make a Lightning web component quick action available in the mobile app by adding it to the mobile actions section of a page
layout.
Clear Cached Metadata
To see changes to a Lightning web component as you develop, cached metadata must be cleared in the mobile app. Clear cached
metadata every time new code is deployed to the org to see your changes.
Run the Quick Action in the Mobile App
Let’s finally see that Lightning web component working in the Field Service mobile app.

53
Quick Start Tutorials Create and Configure a Lightning Web Component

Create and Deploy a Lightning Web Component to Salesforce

Create a simple Lightning web component, configure its metadata, and then deploy the component to your Salesforce org—all from
within VS Code.
1. In the VS Code explorer, right-click the force-app/main/default/lwc folder and select SFDX: Create Lightning Web
Component.
2. Enter demoLWCAction as the name for the component and press Enter, and then press Enter again to save it to the default
location.
3. In the newly created demoLWCAction.html, replace the default code with the following, and then save the file:
<template>
<p>Hello World!</p>
</template>

4. In the newly created demoLWCAction.js-meta.xml, replace the default code with the following and save the file:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

5. In the VS Code explorer, right-click the force-app/main/default/lwc/demoLWCAction folder and select SFDX:
Deploy Source to Org.

Verify the Component Was Deployed to Your Org

The simplest way to verify that a Lightning web component is available in your org is to view the list of components in Setup in Salesforce.
1. From Setup, enter Lightning Components in the Quick Find Box and select Lightning Components.
2. Scroll through the list of components to see demoLWCAction.

54
Quick Start Tutorials Create and Configure a Lightning Web Component

Create a Quick Action in Salesforce

To access your Lightning web component, you must assign your component to a new Quick Action, and then assign the Quick Action
to a page layout in Salesforce. This configuration makes it visible in the Actions launcher in the mobile app.
For this example, the action is added to the Service Appointment object.
1. From Setup, click Object Manager.
2. In the Quick Find box, enter Service Appointment, and click Service Appointment.
3. Click Buttons, Links, Actions.
4. Click New Action.
• For Action Type, select Lightning Web Component.
• For Lightning Web Components, select c:demoLWCAction.
• For Label, enter My New Action. This label is how the action is displayed in the Actions launcher in the Field Service mobile
app.

55
Quick Start Tutorials Create and Configure a Lightning Web Component

5. Click Save.
6. Click Service Appointment next to Object Name to return to the Service Appointment object page.

Add the Quick Action to a Page Layout in Salesforce

Make a Lightning web component quick action available in the mobile app by adding it to the mobile actions section of a page layout.
1. From the Service Appointment object page, select Page Layouts.
2. Click the layout assigned to your mobile user.
3. Select Mobile & Lightning Actions.
4. Drag My New Action to the Salesforce Mobile and Lightning Experience Actions section.
5. Click Save.

Note: Mobile quick actions are only added to the mobile layout. You can’t verify that mobile quick actions were successfully
added to the correct page layout using the desktop experience.

Clear Cached Metadata

To see changes to a Lightning web component as you develop, cached metadata must be cleared in the mobile app. Clear cached
metadata every time new code is deployed to the org to see your changes.
1. Launch the iOS Simulator or Android Emulator.
2. Open the Field Service mobile app.
3. Select the Profile tab in the navigation bar.
4. Click , then Advanced Settings, and then Clear Cached Metadata.
5. On iOS devices, click OK in the confirmation dialog and then click OK again.
6. Close and reopen the Field Service app.

56
Quick Start Tutorials Create and Configure a Lightning Web Component

Run the Quick Action in the Mobile App

Let’s finally see that Lightning web component working in the Field Service mobile app.
1. Click the Schedule tab.
2. Click any Service Appointment.
If none are listed, create one and assign it to your mobile user as an example.

3. Click the Actions drawer and drag it up.

Your action is listed as an option.

Android

57
Quick Start Tutorials Create and Configure a Lightning Web Component

iOS

4. Click My New Action.

This opens the screen to your new custom Lightning web component.

Android

58
Quick Start Tutorials Debug Lightning Web Components in the Field Service Mobile
App

iOS

Debug Lightning Web Components in the Field Service Mobile App

The best way to develop and debug your Lightning web components is the same way you develop and debug anything built with HTML,
CSS, and JavaScript: with the debugging tools built into your web browser.
• For debugging on Android, use Chrome DevTools
• For debugging on iOS, use Safari Web Inspector
The rest of this tutorial guides you through connecting your desktop browser’s developer tools to the WebView within the Field Service
mobile app. From there, debugging an LWC running on a mobile device is like any other web app debugging session.

IN THIS SECTION:
Install Local Development Server Plugin
Whether you’re debugging your component for iOS or Android, you must first install the LWC Development Server for mobile.
Debug in iOS
Connect Safari Web Inspector on your desktop to the WebView in the Field Service mobile app where your LWC is running.
Debug in Android
Connect Chrome DevTools on your desktop to the WebView in the Field Service mobile app where your LWC is running.

Install Local Development Server Plugin

Whether you’re debugging your component for iOS or Android, you must first install the LWC Development Server for mobile.
1. In a terminal window in VS Code or Terminal, run the following command to ensure you’re using the latest version of Salesforce CLI.
sfdx update

59
Quick Start Tutorials Debug in iOS

Note: If you encounter an error when updating Salesforce CLI, see Update Salesforce CLI for troubleshooting instructions.

2. In the same terminal window, run the following command to install the LWC Development Server for mobile.
sfdx plugins:install @salesforce/lwc-dev-server

Debug in iOS
Connect Safari Web Inspector on your desktop to the WebView in the Field Service mobile app where your LWC is running.

Note: Debugging in iOS currently only works with Big Sur or later, and requires using the Safari Technology Preview browser.

1. Launch Safari on your desktop.

2. Select Safari > Preferences.
3. Select Advanced.
4. Enable Show Develop menu in menu bar. Close the Preferences panel.
5. Select Develop > Simulator - device - version, where the Simulator is the one that you’ve opened with the Field Service
app for testing your new Lightning web component.
A window appears that shows the Safari Web Inspector developer tools connected to your simulator. You can use these tools and
standard web development techniques to refine and improve your component.

See Apple Web Development Tools for additional information about the Web Inspector and how to use it.

60
Quick Start Tutorials Debug in Android

Debug in Android
Connect Chrome DevTools on your desktop to the WebView in the Field Service mobile app where your LWC is running.
1. On your emulated Android device, open the Settings app.
2. Enter About emulated device into the search bar and click it.
3. Scroll to the bottom of the page and click Build number seven times.
The message “You are now a developer!” appears when you click it enough, indicating that developer mode is enabled for the
emulator.
4. Launch Chrome on your desktop.
5. In the location bar, enter chrome://inspect/#devices.
6. Click Inspect for the WebView under the Remote Target emulator you’re using.
A window appears containing your emulator with Chrome DevTools connected to it. You can use Chrome DevTools to inspect the LWC
element, set breakpoints, and see the console output. As with iOS, you can use the standard web development techniques for working
with HTML, JavaScript, and CSS to run, test, debug, and improve your LWC.

61
Quick Start Tutorials Debug in Android

See Remote debugging WebViews for additional basics, and Debugging embedded JavaScript in an Android app using Chrome DevTools
for a deep dive on debugging JavaScript in an embedded WebView of an Android mobile app.

62