Guides

Website Push

In this area you can setu your app up to receive Web Push notifications. This service is capable of sending remote push notifications to the majority of the modern internet browsers. In this area you will be able to upload a GCM/FCM server key necessary for Chrome and Opera notifications, a VAPID for Firefox notifications and a Website Push ID for Safari desktop notifications.

To access these pages, expand the Settings menu and click in Services like shown below:

Menu 95980acef3

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

Service box 3b56b28819

To start configuring the Website Push service, please upload an icon for your app. This will be the icon shown in the native browser notifications, make sure it's a .png file (256x256px for best results) without alpha channels (no transparency):

Push icon b97ce83fd5

For this service 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. Please note that only the domain used in the URL Format String will be used. Type the domain name and click in the Add button:

Allowed domains add 3b4a5ca912

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 1e0933bef9

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 opened when users click the native notification in their browsers. It must provide a placeholder with the format %@ (e.g: https://mydomain.com/?n=%@):

Url format string 18ba2fffb2

Finally you will need to provide platform wise configurations, depending on how many browsers you would like to support, without these settings web push notification in these platforms will not work. Initially you will see a section that looks like this:

Platforms tabs 3a7152493b

To be able to send notifications to legacy Chrome and Opera versions, you'll need to provide us a GCM/FCM server key. To learn how to get this key please visit our guide here. Once you have a server key, paste it in the following field:

Server key fffaf19d07

You can at anytime delete or update your GCM/FCM server key but bear in mind that if you have any subscribers generated with a certain server key, changing that key will render them obsolete.

To be able to send notifications to more recent versions of Chrome, Opera, Firefox and Edge (mobile Android & desktop) 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 8dbe55b03e

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

Generate vapid button 68ba101fa9

This will open a confirmation window like the one below, clicking in Generate will proceed to create your VAPID credentials:

Generate vapid a663d1e550

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

Vapid credentials 8c668b97b7

You can at anytime delete, update or generate new VAPID credentials but bear in mind that if you have any subscribers generated with a certain VAPID, changing these credentials will render them obsolete.

You can also export your current VAPID credentials at any time. Clicking in the Show VAPID Credentials button will open a new window like the one below:

Vapid credentials modal c793fc1b8d

This will be useful if you want to move to a new Notificare app or simply use another WebPush provider.

Finally to be able to send notifications to Safari (desktop only), you'll need to upload a Safari Website Push ID certificate, to learn how to generate this certificate please visit our guide here. Once you have a certificate upload it in the following field:

Upload certificate fefd2b19b9

Because these files give access to any Web Push provider to send notifications to your website, it's a good practice to protect these files with a password. In the following field you should provide the password so we can open and extract the information in the file:

Certificate password 46a3854272

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

Certificate p12 e7415d27c5

You can at anytime delete or update your Safari Website Push ID but bear in mind that if you have any subscribers generated with a certain certificate, changing that certificate will render them obsolete.

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

Save button e51b73b334

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

At any point in time you can change any of the details in this page. Please note that any erroneous change in these settings in a production web app, might cause the disruption for your subscribers.