To generate VAPID keys, we will use one of the scripts by the web-push module we installed earlier. VAPID helps to identify our server as the initiator/creator of any message sent to the push service to be shipped to the client’s device and also helps the push service to notify the server owner via emails whenever there are issues with a pushĪlthough it’s not compulsory to generate VAPID keys, it’s good practice as it regulates the traffic coming to clients and can reduce the chances of an attack. ![]() We want to send notifications to the client and ensure that it comes from our server, not some random server that somehow managed to access our client’s subscription information. Generate subscription information and send it to the endpoint defined on the server.Set up an endpoint to handle subscriptions from the client and save to the database.Generate VAPID (voluntary application server identification) keys. ![]() Note: Each time we discuss the client side, it is assumed that we are in the “frontend” directory, and for server side, the “backend” directory To clearly understand the process, we will divide the steps performed on the client and server sides, respectively. If done correctly, the frontend folder structure will look similar to the image below. The server.jsįile is where our server code will live, and the subscriptionModel.js file will hold the model, which will be used to store subscription information in our MongoDB database. The code above first initializes our project and installs necessary dependencies-one of which is web push, used on the server to communicate with the push service to send notifications-followed by creating the necessary files. Lastly, to set up the backend folder, open your terminal and insert the following commands. Next, we install Axios, the HTTP client to be used to communicate with our backend. Now we need to configure the frontend folder and install the necessary dependencies insert the following code into your terminal. The above command creates a project directory and then creates two subfolders.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |