Menu Sheet Overlay

Redux Actions and Selectors Reference

Important: We've removed this article from the site navigation because Mobify projects that were generated after January 2019 do _not_ include the push messaging technology described below. If you are maintaining a project that was generated before January 2019 that _does_ include push messaging, we have left this documentation in place for you.

Included here is a list of available Redux actions and selectors for Push Messaging. You may find these useful when integrating Push Messaging into your existing project or when creating your own Push Messaging component.

Before you begin

Redux actions

The following actions are located in progressive-web-sdk/dist/store/push-messaging/actions


import {subscribeOnClick} from 'progressive-web-sdk/dist/store/push-messaging/actions'

Call this to subscribe the user to push notifications, by opening the system-ask dialog to ask for permissions. If the user has already granted or blocked permissions for this site, nothing will happen.

Typically, this is added as the React onClick event handler for an interactive element like an opt-in button.


import {channelOfferShown} from 'progressive-web-sdk/dist/store/push-messaging/actions'

Call this when the user has seen a Push messaging component asking them to subscribe. Typically, this can be called inside the React componentDidMount lifecycle method.

Reselect selectors

The following selectors are located in progressive-web-sdk/dist/store/push-messaging/selectors


import {isSupported} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

type: boolean

Returns true if:

  • the Push messaging feature has been enabled for the project
  • the user's browser supports the Push messaging feature

You can use this to determine whether to show a Push messaging component or not.


import {isSubscribed} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

type: boolean

Whether the user is already subscribed to Push messaging. You can use this to determine whether a "success" message is shown to the user instead of a button asking them to subscribe.


import {canSubscribe} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

type: boolean

Whether the user can be subscribed to Push messaging. If this is false, it may mean the user has blocked permissions for push notifications on this site.


import {getPageCount} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

type: number

The number of pages the user has seen, persisted over multiple visits to the site. You can use this to only show a Push messaging component after a certain number of pages have been seen, which could prove a higher level of engagement with the site.


import {getStatus} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

import {MESSAGING_STATUS} from 'progressive-web-sdk/dist/store/push-messaging/constants'

type: number

The loading status of the Messaging feature. getStatus should always be compared to values from the MESSAGING_STATUS constants object (import instruction shown above). The MESSAGING_STATUS object has 3 values to compare against:

MESSAGING_STATUS.LOADING // Messaging is loading
MESSAGING_STATUS.READY // Messaging is ready to subscribe visitors
MESSAGING_STATUS.FAILED // Messaging has failed to load

Use this selector to determine whether to show a Push messaging component or not. For example, you could display a loading spinner if this selector is equal to MESSAGING_STATUS.LOADING or hide a Messaging component if this selector is equal to MESSAGING_STATUS.FAILED. See Building Your Own Opt-In Component for a detailed example which includes the use of the getStatus selector and the MESSAGING_STATUS constants object.



Was this page helpful?