Choose a version:

Connectivity API

The Connectivity API provides access to device connectivity information, allowing you to monitor Internet connection status and respond to connectivity changes in real-time. The API enables both immediate connectivity checks and dynamic updates when network conditions change.

Anchor to Use casesUse cases

Network monitoring: Monitor connectivity and handle network interruptions during transactions.
Status indicators: Display connectivity status to inform users about network availability.
Queue operations: Queue API calls and sync operations when connectivity is restored.
Retry logic: Implement retry logic for failed network operations.

Support

Targets (28)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides access to the current connectivity state. Access the following properties on shopify to monitor network connectivity and respond to connectivity changes.

Anchor to current current <> required: Provides read-only access to the current connectivity state and allows subscribing to connectivity changes. Use for implementing connectivity-aware functionality and reactive connectivity handling.

ReadonlySignalLike

Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.

subscribe
Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

ConnectivityState

Represents the current Internet connectivity status of the device. Indicates whether the device is connected or disconnected from the Internet.

internetConnected
The Internet connection status of the POS device.
```
ConnectivityStateSeverity
```

ConnectivityStateSeverity

'Connected' | 'Disconnected'

Examples

jsx

import {render} from 'preact';

import {useState, useEffect} from 'preact/hooks';

// Allows the use of `shopify.connectivity.current.value` as a stateful subscription.

import '@shopify/ui-extensions/preact';

export default async () => {

render(<Extension />, document.body);

};

const Extension = () => {

const [isConnected, setIsConnected] = useState(

shopify.connectivity.current.value.internetConnected === 'Connected'

);

useEffect(() => {

const unsubscribe = shopify.connectivity.current.subscribe((newConnectivity) => {

setIsConnected(newConnectivity.internetConnected === 'Connected');

});

return unsubscribe;

}, []);

return (

<s-tile

heading="My App"

disabled={!isConnected}

);

};

Examples

Description

Subscribe to connectivity changes to monitor network status in real time. This example demonstrates using `shopify.connectivity.subscribe()` and `shopify.connectivity.connected` to detect when the device goes online or offline. This enables adaptive behavior for offline-capable features or network-dependent operations.

jsx

import {render} from 'preact';
import {useState, useEffect} from 'preact/hooks';
// Allows the use of `shopify.connectivity.current.value` as a stateful subscription.
import '@shopify/ui-extensions/preact';

export default async () => {
  render(<Extension />, document.body);
};

const Extension = () => {
  const [isConnected, setIsConnected] = useState(
    shopify.connectivity.current.value.internetConnected === 'Connected'
  );

  useEffect(() => {
    const unsubscribe = shopify.connectivity.current.subscribe((newConnectivity) => {
      setIsConnected(newConnectivity.internetConnected === 'Connected');
    });
    return unsubscribe;
  }, []);

  return (
    <s-tile
      heading="My App"
      disabled={!isConnected}
    />
  );
};

Anchor to Best practicesBest practices

Handle connectivity changes gracefully: Use the subscribe method to automatically adapt your extension behavior when connectivity changes.
Design for connectivity awareness: Design your extension to handle network interruptions, informing users when network-dependent features are unavailable and providing clear guidance on next steps.
Provide clear connectivity feedback: Display connectivity status to users when it affects functionality, helping them understand why certain features may be limited or unavailable.
Queue operations during outages: Implement queuing mechanisms for non-critical operations that can be deferred until connectivity is restored.

Anchor to LimitationsLimitations

Connectivity status reflects Internet connectivity only and may not indicate the quality or speed of the connection, which could affect API performance.

Was this page helpful?