How to Send Web Push Notifications for Free with AWS and without Firebase
AWS services such as AppSync support managed ways of pushing data to clients over WebSockets and this method works great when the user has your web app open. It’s serverless, fast, reliable, and very easy to setup.
But what if you need to send notifications to users that don’t have your app tab open anymore? This is where Web Push Notifications become handy.
In this guide, I will show how you can trigger web push notifications from AWS back-end with an SNS message. The end result will look like this:
How Web Push notifications work
It is actually pretty simple: when a user chooses to allow browser notifications from your website — Microsoft/Mozilla/Google create a REST endpoint somewhere in their clouds. You just need to issue a signed POST request to that endpoint with a certain payload to have notifications pushed to the user’s browser. You can send as many requests as you like and it’s completely free.
Many developers get confused about this due to the enormous amount of misleading articles out there still suggesting that you need to create a Firebase project and use Google FCM service as an adapter to support different browsers. In fact, since Web Push protocol has been standardized back in 2016 it’s directly supported by all major browsers and there is absolutely no need for Firebase. Not that I have anything against Firebase, it’s just that 100% of our stack at eatella is AWS and I am showing our real production implementation.
Step 1. Preparation
In order to encrypt your notifications you will need a pair of “VAPID” keys. You can generate those with web-push JavaScript package or just use an online service. Note the keys somewhere safe, especially the private one. You’ll need them both for the JavaScript part and for the back-end.
Step 2. Subscribe to Web Push in your client-side JavaScript
To make your app listen to web push notifications you need to register a service worker. Create new sw.js file somewhere in your project where it can be referenced by a URL. Add these couple of lines to it:
This snippet takes care of handling background push events and displaying a minimal basic notification with title and text. Click here to see a full list of notification options.
Next, add this piece somewhere in the code of the app itself.
When you run this code in your browser it should ask you to allow web push notifications and if allowed - it will create the subscription:
Step 3. Provision your AWS back-end
To send web push notifications from your back-end you need to save subscription data of each user somewhere server-side.
In my opinion the easiest way to achieve this task is AppSync + DynamoDB.
The client-side JavaScript will need to post a GraphQL mutation (we’ll add that code in the next step).
You can create all of the necessary resources in your AWS account by clicking the button below:
You‘ll need to enter your VAPID data as Cloudformation stack parameters:
The stack also includes SNS topic and Lambda function that does the actual Web Push Notification sending:
The lambda function is a few lines of JavaScript in NodeJS. It loads subscribers list from DynamoDB and sends the notification to each of them using the web-push npm package that we mentioned earlier:
Step 4. Send subscription data from client-side to AppSync
Finally we need to extend our app’s JavaScript code to post subscription data to server-side as GraphQL mutation. This is the final result:
You can find your AppSync Url and Api Key in AWS console:
Testing
Congratulations! If you made it this far you can test everything and actually see the web push notification in your own browser.
Go to SNS console, find our topic and publish a test message:
That’s it. Less than a second later you should see the notification!
Is it really free?
Yes, sending web push notifications is free. The AWS services that we used for back-end are all part of generous free tier. However, if you plan on triggerring millions of messages, you will most probably exceed it. Make sure to check pricing of Lambda, DynamoDB, AppSync and SNS.
Goog luck building AWSome stuff and notifying clients about it, for free.
