--- title: Connectivity API description: >- 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. api_version: 2024-10 api_name: pos-ui-extensions source_url: html: >- https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/platform-apis/connectivity-api md: >- https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/platform-apis/connectivity-api.md --- # 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. #### Use 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 (17) ### Supported targets * [pos.​customer-details.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-action-menu-item-) * [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-action-modal-) * [pos.​customer-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/customer-details#customer-details-block-) * [pos.​draft-order-details.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/draft-order-details#draft-order-details-action-menu-item-) * [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/draft-order-details#draft-order-details-action-modal-) * [pos.​draft-order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/draft-order-details#draft-order-details-block-) * [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/home-screen#home-screen-action-modal-) * [pos.​home.​tile.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/home-screen#home-screen-tile-) * [pos.​order-details.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-menu-item-) * [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-modal-) * [pos.​order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-block-) * [pos.​product-details.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-action-menu-item-) * [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-action-modal-) * [pos.​product-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/product-details#product-details-block-) * [pos.​purchase.​post.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-menu-item-) * [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-modal-) * [pos.​purchase.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-block-) ## ConnectivityApi The `ConnectivityApi` object provides methods for monitoring network connectivity. Access these methods through `api.connectivity` to check connection status and subscribe to connectivity changes. * 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 offline-aware functionality and reactive connectivity handling. ### ConnectivityState Represents the current Internet connectivity status of the device. Indicates whether the device has an active Internet connection or is offline. * internetConnected Whether the device is connected to the Internet. Returns \`'Connected'\` when the device has an active Internet connection and can communicate with remote servers, or \`'Disconnected'\` when the device is offline and can't reach the Internet. This state reflects the actual network connectivity, not just WiFi/cellular availability—a device can be connected to WiFi but still show \`'Disconnected'\` if that network has no Internet access. Commonly used for implementing offline-aware functionality (queuing operations, showing cached data), displaying connectivity indicators in the UI, disabling network-dependent features when offline, or providing user feedback about connection status. ```ts ConnectivityStateSeverity ``` ```ts export interface ConnectivityState { /** * Whether the device is connected to the Internet. Returns `'Connected'` when the device has an active Internet connection and can communicate with remote servers, or `'Disconnected'` when the device is offline and can't reach the Internet. * * This state reflects the actual network connectivity, not just WiFi/cellular availability—a device can be connected to WiFi but still show `'Disconnected'` if that network has no Internet access. * * Commonly used for implementing offline-aware functionality (queuing operations, showing cached data), displaying connectivity indicators in the UI, disabling network-dependent features when offline, or providing user feedback about connection status. */ internetConnected: ConnectivityStateSeverity; } ``` ### ConnectivityStateSeverity ```ts 'Connected' | 'Disconnected' ``` Examples ### 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 ```tsx import React from 'react'; import { Tile, useConnectivitySubscription, reactExtension, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const connectivity = useConnectivitySubscription(); return ( ); }; export default reactExtension('pos.home.tile.render', () => ); ``` ##### TS ```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); }); ``` ## Best 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. ## Limitations * 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.