micro-mdx-parser

Push notifications are a powerful and free browser feature that is often overlooked by products due to the complexity of service workers and the backend infra required to send notifications. In this post we will discuss how to implement you own push notification service that will scale as you grow. We will use service workers and AWS lambda functions to send notifications to a site saved as a PWA on the users phone ## Demo Here is a demo of what we are building: ## Implementation For this service we are using AWS lambda and deploying via the serverless framework. You can deploy this type of application in any kind of backend but I prefer the pay per execution model of the AWS serverless offerings. ### Frontend setup Our frontend will be a debugger to test our push notification service.  <pre class="language-html" style="background-color:#fff;--shiki-dark-bg:transparent;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Web Push Demo</title> <meta name="description" content="Web Push Demo"> <link rel="manifest" href="/manifest.json"> <link rel="stylesheet" href="./assets/paper.min.css"> <link rel="stylesheet" href="./assets/style.css"> </head> <body> <div class="background"></div> <div class="paper content"> <h2 class="heading"> <span> Web Push Debugger </span> <div class="status"> <p> Push supported: <u><strong id="push-notification-supported">true</strong></u> </p> <p> User consent: <u><strong id="push-notification-consent">granted</strong></u> </p> </div> </h2> <div class='debugger'> <div class='trigger'> <div> <h4>step 1: Ask user consent to show notifications</h4> <button id="ask-user-permission-button">Ask user permission</button> </div> <div> <h4>step 2: Subscribe to push notification</h4> <p>this will create an endpoint that has to be sent to the push server</p> <button id="create-notification-subscription-button">Create notification subscription</button> </div> <div> <h4>step 3: Send notification</h4> <p>Fire push notification from server</p> <form id="send-push-form"> <div> <input name="title" value="Message Title" placeholder="Message Title" type="text" required=""> </div> <div> <input name="body" value="Message Body" placeholder="Message Body" type="text" required=""> </div> <div> <input name="data" value='{ "foo": "bar" }' placeholder="Custom Data" type="text"> </div>  <textarea name="subs" id="user-susbription"></textarea> <input id="send-push-notification-button" type="submit" value="Send a push notification 🚀"> </form> </div> </div> <div class='response'> <h3>Web Push Custom Data:</h3> <textarea placeholder="Push notification response data... This is shown when notification is clicked" id="web-notification" class="web-notification" disabled ></textarea> </div> </div> </div> <script src="./assets/app.js" type="module"></script> </body> </html></code></pre>  Backend setup  <pre class="language-js" style="background-color:#fff;--shiki-dark-bg:transparent;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-js">const fs = require('fs') const querystring = require('querystring') const webPush = require('web-push'); if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) { console.log("You must set the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY " + "environment variables. You can use the following ones:"); console.log(webPush.generateVAPIDKeys()); } webPush.setVapidDetails( process.env.VAPID_DOMAIN || process.env.VAPID_CONTACT, process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY ); function response(statusCode, body, file) { let payload = { statusCode, // api gateway cors headers headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': true, }, body: typeof (body) === 'string' ? body : JSON.stringify(body, null, 2) }; console.log('RESPOND', payload); return payload; } module.exports.vapidPublicKey = async () => { return response(200, process.env.VAPID_PUBLIC_KEY); }; // module.exports.register = async (event, context) => { // // Save the registered users subscriptions (event.body) // await addSubscription(JSON.parse(event.body)); // return response(201, event); // }; // async function getSubscriptions() { // const s = await s3.getObject({ Bucket: process.env.STATE_BUCKET, Key: 'subscriptions'}).promise(); // return JSON.parse(s.Body.toString("utf-8")); // } // async function addSubscription(subscription) { // let subscriptions = await getSubscriptions(); // console.log(subscriptions); // let uniq = {}; // for (let i=0; i < subscriptions.length; i++){ // uniq[subscriptions[i].endpoint] = subscriptions[i]; // } // uniq[subscription.endpoint] = subscription; // use latest for endpoint // await s3.putObject({ // Bucket: process.env.STATE_BUCKET, // Key: 'subscriptions', // Body: JSON.stringify(Object.values(uniq)), // ContentType: 'application/json' // }).promise(); // } // TODO remove stale subscriptions function send(<span style="color:#E36209;--shiki-dark:#FFB86C;f