![\"Subscribers.com\"](\"https://miro.medium.com/max/875/1*yE9af0UQXh3VlkQFcHqihw.png\")
Web Push notifications are content messages that are sent to a device by a web application or website. These Web Push notifications can only be sent to site visitors who have opted-in to receive such notifications from a particular website or web application. This opt-in for Web Push notifications usually occurs by a visitor visiting a site and being presented with a Web Push notification that asks if that visitor would like to receive updates from that website. If a user accepts or says yes, then that visitor subscribes to these updates.
\nOn this tutorial, I am just going to show how to implement a web push notifications system using Subscribers and a Gatsby JS site. If you are interested in knowing more about Web Push Notifications and how you can leverage its full power, I recommend you this awesome guide that covers pretty much everything about it.
\nThe very first step is to set up our app. This one is built with Gatsby JS to create a React app:\ngatsby new project-name https://github.com/alfrekjv/gatsby-starter-blank
\ncd project-name\ngit init\ngit remote add origin github-repo-url\ngit add .\ngit commit -m \"gatsby starter pack installed\"\ngit push -u origin master\nHere are a few things to consider:
\n
If you don’t have an account yet, just go ahead and create one and then get the subscribersSiteId on the install code section.\nNow, in order to add Subscribers’s support, we must use a Gatsby plugin (everything is plugin in Gatsby)
\nyarn add gatsby-plugin-subscribers
Next step would be to configure our newest plugin. For that, we need to edit the gatsby-config.js file.
plugins: [\n {\n // Note: this plugin is coded to only work on production\n resolve: `gatsby-plugin-subscribers`,\n options: {\n id: 'your subscribersSiteId goes here',\n }\n }\n]\nImportant note: Subscribers also recommends to install a service worker, for that, you’ll just need to create a folder called /static at the root of your project and put the file there.
![\"Create](\"https://miro.medium.com/max/875/1*jbDwBQkU1eCPKbyevHkShw.png\")
To deploy our website to Netlify, we just need to login / or create an account and click the New Site from Git button. Then, find your git repository and select it. After selecting the repository, you’ll have to set up the deploy settings which will go as follows:
\nBuild command: gatsby build\nPublish Directory: public/\nThat’s it! Every time you push to master on your website’s repo, Netlify automatically will deploy your site with the newest code.
Netlify assigns you a temp URL, which goes something around https://yourwebsite.netlify.com which you can use to test the site you just created or you can add a custom domain if you need it.
Alright, so, now that we’ve added Subscriber’s support and deployed the website to Netlify, next step would be to start sending Push Notifications campaigns to your subscribers.
\nWith such a low barrier to entry, you can see how you can make really dynamic experiences with JAMstack applications. It’s amazing how much you can accomplish without any maintenance costs from servers.
","frontmatter":{"title":"Implementing a Web Push Notification System with Subscribers, Gatsby JS and Netlify","date":"August 20, 2019","author":"Alfredo Juarez","featured":true,"avatar":"https://cdn-images-1.medium.com/fit/c/100/100/1*OQgaBPUritgTf9TvdopTtQ.jpeg","category":["Web Development","Push Notification","Netlify","Gatsby JS","Git"],"tags":["Web Development"],"image":"https://miro.medium.com/max/1476/1*W0x47uzLJ01lRUt2qZd1zg.png"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/insights/2019/08/20/implementing-a-web-push-notification-system-with-subscribers-gatsby-js-and-netlify","prev":{"node":{"fields":{"slug":"/insights/2019/12/05/white-paper-our-product-design-process-guide"},"frontmatter":{"title":"Our Product Design Process – Experiences before products","date":"2019-12-05T00:00:00.000Z","author":"Alfredo Juarez","avatar":"https://cdn-images-1.medium.com/fit/c/100/100/1*OQgaBPUritgTf9TvdopTtQ.jpeg","category":["Product","Startups","Product Design"],"featured":true,"image":"https://cdn-images-1.medium.com/max/1200/1*hLI66HO4sPlw1Sn8cykLZA.jpeg"},"html":"We love how many companies have created a trend by being so transparent about themselves, culture, methods, product roadmaps, and, some of them, even their salary. We decided to follow the path of those great companies such as Buffer, by releasing our very own product design process. This is a well thought, user-centric, system of thinking we’ve been using, evolving and polishing over the years and it basically combines decades of experience and best practices.
\n\n\n“If you build software on top of a broken process, in the end, you’ll have a broken software.” — Aaron Levie, CEO Box.net
\n
Building a product is an adventure. You never know how much time, money and resources it will take and whether it’s going to be successful or not. We have good news for you. We’ve navigated those waters before. In fact, we love to do it that much, we even created a process to help us along the journey.\nWant to learn more? Download the complete guide in PDF here.
\nJuvasoft is a digital product consulting team. We love to solve business problems through the application of design, technology and innovation. We focus on building user-centric products to deliver the best user experience on each project we take.
"}},"next":{"node":{"fields":{"slug":"/insights/2019/07/03/software-development-from-a-business-standpoint"},"frontmatter":{"title":"Software Development from a Business Standpoint","date":"2019-07-03T00:00:00.000Z","author":"Alfredo Juarez","avatar":"https://cdn-images-1.medium.com/fit/c/100/100/1*OQgaBPUritgTf9TvdopTtQ.jpeg","category":["Business","Product","Design","Startups"],"featured":true,"image":"https://cdn-images-1.medium.com/max/2600/1*f5D1TCdEqjeuElPkPY2-wQ.jpeg"},"html":"There’s a big chain of retail stores with presence across many Latin American countries that has this protocol of having someone greeting you whenever you enter or exit the store.
\nEvery time you enter the store, you can either smile back or just pass her by — I hope you do the former option, but this isn’t the point. What I am trying to say, is that, this simple gesture has a real reason behind and is, indeed, a business reason.
\nIn Mexico, there is a common saying that, everyone owes them money and they are well known for their well-defined practices for getting paid. So, everyone owes them money and everyone hates their approach to collect their debt, so basically there’s a love/hate relationship between the company and its customers. So, by having someone greeting you with a big smile, they are lowering your defenses before you even enter the store.
\nAs developers, we love to write tons of lines of codes. We stumbled upon a problem, analyze the situation and write an algorithm that potentially solves such given problem. The problem with this approach is that we never tend to see the situation from a business standpoint.
\nThis is something I learnt a while ago. I thought I was taking our customers into consideration, but the truth is, I was more focused — and more excited — on how I was building the product. Am I using the best tools? Am I designing the best UI? Am I creating the best user experience?
\nFocusing on how our product impacts the business instead of just focusing on how we are great developers is more important for the product than being able to build the product fast with the best technology.
\nOnce I understood that what I build must have an impact in an aspect of the business I am working on, I became a better developer, because now, I build products that do move the needle and this is something very valuable for our customers at Juvasoft.
\nSo, fellow programmer, the next time you work on a product, think about how every feature moves the needle in terms of business value. Think about the person greeting you at the store and why that is happening in the first place. Focus on value added, not lines of code written.
\nYou can thank me later.
"}}}}}