Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

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 network connectivity and handle interruptions gracefully.
Status indicators: Display connectivity status to inform users about network availability.
Data synchronization: Queue API calls and sync operations when connectivity is restored.
Retry logic: Implement retry logic for failed network operations.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

The Connectivity API object provides access to device connectivity information. Access the following properties on the API object to monitor Internet connection status and subscribe to connectivity changes in real time.

Anchor to subscribable subscribable RemoteSubscribable<> required: Creates a subscription to changes in connectivity. Provides an initial value and a callback to subscribe to value changes. Use for implementing connectivity-aware functionality and reactive connectivity handling.

ConnectivityState

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

internetConnected
Whether the device is connected to the Internet. Returns either `Connected` or `Disconnected` to indicate the current Internet connectivity status. Use for implementing connectivity-aware functionality, displaying connectivity indicators, or controlling network-dependent features.
```
ConnectivityStateSeverity
```

ConnectivityStateSeverity

'Connected' | 'Disconnected'

Examples

import React from 'react';

import {

Tile,

useConnectivitySubscription,

reactExtension,

} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {

const connectivity = useConnectivitySubscription();

return (

<Tile

title='My App'

enabled={connectivity.internetConnected === 'Connected'}

);

};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

Examples

Monitor network connectivity changes

Description

Subscribe to connectivity state changes to respond when the device goes online or offline. This example demonstrates using the connectivity subscription to track network status and display the current connection state, allowing your extension to adapt behavior based on network availability.

React

import React from 'react';
import {
  Tile,
  useConnectivitySubscription,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const connectivity = useConnectivitySubscription();

  return (
    <Tile
      title='My App'
      enabled={connectivity.internetConnected === 'Connected'}
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

TS

import {
  Tile,
  ConnectivityState,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    enabled: true,
  });

  api.Connectivity.subscribable.subscribe(
    (newConnectivity: ConnectivityState) => {
      tile.updateProps({
        enabled: newConnectivity.internetConnected === 'Connected',
      });
    },
  );

  root.append(tile);
});

Anchor to Best practicesBest practices

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

The Connectivity API provides read-only access to connectivity information and can't be used to control or modify network settings on the device.
RemoteSubscribable supports only one subscription at a time. Use makeStatefulSubscribable if you need multiple components to subscribe to connectivity changes simultaneously.
Connectivity status reflects Internet connectivity only and may not indicate the quality or speed of the connection, which could affect API performance.
The API monitors general Internet connectivity but doesn't provide specific information about Shopify service availability or API endpoint availability.

Was this page helpful?