SDK

Platform configuration

Before you can start sending notifications to your website, you will have to follow the instructions in this page in order to support Chrome, Opera, Firefox and Safari (desktop). This is all done via the Firebase Developer Console and Apple's Developer Console. Keep reading this document to know how to configure your push providers.

Configuring Web Push

In 2016, Firebase Cloud Messaging replaced the GCM (Google's Cloud Messaging) and became Android's official push provider. To be able to send notifications for Chrome and Opera browsers, you currently need to create a project in Firebase.

Start by signing in Firebase. In their developer page you will find a button like this one:

Fmc new project button 5f265d1027

This will open a window like this one:

Fcm create project window b71b3f5a10

In this window you will have to provide the name of your project:

Fcm project name bce54b4ee9

Firebase will generate an ID for you project, you can also customize this:

Fcm project id 45bf72c7e0

You will also need to select a country:

Fcm project country 06dac283ef

And finally click in the Create Project button:

Fcm create project button b2ab8a54ad

After this, you will automatically be sent to the project area where you can find a button like this one:

Fcm project settings 5883fefa21

In the project settings page you will find a tab for Cloud Messaging:

Fcm project cm tab 4f73d48ea0

This is where you'll find the necessary keys for both Notificare and your website. For Notificare you will need the Server Key and for your website you'll need the Sender ID:

Fcm cloud messaging keys f416a6597c

Save these keys as we will need them later.

Configuring Website Push for Safari

In order to support Safari (desktop) website push you will need a developer account with Apple and generate a Website Push ID and a Website Push ID certificate.

Creating an Website Push ID

In this document we will assume you did not create an Website Push ID yet and we will guide through this process.

Start by signing in Apple's Developer Portal. Once you've sign in, you should click in the Certificates, IDs & Profiles menu item:

Developer portal menu 26d9f13017

This will take you to a new page where you should locate the Website Push IDs menu item under the Identifiers section:

Developer portal website push ids menu 6b5cf3d242

In this new page, click in the plus button found in the top right corner:

Developer portal create app id 69beff6298

You are now about to register a new Website Push ID, start by providing a name for your app:

Developer portal register website push id description c3e2f18f10

Then provide the identifier for your app, this should take the form of a reverse DNS name (eg.: com.mydomain.myapp):

Developer portal webpush id identifier c1a5886a66

This will become your website's identifier and should be prefixed with the string web. It also must be unique and once created cannot be changed.

To proceed with the creation, click in Continue:

Developer portal app id continue button 9b6ff846f9

You will then see a confirmation screen like this one:

Developer portal website push id confirm 1023af7c83

If everything is OK go ahead and finish creating your Website Push ID by clicking in Register:

Developer portal app id register 2ff636aaf2

After that, your app will be in the list of Website Push IDs as shown below:

Developer portal website push id created 4420c27704

Generate a Website Push ID Certificate

Once you've created an Website Push ID or at least have one, you are now ready to create a Website Push ID certificate. This certificate will allow us to send messages to your website.

In Apple's Developer Portal, navigate to the Certificates, IDs & Profiles area and click in All*+ under the **Certificates section:

Developer portal certificates menu a94bf8207a

In this new page, click in the plus button found in the top right corner:

Developer portal create app id 69beff6298

In that page, locate the following option:

Developer portal select website push id certificate 04d31df0e7

Go ahead and click in Continue:

Developer portal app id continue button 9b6ff846f9

In this new page, in the Website Push ID dropdown, locate and select the Website Push ID you want to use:

Developer portal website push id select entry 0fdf16557a

To proceed, click in Continue:

Developer portal app id continue button 9b6ff846f9

In this new tab, you will need to provide an existing Certificate Signing Request:

Developer portal certificate signing request c43a29c960

We will explain how to generate one but if you already have one previously created, just go ahead and click in Continue:

Developer portal app id continue button 9b6ff846f9

If you do not have one, you will have to generate it. For that you will need to open the Keychain Access app from your applications, in your MacOS powered computer and request a signing certificate from an certificate authority by selecting the following:

Developer portal keychain access request 82a1aa814b

You will be prompt with the following window:

Developer portal create signing certificate b0da07559d

Simply provide an email and check the Saved to Disk option and then click in Continue, it will prompt you to save a file in your computer:

Developer portal save signing certificate 1f42b11799

You have now generated a CSR file and you we are ready to resume our the APNS certificate creation in Apple's Developer Portal. In the screen you left off:

Developer portal certificate signing request c43a29c960

Click in the Continue button:

Developer portal app id continue button 9b6ff846f9

In this new screen, click in Choose File and locate the .certSigningRequest file we've just generated:

Developer portal upload csr 6920adc158

Then click in Continue to proceed:

Developer portal app id continue button 9b6ff846f9

We've now generated a Website Push ID certificate, hit the Download button to download the file to your computer. Click in that file to install it in your Keychain Access app:

Developer portal website push id certificate created 5c3a108473

Then locate it in the Keychain Access app:

Developer portal keychain access website push id entry d3c7d72909

Then we will need to export this file in a .p12 format. To do that, right-click the file and select the Export option:

Keychain access export website push id 25c6797428

This will allow you to name your export file and select the location in your computer where you going to export it. Then click in Save:

Developer portal export p12 save 1e7507b4ea

Because these files are extremely important and will give any push provider access to send notifications to your app, you will want to protect it with a password. Once you've provided a password twice, click in the OK button. This will save the file in your computer.

Developer portal export p12 password 2b0215fe64

Keep this file in your computer and memorize its password as you will need to upload it to Notificare later.

Configuring Notificare

If you've created a FCM project and generated a Website Push ID in Apple's Developer Portal, you are now ready to configure it all in Notificare.

Open our dashboard. Navigate to the app you've previously created and expand the Settings menu and click in Services:

Services menu

Then you should click the Configure button in the Website Push box:

Notificare website push service box ec62563f5a

In this page you will be configuring your service, start by providing an icon for your website:

Notificare website push icon fcd702a5bb

Make sure you upload a square .png image with at least 256px and without any alpha channels (no transparency).

For Web Push to work correctly in your web app, you'll need to provide at least one domain where your website runs, if your website runs in several domains you should also provide all those domains. Type the domain name and click in the + button:

Add allowed domain

As you add domains they will be shown in the list below, you can remove or edit them as you might see fit:

Allowed domains list

You'll also will need to provide us the URL Format String which will be the landing page for your notifications. This will be the page that will be open when users click the native notification in their browsers. It must provide a placeholder with the format %@ where we will place the notification ID:

Url format string

To be able to send notifications to older versions of Chrome & Opera browsers, you'll need to upload the FCM's Server Key you've previously created:

Gcm fcm server key

To be able to send notifications to all WebKit based browsers (Chrome & Opera), Edge and Firefox users, you'll need to upload an existing VAPID or generate one. If you already have a public and private VAPID keys, paste them in the following fields:

Vapid fields

If this the first time you are setting VAPID keys, you can simply hit the Or Generate a VAPID button.

Once you have successfully uploaded the VAPID keys or generated a new one, we will display something like this:

Vapid active key

Finally to be able to send notifications to Safari desktop browsers, you'll need to upload the Website Push ID certificate you've generated:

Upload safari push certificate

Also provide the password so we can open and extract the information in the file:

Safari website certificate password

Once uploaded, a valid Website Push ID certificate will look like this:

Valid safari push certificate

Finally you should click in the Update button to make sure you store these changes:

Update button

At this point your service will also show as Active in the Services list:

Website push service box active

You are now ready to start implementing our library. Keep reading our Implementation guides located here.