Building push notifications

I spent a few days while traveling to Seattle for ElixirConf working on push notifications. I was unfamiliar with the technologies required to send OS notifications from a browser-based application, so there was a bit of a learning curve.

Getting push notifications to work was pretty gnarly, to say the least. Here’s what Google’s guide on the Web Push Protocol has to say about it:

One of the pain points when working with web push is that triggering a push message is extremely “fiddly” […] The main issue with triggering push is that if you hit a problem, it’s difficult to diagnose the issue. This is improving with time and wider browser support, but it’s far from easy.

I plan to do a full write-up on how to accomplish this (using Elixir), but here’s the gist of how it works for those aren’t familiar:

  1. Check to see if the browser supports notifications via JavaScript.
  2. If yes, then register a service worker JavaScript file with the browser (more on that in a moment).
  3. When the time is right, make a call to ask the user for permission to send notifications.
  4. If permission is granted, then create a subscription and pass that info to the server.
  5. When it’s time to send a notification, make a POST request with an encrypted payload to the endpoint supplied in the subscription info.
  6. In the service worker file, write an event listener to bind to push events and make a call to show an OS-level notification upon receipt.

The encryption piece is particularly finicky. Thankfully, an Elixir library already exists to do the heavy lifting here. Notifications are pretty well supported in Chrome and Firefox. It appears that Safari is off on their own…safari.

This area feels a bit like browser technologies did in the height of jQuery’s dominance when web standards were sparsely adopted, and vendors were implementing their own solutions. But, things seem to be moving in the right direction toward standardization.

These are some resources I used to learn about this:

Here’s a look at my “minimum viable” implementation for Level:


Now read this

How to display server-rendered HTML in Elm 0.19

I’m building a team communication product called Level, and one of the core features is rendering posts as Markdown. Elm has a library to handle this on the client-side. It’s a wrapper around the marked.js library that uses Kernel code... Continue →