Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify Push Notifications + PWAs #8897

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@ aliases:
- /howto/mobile/local-notif-schedule-cancel/
---

These step-by-step guides teach you how to build local notifications for native mobile applications. Local notifications will only allow you to schedule and send notifications confined to one mobile device. These notifications do not use an internet connection. One use of a local notification might be an alarm app which sends a notification after an amount of time has elapsed.
These step-by-step guides teach you how to build local notifications for native mobile applications. Local notifications will only allow you to schedule and send notifications confined to one mobile device.

These notifications do not use an internet connection, therefore local notifications only work with the following types of apps:
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tech check please, @allard-mx.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Local notifications are currently supported for native mobile only, not for PWA. The Notifications widget and the Display notification JS action are both part of the Native Mobile Resources module, there is currently no web alternative available.


* Native app (offline profile)
* PWA (offline profile)

One use of a local notification might be an alarm app which sends a notification after an amount of time has elapsed.

These guides teach you how to do the following:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ aliases:

## Introduction

This guide teaches you how to configure the runtime for using push notifications in native apps.
This guide teaches you how to configure the runtime for using push notifications in native apps and progressive web apps (PWAs).

### Configuring Your Notifications

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ aliases:

## Introduction

You can use Google's Firebase Cloud Messaging (FCM) service to send push notifications to both Android and iOS devices. To send push notifications using FCM from the Push Notifications Connector module, you must set up a Firebase account with FCM enabled. This section teaches you how to register for FCM and configure the service in your app.
This guide teaches you how to register native or progressive web apps (PWAs) for FCM and configure the service in your app.

You can use Google's Firebase Cloud Messaging (FCM) service to send push notifications to both Android and iOS devices. To send push notifications using FCM from the Push Notifications Connector module, you must set up a Firebase account with FCM enabled.

## Prerequisites

Before starting this section, make sure you have completed the following prerequisites:
Before starting this guide, make sure you have completed the following prerequisites:

* Have a Firebase account (https://firebase.google.com)

Expand Down Expand Up @@ -59,7 +61,7 @@ To create a project, do the following:

## Adding an App {#native-apps}

Before you add a native app to FCM, you must retrieve your app's bundle ID. Its location depends on your type of your mobile app. This is not needed for a progressive web app.
Before you add a native app to FCM, you must retrieve your app's bundle ID. Its location depends on your type of your mobile app. For PWAs, this is not needed.

For a native mobile app, your bundle ID will be what you specify for the **App identifier** in the NBUI. You can find this ID later in your generated GitHub repo:

Expand Down Expand Up @@ -113,7 +115,7 @@ The file you just created gives API access to all available Firebase services fo

## Downloading the Google Services Config Files {#downloading-the-google-services-config-files}

In addition to the back-end configuration set up in the previous steps, you will need additional files that will be bundled as part of your native mobile application. For progressive web apps, you can skip this step. To obtain these, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **General** tab:
In addition to the back-end configuration set up in the previous steps, you will need additional files that will be bundled as part of your native mobile application. For PWAs, you can skip this step. To obtain these, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **General** tab:

{{< figure src="/attachments/howto/mobile/native-mobile/implementation/notifications/setting-up-google-firebase-cloud-messaging-server/push_notifications_platforms.png" width="350" class="no-border" >}}

Expand All @@ -125,15 +127,15 @@ Only create an iOS application in your Firebase project when you plan on using F

## Copy the PWA Configuration {#copy-pwa-config}

For progressive web apps, a configuration object is required to set up notifications in the web client. You can skip this step for native mobile apps. To obtain the configuration, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **General** tab and click on **Config**:
For PWAs, a configuration object is required to set up notifications in the web client. You can skip this step for native mobile apps. To obtain the configuration, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **General** tab and click on **Config**:

{{< figure src="/attachments/howto/mobile/native-mobile/implementation/notifications/setting-up-google-firebase-cloud-messaging-server/push_notifications_web_config.png" width="350" class="no-border" >}}

Copy the text that is highlighted in the screenshot above and store it somewhere safe. You will need this text in a later step.

## Set up Web Push Certificate {#set-web-push}

For progressive web apps, an additional certificate is needed. You can skip this step for native mobile apps. To generate the certificate and obtain its public key, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **Cloud Messaging** tab and click on **Generate Key Pair**:
For PWAs, an additional certificate is needed. You can skip this step for native mobile apps. To generate the certificate and obtain its public key, again click the cogwheel on the upper-left side of the screen and select **Project settings**. Then navigate to the **Cloud Messaging** tab and click on **Generate Key Pair**:

{{< figure src="/attachments/howto/mobile/native-mobile/implementation/notifications/setting-up-google-firebase-cloud-messaging-server/push_notifications_web_certificate.png" width="350" class="no-border" >}}

Expand Down