We’re going to look at using three Push messaging components that are included in a generated project:
- InlineAsk (see React documentation)
- DefaultAsk (see React documentation)
- PushMessagingController (see React documentation)
IMPORTANT: To learn more about one of the SDK components mentioned here, click its name to view the complete documentation associated with it in our Web Components section.
Before you begin #
- Follow the steps in the Configuring Push Messaging guide to set up your project for push messaging
- You must be using version v0.22.0 or greater of the Progressive Web SDK to use these push messaging components
- Push messaging is only compatible with Chrome and Firefox for Android and desktop
- The customer site must be HTTPS-everywhere
“Ask” components #
Ask components provide a description of the value proposition for subscribing to push notifications and a button to continue with the subscription flow.
Choosing to continue the subscription flow causes the browser to display a modal dialog box that asks the user to give the browser permission to send push messages (or notifications as Google Chrome calls them):
(Google Chrome’s modal dialog box that asks for permission to send push messages that appears when the user continues the subscription flow)
If the user blocks push messaging, you will not have another opportunity to ask the user to subscribe unless they specifically unblock your site.
The InlineAsk component #
The InlineAsk component is typically included “inline” in the app as a compelling way to engage with visitors. For example, it might be presented to visitors in a newsletter email section as a way to hear about deals and news or on an order confirmation page as a way to be notified of shipping status.
The DefaultAsk component #
The DefaultAsk components appears as a
sheet at the bottom of the page. Uniquely, it provides a button to dismiss the
subscription flow and is typically displayed after the user views a predefined
number of pages. The component’s
showOnPageCount prop determines how many pages
the visitor needs to view before it is shown.
Choosing to dismiss the subscription flow will trigger a visit countdown until
the DefaultAsk component is shown again.
The number of visits is configured via the component’s
The PushMessagingController component #
component initializes the push messaging client. The push messaging client is
the software that handles subscriptions, receives push notifications, and
triggers events when notifications are clicked. It also provides a way to
configure the app-wide setting for screen dimming when displaying the
DefaultAsk component. You can turn the
dimming behavior on or off with the
dimScreenOnSystemAsk prop in the