Web Push Notification

Web Push Notifications

The Web Push Notifications feature enables you to send notification messages to the subscribed users of your web application. Push and notification use different, but complementary, APIs:

push is invoked when a server supplies information to a service worker
notification is the action of a service worker or web page script showing information to a user

Important Notes

Not all browsers support Push API, some browsers (e.g. Safari) do not, see Browser compatibility.
Only sites with SSL (i.e. https) will support Web Push Notifications.
The PHP openssl and gmp extensions are required for Web Push Notifications.
Push is based on service workers operating in the background. This means the only time code is run for a push notification is when the user interacts with a notification by clicking it or closing it. If you're not familiar with them, check out the service worker introduction.
By default only administrators can send notifications.

How to Use

To enable the feature, you need to:

In PHP Settings, under the General Options tab, select the Web Push tab, then enable the Use Web Push Notifications checkbox.

Set up the Subscriptions table by clicking the Create Table button.

If you already have a subcription table, select the subscription table in the dropdown and click the [...] button to set up the Subscriptions table fields.

Click the Generate button to generate the VAPID public/private key pair. If you already have valid VAPID public/private keys, just enter the values in the Server public key and Server private key text boxes.

If you want anonymous users to subscribe, you can also enable the Allow anonymous users checkbox.

Receive Notifications

After generation, an Enable notifications button will be displayed at top right corner of the web site after the user logins in.

The user can then click the button to enable notifications from the web site. A dialog box will be displayed to prompt the user to Allow or Block the notifications. If the Allow button is clicked, the user will be subscribed to future notifications from the web site.

Firefox

Then a subscription record will be added to the subscription table and administrators can send notification to the user (see below).

Users can disallow notifications in their browser if they change your mind later, e.g. Note This is a browser setting, not a setting in the web site.

Firefox

To unsubscribe notifications in the web site, the user can click the Disable notifications button at the top right corner.

Send Notifications

To send web push notifications to subscribers, Administrators need to go to the Subscriptions table (or views with required fields from the Subscriptions table), select the users he want to send notifications to, and click the Send push notifications button. If he wants to send an notification message to all users, just click the button without selecting any users.

A Send Push Notifications dialog box will be displayed. The Administrator can then enter the subject and message to send the push notification message to the users.

The message will be sent and displayed on user's machine as a push notification.

Firefox

Note If you want to customize the Send Push Notifications dialog box and/or use your own service worker to handle the message by your own Push event, you can use Page_Foot server event to replace the dialog and service worker, see Server Events and Client Scripts. See ServiceWorkerRegistration.showNotification() about options of a notification.

Test HTTPS on localhost with Chrome

Web push notifications requires HTTPS. If you test your site on your PC, you'll need to create and install a certificate for your web server and use https instead of http. For example, if you use XAMPP to test locally, you can use the makecert.bat to create a certificate for testing on localhost. You can google "xampp makecert" for more information.

If you test your local site with Chrome, Chrome will warn "Your connection is not private":

Chrome

You can click "Advanced" and then click "Proceed to localhost (unsafe)" to continue testing:

Chrome

You may also need to start Chrome with, e.g. (Assume your local site with SSL is https://localhost:443)

--ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:443

If you click the "Not secure" warning in Chrome, you'll see information like this:

Chrome

This is only a warning and does NOT affecting testing HTTPS on your site locally. Web push notifications work fine with self signed certificates.

Alternatively, you can test with other browsers, e.g. Firefox.