You can see this user-centric metric by opening Chrome DevTools and running an audit. This was my first time using LocalStorage, and I was pleasantly surprised by how easy it was.Ī last bit of the PWA to get done was improving the perceptual speed index. The second half of offline-mode was saving new stories to the user’s device every time they were fetched. That way, a new connection to the internet could trigger fetching stories, and a lost connection could notify the user they are offline. The first half was to do things whenever the internet connection changed using event listeners. This was the first time I worked on an offline-friendly mode for Chrome and Firefox to do stuff like read articles before my computer connected to wifi. In the past, I had to do a lot of work for PWAs ( Progressive Web Apps) and even wrote a tutorial on perfecting them. The contributors on that project have done a wonderful job of adding service workers for near-instant loads and a manifest file for your meta data, and optimizing the Webpack bundling the best they can. Wanna know the cheap, dirty secret about making a progressive web app in React? Just use Create-React-App. This stopped pushing the risk of abusing my Reddit API limits and shortened story load times because I would not have to ping the Reddit API every time. I could hold on to the small amount of data (stories) on my server and update it once a minute with a simple setInterval.

In the past, I had used my Node server as a API requester every time a user would visit my app. One big thing I learned on this project was request management. It was easy to use and had me getting content in no time.

Luckily, there was a great Node wrapper for the API called Snoowrap. These objects were sweet, sweet Reddit data.

A bot user’s comment that summarized the story.

The top posts of r/WorldNews for their headlines.

I knew there were two parts of content I wanted to capture from Reddit: Before I started on any of the actual front-end work, I worked with the Reddit API and my Node server. For me to do that, I needed to ensure I could grab the correct data. Content-First Design says you need to design around the content. In design, there is a concept of content-first. Note that I’ve written a sister article about how to design this Progressive Web App news website here. But the design and development process was deeply intertwined in real life. These two stories may seem completely separate. I wrote a separate article about design process behind this. This article focuses on how I was able to implement The Global Upvote for aspiring developers. The Global Upvote aggregates top voted stories from across the web, summarized and updated every sixty seconds. For the last two weeks, I worked on a personal project called The Global Upvote.

News app source code