Progressive Web Apps and Web Push API - Pushing Messages

PWA and Web Push API Blog Series

Progressive Web Apps and Web Push API - Pushing Messages

Having all the foundation needed ready to go our last step is to update the subscriber with it all, and then we can push messages. We need to share the VAPID public key with the client and allow it to send the subscription to the application server. The following steps through connecting those dots and testing out the finished solution.

Update the Subscriber Client

In the Google Push Notification Lab project (pwa-training-labs) open up the file /push-notification-lab/04-3-vapid/js/main.js and replace the updateSubscriptionOnServer function (it should be found on line 143) with the following code.

functionupdateSubscriptionOnServer(subscription){// Here's where you would send the subscription to the application servervarsubscriptionJson=document.querySelector('.js-subscription-json');varendpointURL=document.querySelector('.js-endpoint-url');varsubAndEndpoint=document.querySelector('.js-sub-endpoint');if(subscription){varjsonSubscription=JSON.stringify(subscription);subscriptionJson.textContent=jsonSubscription;endpointURL.textContent=subscription.endpoint;subAndEndpoint.style.display='block';varxhr=newXMLHttpRequest();xhr.open('POST','http://localhost:3000/subscribe',true);xhr.setRequestHeader('Content-type','application/json');xhr.onload=function(){// do something to responseconsole.log(this.responseText);};xhr.send(jsonSubscription);}else{subAndEndpoint.style.display='none';}}

What’s this code doing?
We’ve updated the updateSubscriptionOnServer function to make request to our server that sends along the client created subscription object. This request registers the subscriber with the server which stores the subscription in memory (via the Node.js subscriptions array we created in the previous post).

In the same file (/04-3-vapid/js/main.js) update the variable applicationServerPublicKey (it should be found on line 90) with your generated VAPID public key. If you don’t remember what the value is that you set from the previous post, you can try running echo $VAPID_PUBLIC_KEY in your terminal to see it.

varapplicationServerPublicKey='REPLACE-WITH-YOUR-VAPID-PUBLIC-KEY';

It’s crucial that you use the correct VAPID public key that you generated and are using in the application server so that the push notifications go through successfully. If you find they are not working when we get to that step, it is most likely due to an incorrect public key.

Run It!

That is all that was left to do so let’s run it all and try sending our first push notification!

Run the application server by executing the following command in your terminal from within the node-web-push directory:

node server.js

In a separate terminal, run the subscriber client by executing the following command from within the pwa-training-labs directory:

Set up your REST client to execute a POST request to http://localhost:3000/push and with the JSON data seen below as the raw body value.

Send the request from your REST client and you should see a pop up notification with the message of “Hello!”

Done!

Wrap Up

We’ve completed setting up a Progressive Web App and enabling push notifications by leveraging web-push and the VAPID protocol. This is just the start though and there’s plenty more you can try out with push notifications. Check out the Introduction to Push Notifications article to learn more about customization, best practices and more!