I’m currently working on the development of a very basic PWA. During the first day I’ve managed to correctly implement the code to handle geolocalization and access to the camera. After that, it was time to take a look at push notifications. I’ve started reading about them and mocked some quick code to test. It was then that I realized the process will not be as easy as I hoped.
But after three long and painful days I’ve finally managed to make them work.
I’m going to show you what I did, but remember that this code is definitely not ready for production. It just offers a base structure on which you can build a more complex system.
You will need an understanding of some key concepts before you can continue, but I’m not going to explain them here. Instead, I will give you links to some of the many web pages I visited in the last few days. I highly recommend reading them if you don’t already know what we’re talking about.
• Angular service worker introduction
• A new Angular Service Worker — creating automatic progressive web apps
• Angular Push Notifications: a Complete Step-by-Step Guide
Packages and versions
Other packages you will need are
As I said, I will not explain how to setup the project step-by-step, but here I’m giving you a list of commands you will need:
ng new myApp --service-worker creates an Angular project with service workers.
ng build --prod --bh /; cd dist; http-server when run from the main application directory will build the app for production (which is fundamental, as service workers will not work in development so you can’t just use
ng serve) and automatically start the server in the
dist folder. Please note, this command works if you’re using PowerShell on Windows. If you’re using any other terminal or OS and the command doesn’t work, just split it in three separate operation and run them one by one.
node app.js will run the Express server, which is created following the official documentation.
Ok, if you have everything ready, let’s start. The really first thing you have to do, is generate a pair of VAPID keys, which you can easily do in this site. For the moment, save them somewhere convenient. In a real world, you’d make the server generate the keys and store them in a database. Then, create some methods in your
app.component.ts. Be sure to change the keys provided in the following snippet!
In your HTML you will have a button calling the
Now, let’s take a look at the
app.js Express server. As before, be sure to use your key pair where needed.
Explanation and flaws
Clicking on the button will ask the user to allow notifications. If the users confirms the dialog, then a POST request is issued to the Express server, that in turn sends the actual notification using Web Push.
What I was saying at the beginning about this code being “unfinished” is that there are some major flaws.
• First of all, this only works on
localhost. If you try to access the server from another device using the IP address you will see the page but no scripts can be executed unless you run the
http-server with SSL, which requires creating an OpenSSL certificate.
• The notification is hard-coded in the application, which of course is not very useful.
• Nowhere I’m keeping track of the subscribed users. Also, no function to unsubscribe exists.
• Subscribing to the push service and actually sending a push notification should be two separate operations. Right now, the notification is sent after a successfull subscription, but the correct way should be first subscribing, then storing the subscription somewhere, then send a notification when needed.
But after all, everything I needed was a basic structure on which I can build something, and this is giving me what I was looking for.