Offline Guidelines

These guidelines are complementary to the offline UX guidelines and are using the same structure for easy orientation. We suggest working with both guidelines side-by-side to get the full picture.

Going Offline

Connectivity Bar

The connectivity bar is displayed automatically when connection is lost, and disappears when the connection is regained.

It is displayed as a non-floating full-width bar on the bottom of the screen, reducing the available WixScreen view size, so no special adaptaions are needed.

Cached data

When a component is mounted, cached data should be first displayed and later updated with fresh data once the latter has been fetched.

In offline mode, when no cached data exists, component should display its empty state or the ErrorScreen/ErrorSection component according to the isConnected prop of WixScreen/WixComponent.

Example:

// assuming you hold your component's data in this.state.data and load it from storage/remote when the component mounts

render() {
  if (!this.props.isConnected && _.isEmpty(this.state.data)) {
    return <ErrorScreen/>;
  } else {
    // render your component
  }
}

Displaying errors

The ErrorScreen and ErrorSection come with an out-of-the-box offline mode message, so you should keep displaying your errors as usual and they will get the proper indication when offline.

Lazy loading lists

When displaying lists, use the LazyLoader component as your ListFooterComponent to automatically get offline mode errors support.

renderLoader = () => {
  return <List.LazyLoader/>;
};

render() {
  return (
    <FlatList
      data={_.isEmpty(data) ? _.times(10) : data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={this.onEndReached}
      onEndReachedThreshold={0.2}
      ListFooterComponent={this.renderLoader}
    />
  );
}

Unavailable actions

In general you should keep your flows the same also in offline mode and just let them fail. That way we can continue to collect BI and the user will get an offline indication in the error toast, so he understands it's related to being offline.

In rare cases, you might want to block some flows in offline if you can't handle them gracefully, or the user might lose a lot of his work when it eventually fails. In that case you should display a Toast. with a Toast.presets.FAILURE preset to have an offline indication.

// assuming you're using WixScreen or WixComponent

onButtonPress = () => {
  if (!this.props.isConnected) {
    toggleToast({
      visible: true,
      message: 'Checkout is not available',
      autoDismiss: 3000,
      position: 'bottom',
      preset: Toast.presets.FAILURE
    });
  }
}

More options to block actions

In some cases you might not be able to pass the connection status (isConnected) provided by WixScreen/WixComponent from the UI in order to block actions. For these case the engine also provides an option to check the connection status via ModuleRegistry API.

Do not use it to block network calls in offline mode, as we want to keep the original flows and let them fail, only use it to block actions.

const isConnected = ModuleRegistry.invoke('core.isNetworkConnected');	// synchronous call

Form Caching

The Form component auto-draft is still WIP.

In the meanwhile, you can start using it for form based components.

Going back online

In general, you should move to using the SkeletonView when loading remote data instead of the spinning loader. It gives a better preceived performance and smoothes the data transition.

SkeletonView example (use the template the best matches your content):

renderItem = ({item}) => {
  if (_.isEmpty(this.state.data)) {
    return (
      <SkeletonView template={SkeletonView.templates.LIST_ITEM} contentType={SkeletonView.contentTypes.THUMBNAIL}/>
    );
	} else {
    return (
      <List.Item
        title={item.name}
        subtitle={item.description}
        thumbnail={{source: {uri: item.thumbnail}}}
      />
    );
  }
}

Once the internet connection is back, fresh content should be loaded. Use onRegainConnectivity from WixScreen or WixComponent to respond to that event and re-fetch your data.

Reloading data when going back online:

// register connectivity method
constructor() {
  props.registerLifecycleMethods({
    onRegainConnectivity: this.reloadData
  });
}

reloadData = () => {
  // fetch your remote data
}

Check the WixScreen wiki page for guidelines on registering lifecycle methods.

DataSyncer should be used for handling data load updates (check out the demo screen for an example).

FAQ

Should I use NetInfo to listen to the network status?

No. WixScreen and WixComponent provide an isConnected prop which you can use for online/offline mode indication.

How do I display a special error message when the user is offline?

You don't need to do anything special as both ErrorScreen and GlobalToast will automatically display the offline indication with your error message, so users can understand the error stems from the app being offline.

For how long should I display the error toast?

The guidelines are same for both online and offline. The duration is calculate by the text word count: [# of words / 2] seconds

Example: 10 words / 2 = 5 secs to disappear

Minimum display time: 3 secs Maximum display time: 7 secs