Progressive Web Apps answer the problem of responsive web design which is fundamental nowadays to meet users’ expectations but in some cases not so easy to achieve. Learn how they deal with that.
Introduction
In a world where two-thirds of the population is connected by mobile devices, a strong mobile presence is a must for anyone who wishes to be noticed. The million-dollar question is how to target mobile and desktop users alike without developing and maintaining both a mobile app (iOS and Android) as well as a responsive website.
In recent years, many web developers have become convinced that Progressive Web Apps (PWAs) are the best answer, and this article examines whether they are really the future of web design.
What are progressive web apps?
The term “Progressive Web Apps” was coined in 2015, which is basically a century ago when it comes to web development, but there’s still some confusion about their anatomy. Essentially, PWAs are app-like websites that use web technologies to combine the best of both the web and native environments. They consist of three key components:
- Website: At their core, all PWAs are more or less regular websites written using HTML, CSS, and JavaScript. Because PWAs rely exclusively on JavaScript to enable interactivity, there’s no need to install a development environment to build them, and all modern web browsers already support them.
- Web manifest: PWAs come with a JSON file that informs the web browser and the device that they are dealing with a PWA and not a regular website. The JSON file includes the name of the PWA, its icon, description, and information about what access it needs to the device to work properly, among other things.
- Service worker: To provide the technical foundation for functionality that’s traditionally associated only with native mobile apps, such as push notifications, rich offline experiences, and periodic background syncs, PWAs use a JavaScript script that runs in the background, independently from the website itself.
“PWAs are a natural evolution of how we distribute and consume software,” state Google and Microsoft web developers in Progressive Web Apps: the future of the mobile web. “Because they are based on web technologies, they are independent of any operating system or development environment.”
Is PWA the future of responsive web design?
For nearly two decades now (the first documented responsive design website was published by Audi around 2002), web developers have been adhering to the responsive web design approach to make websites display well on devices with large and small screens alike without the need to maintain a mobile-specific version of the same website.
The problem with responsive web design is that it doesn’t go far enough to meet the expectations of users coming from a variety of devices with different window or screen sizes, which is why many web designers now ask, “Is PWA the future of responsive web design?”
Specifically, responsive web design doesn’t use progressive enhancements to deliver native features when viewed on any device. Progressive web apps solve this problem through their use of service workers, creating a whole bag of fundamental design considerations, in addition to responsiveness, that all web developers and designers should keep in mind:
- Dealing with change: The progressive aspect of PWAs means that more functionality can become available on subsequent visits (or even in real-time), and users should be properly informed of all changes using status notifications and other means.
- Push notifications: One key feature of PWAs are push notifications. The ability of push notifications to increase user engagement is well documented at this point, but push notifications can also push users away if not handled correctly.
- Different states: PWAs should be designed with different states in mind and work just as well offline as online. Other states include network problems, content still loading, or content loading only partially.
- Perceived performance: Especially in developing markets such as India, where most people access the web from low-end devices, it’s important to use loading skeleton screens and transition animations to let users know that they’re making progress and thus improve perceived performance.
- Accessibility: It goes without saying that PWAs should follow the Web Content Accessibility Guidelines (WCAG) 2.0, which define how to make web content more accessible to people with disabilities.
Benefits galore
Many major companies, including Twitter and Alibaba, already know the answer to the question, “Is PWA the future of web design?” They utilize PWAs in their digital strategies and reap many benefits of this next chapter of web design.
The Twitter Lite Progressive Web App allowed the social media giant to achieve 65 percent increase in pages per session, 75 percent increase in Tweets sent, and 20 percent decrease in bounce rate by delivering a faster, more reliable, and more engaging mobile web experience.
“Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter,” says Nicolas Gallagher, the Engineering Lead for Twitter Lite. “The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.
AliExpress, Alibaba’s online retail service, reported that time spent per session increased an average of 74% across all browsers after releasing its PWA, with users now visiting twice as many pages per session. The same thing happened when Alibaba released a PWA for its B2B trading platform, which shows that the benefits of PWAs are not limited by market vertical.
Conclusion
Progressive Web Apps seem to be the future of web design, allowing web app developers to create user experiences that have the reach of the web and the functionality of native apps. As with any new technology, they come with their own fundamental design considerations, but their abundant benefits make them a worthy investment.
