Features

Using the plain JavaScript approach, there are two ways to work with features.

• Check feature availability with App.featuresAvailable()
• Dispatch a feature request action for a specific feature

Import the createApp function from @shopify/app-bridge and the Features from @shopify/app-bridge/actions. Then use the createApp function to create an app.

Calling app.featuresAvailable() returns a promise that evaluates to the entire set of available features for the app. An object containing groups, the actions within each group, and the permissions for each action (Dispatch and Subscribe), represents the feature set.

It will look like this:

If Dispatch is equal to true, then you will be able to send that type of action within your app. Likewise if Subscribe is equal to true, then you will be able to subscribe to dispatches of that type of action.

If a group is not present in the state then it can be assumed that all actions contained in that group are also not available.

If you want to limit your resulting state to a subset of groups, then pass in a group parameter.

Multiple group filters are also supported by using ...rest parameters.

If you experience feature availability errors while trying to access Cart actions on Point of Sale, try wrapping that code in a subscription to Features.Action.UPDATE.

If an action is not available when you call app.featuresAvailable(), then you can use the APP::FEATURES::REQUEST action to request either a group of actions or a single action inside a group to be enabled. This is particularly useful when the app is running on a mobile device and requesting a hardware feature, such as the scanner, that needs authorization from the user.

The workflow for enabling a feature includes two parts: subscribing to APP::FEATURES::REQUEST::UPDATE and dispatching APP::FEATURES::REQUEST. APP::FEATURES::REQUEST is the input and APP::FEATURES::REQUEST::UPDATE is the output.

Requesting Camera Scanner actions:

Shopify App Bridge applications can be opened in different places. We refer to each of these places as a context. Each context makes a set of features available to the application. Different contexts can provide different feature sets.

For instance, the Modal context has a different set of features available than the Main context.

To check which context an application is in, you can use app.getState(). Read more about app.getState.

With App Bridge React, you have two hooks that simplify using the feature action set.

• useFeaturesAvailable
• useFeatureRequest

The useFeaturesAvailable hook accepts a feature name (or a list of feature names) and returns an object with information about its avaiable actions. If the hook receives no arguments, it returns an object with information about all of the features in App Bridge.

The useFeatureRequest hook enables you to request a group of actions, or a single action inside of a group, to be enabled. This is particularly useful when the app is running on a mobile device and requests a hardware feature, such as the scanner, that needs authorization from the user.

• The useFeaturesAvailable hook accepts a single feature or a list of features.
• The useFeatureRequest accepts a single feature.