Adopting new technologies is an inevitable part of innovation and growth for online businesses. Generally, big companies can easily experience the latest gadgets, enhancing customer satisfaction and standing out from the competition.
With that said, PWA is regarded as the new standard for modern websites and a promising player to replace native apps. Yet, it is incredibly affordable for small and emerging businesses. In today’s case study, we’ll dive head first into Reddit PWA and see how this popular social media site takes advantage of PWA.
Contents
An Overview Of Reddit
Reddit was founded in 2005 by Steve Huffman and Alexis Ohanian from the University of Virginia. Its name was a tweak on the response “I read it” when others wanna share a story.
It’s a massive platform where users can submit posts under various content types, namely social news, forum discussion, web content, or a gathered network. It’s part of what makes Reddit popular, being the accumulated source of knowledge discussions across almost any learning field.
Besides, Reddit permits people to stay anonymous when asking any questions, making room for an open and exciting experience to browse through any piece of information that their brains crave.
Reddit posts are determined by the community. A post or subreddit can only be moved up if users upvote it based on how they regard it as useful. In this way, spam or harmful, misleading information can be reduced.
Their main target audiences are college undergrads, Internet-savvy fellows, and social media advocates between 18-29 years old. They ranked among the most popular social networks in the US with nearly 1.7 billion visits.
How Integrating PWA Helps Brands Boost Achievements
Accelerating User Experience
Many brands come to PWA to boost their app’s loading speed. Take the case of Uber PWA as an example. Knowing that their customers are (most of the time) using Uber in a hurry, they created a tiny but powerful Uber PWA that can load within 3 seconds, even under connections as slow as 2G.
Accelerating the user journey will reduce the bounce rate and thus increase the potential conversion rate. People nowadays often regard slow-loading pages as watching an annoying movie that they would drop out at any minute.
Walmart also figured that with solely a 1-sec improvement in loading time, the conversion rate already increased by 2%.
Increase Customer Value
Not only can PWA help you improve first-page loading, but it also creates smooth, seamless transitions between pages and elements. In other words, the on-site user experience will also be enjoyable.
For ecommerce stores and marketplaces, the longer customers stay on pages, the better it implies they are interested in the offered items. At the same time, those who tend to shop in bulk find the shopping journey easy and fast.
PWA can enable push notifications in crucial times, thus reconnecting with frequent users for engagement, driving more value to online businesses.
Blur The Online – Offline Distance
With the ability to work offline, PWA allows users to continue their unfinished online journey on the go by browsing through their loaded pages.
They can also make changes to the content, and all will be saved in the background for the closest synchronization when the connection reapplies.
All Devices Act Alike
Small businesses can allocate budgets for other essential investments while saving costs on PWA integration.
Having to build one quick app only for any device can maintain consistent performance on all online presence and maximize the time and resources to attract and acquire customers.
This is how growing businesses can efficiently increase their revenue.
Reddit’s Challenges Before PWA Integration
Reddit has always wanted a solution to encourage its users to use the app, especially via desktop. They’d been looking for a way to make it almost effortless for their users to switch to apps.
Data shows that one of the top drawbacks of using apps is consuming too much storage. In contrast, a PWA installation requires less than 1MB.
Also, the download process for Reddit is regarded as a time-killer due to its bulky amount. Some Reddit threads said it was surprising not to see Reddit working on PWA earlier and optimizing functionalities.
The Outcomes Of Reddit PWA
About The Design
Although PWA retains the same look and feel across platforms, each browser supports it differently. The three-dot menu makes it simpler to install or uninstall PWA from the web with Chrome rather than Microsoft Edge.
The pop-up signs such as “Install app to home screen” are considered user-friendly and a must-have for visitors to be encouraged to use apps.
About The Function
- The loading speed: efficiently fast and smooth
- The transition between pages and elements: seamless and responsive, instant appeared elements
- The ease of navigation: typical drop-down content layout with post-expanding hover effects, familiar, intuitive, and effortless
- The engagement level with each interaction: is overall satisfying. The way the Reddit logo shows up for the on-loading content to later appear instantly makes the site look like it runs faster
How To Build A PWA Like Reddit?
Tips With Reddit PWA
Make sure you cover the PWA core requirements. It should start fast but also stay fast throughout the user journey. Reddit PWA shows a breakneck speed from the first loading, and all the content appears instantly as you scroll, ensuring a responsive user experience.
Exclusively on iOS, the re-engagement features such as pop-up messages and notifications for PWA installation are not supported by Apple.
If you want to practice advanced development for optimal functionality, know that PWAs are built based on best practices and modern web APIs. These can be applied to work independently or in combination, depending on your business priorities and specific demands.
Reddit PWA focused on enhancing speed first, everything else follows. It’s like saying, “Hey look how good our mobile app performs, imagine what will you get if you download the app.” Notice that after visitors scroll around, Reddit enables push-ups to encourage users to switch to the app.
To line up the modern edge look of your website and unlock your PWA to its full potential, Google encourages prioritizing the agile strategy, which is to launch feature by feature and see if the combo works for you.
This point of view allows you to stick with the market response step by step. Analyzing the tracked data can tell what features users like to use most and what doesn’t bring them value.
These inputs are essential for web designers and developers to make adjustments accordingly. Keep the trial and error process until you execute the right ones that help you enlarge the extra money generated by PWA.
A Simplified Introduction To PWA Development
Setting up
Create the app directory and fill the js, CSS, and images subdirectories here.
Writing The Markup For App Interface
At this step, the PWA should be able to display content whether the JavaScript is disabled or not. This way, users won’t face a disturbing blank page whenever the connection is out or lagged.
Instead, all interactions should be responsive and correctly displayed across a wide range of screens. This requires taking the mobile-friendly orientation into account.
Testing The App
As soon as you have a thing going on in the browser, you can test it with Google’s Lighthouse to see how well it performs to the PWA standards.
Press F12 for Chrome’s developer panel open at your public site, find the audits tab, and click on Lighthouse.
A Service Worker
Being a relatively independent web script that runs in the background apart from user interaction, this powerful ability enables PWA to intercept network requests, enable local caching, and more.
An App Manifest
An app manifest is required with a service worker to determine how your PWA will look and behave on the home screen. You can set up the name, the icon, the theme color, and the app’s orientation.
Wrap Up
The code is complete until this phase, but you need to upload the app to a web server. This would enable your PWA to operate under the security of HTTPS.
Premium PWA Development For Ecommerce By Tigren
Our Expertise
As a decade-old professional Magento services provider, Tigren is now one of the top outsourcing agencies globally.
It all started with a small team of highly trained, skillful, and dedicated developers who strive to achieve our clients’ goals. To this day, we have executed more than 1000 projects for over 800 global SMBs.
Based in Vietnam, we hope to assist as many aspiring business owners with the world-class Magento ecommerce projects they deserve, yet at as reasonable and affordable prices, as possible.
Our Services
We are the Magento-specialized agency aiming to bring sustainable growth solutions to SMBs. With PWA, we provide 2 premium services as follows:
- Custom Progressive Web App development
- Premium TigrenPWA template
Key Takeaways
The PWA is just the right combination of native apps and regular websites that brings real value to the end-users.
Experts predict it’ll be the next big thing in the digital world, especially eCommerce. Hopefully, through learning this case study of Reddit PWA, you’ll get an idea of how to innovate a site that helps your customers and maybe become one of the early adopters of PWA.
Related Posts:
How Much Does It Cost To Develop A PWA Like Starbucks PWA?
Alibaba PWA: Winning With Progressive Web App
