Developers: Add web push notifications to a website in 15 minutes

Developers working on a website

Benefits of web push notifications for a website

Push notifications can allow you to increase user engagement on a website. Users can quickly (and easily) subscribe to receive notifications from you. You can then send messages to encourage users to return to your site in the form of special offers, upcoming events, Covid protocol changes, company news, etc. Subscribers receive messages on their lock screen (if notifications are set up that way), or in their web browser on desktop computers.

Anatomy of a web push subscription

Web push notifications make use of two different APIs: the Push API and the Notification API. These work in conjunction with a service worker. Your page registers this service worker when it first loads.

You then present the user with a UI component to subscribe to receive push notifications. When the user clicks the component, a unique subscription object is obtained which then needs to be sent to your back-end server. The subscription object contains a unique https endpoint, a public key, and an authorization token. This is the information that will be used to receive and verify any incoming messages.

When you wish to send a message to a user, the Push API is utilized. The message is dispatched to the endpoint as previously retrieved from the subscription object. The service worker receives the message and uses the Notification API to display the message to the user.

Here’s a tutorial from Google with code examples.

Easily integrate web push notifications using Go Push

If you’d rather just add a couple of pieces of code to your, or your client’s, website and not re-invent the wheel, then Go Push can handle this for you.

Here’s how it works. You should be set up in 15 minutes give or take.

  1. Register for an account.
  2. Log in to your account, click the Profile menu (under your username in the top-right hand corner) and select Embed Scripts.
  3. You will see a page which has a few small snippets of code. You will need to copy and paste the snippets into your page where instructed.
  4. You’ll add the first to the section of your page – this registers the service worker and loads the JavaScript for registering and subscribing your users.
  5. You place a snippet where you want your subscribe button to appear on the page. Likewise, for the unsubscribe link. Only one or the other will be shown at a time.
  6. You create a file in the root of your site called sw.js – you copy the snippet of code and paste it into that file.

Now you can select Edit Button from the Profile menu. This allows you to modify the text around the button, and various messages displayed to the users. You can also add class attributes for the button container. Finally, there is a Test Mode – this will display your subscription button on every page view. This might be useful if you want to tweak the CSS, for example. Be sure to disable Test Mode before you make the button live on your site.

Will iOS work with web push notifications?

At the moment, web push notifications are at the experimental stage with Apple (as of iOS 15.4 – see this 9to5mac.com article). Apple have been slow to adopt this technology, but it seems as though they may finally support this in the near future.

Conclusion

Go Push provides an easy way to add web push notifications to a website. You should be set up in around 15 minutes! Start increasing user engagement now!

Published: April 22, 2022