3 Principles of Progressive Web Apps and Why Your Website Should Be One

The most responsive websites are progressive web apps. I’ve discussed this topic previously in a vlog, which you can find here. To recap, we defined progressive web apps as a set of guiding principles on how a website should be designed. This update of your website can greatly improve your customer's user experience. These principles make your website feel, as the name suggests, like an app that you can download on your mobile device; although it has all of the benefits of being a website. Offline usability, interactive and performant, yet passable in a simple URL link. This is the future of websites that was first originated by a designer and developer duo at Google in 2015. Over the years, it has begun to gain traction, and we may soon expect every site to be built in such fashion. So what are these principles that help us define what a progressive web app is?

The first principle of designing a progressive web application is the idea of creating a performant website. In this day and age, where users have a plethora of options fighting for their attention, sites with longer load speeds can lead to loss of traffic. As stated by a study from Google, 53% of mobile site visits are abandoned if it takes longer than three seconds to load. Google, using its massive online presence, is leading the charge in pushing websites to make this update. Google ranks performant sites higher than non-performant sites, and higher performing websites will appear high in search results. A page that is ranked first can possibly receive double the average traffic of the second page on the list, and 80 times more than the 14th list item. A performant site has:

- Quality Content: Working quality links, SEO optimized, lengthy content.

- Optimized Content: Compressing images, minifying JS and CSS files, and writing less code.

- Fast load times: How is your page rendering? Are you using a good server? Is there enough overhead for your traffic? What is initial paint time? How fast until user interaction are allowed? To measure your website’s performance, we recommend using webpagetest.org.

These factors of a performant site helps Google determine how they will index you in searches, and the higher that you score, the higher you will rank in search results. While the U.S. Mobile App Report shows that most users spend more time on mobile apps than websites, the amount of unique visitors a company’s website receives is more than doubled the amount of traffic their native app receives. These new users are new opportunities that every company would love to have.

The second principle is the idea of offline loading. The current state of mobile internet is promising as more than 90% of United States users have accessibility to 4G internet networks. However, we all experience times when we enter high-rises, subways, or dead zones where we are fooled by "lie-fi.” The one bar of doom that loads content forever. This is when designing progressively can greatly improve the user experience. All major browsers are now equipped with service workers, which operates in the background of websites, jumping in when needed to save the current browsing session. Developers have the ability to intercept network request using these workers. This gives the developer the ability to load assets that are cached in the browser for speedy visits to repeat users. Users can browse around pages they’ve already visited, shop, enter items into their cart, and even begin transactions without internet connection. As soon as there is internet, new data will populate the site and any actions will be sent to the servers. This is invaluable for ecommerce and social media websites. Big ecommerce sites like Alibaba and Flipkart saw conversion rates of 70%, 3x longer time spent on site, and higher re-engagement rate all the while saving their users loads of mobile data when they converted their site to a progressive web app. These numbers demonstrate that users will respond with their pocket when you improve their experience. There are also other beneficial behaviors of service workers. Because they sit in the background and intercept network requests — this can be dangerous for hackers. This forces your site to be served over secure HTTPS connections, which is a step in the right direction for network security. Also, as a background worker, they exist even when a user closes the browser which allows developers to do neat things, like send phone notifications about product or news updates regarding your company. All of this is achieved without requiring users downloading an app in a time when no one is actually downloading apps.

The final principle of progressive web apps is the idea of an engaging and interactive site. There are many available libraries and methods for delivering the extra polish to a site. The subtle button animations, page transitions, form submissions, and many other small detailing can be sprinkled into your site. Thanks to HTML5 technologies, developers can now access all features of a users phone to truly tailor the experience. A phone's camera, GPS, gyroscope, touch screen, even fingerprint scanner are all now available for usage. If beneficial to your company, you can enhance the experience by adding a third dimension previously not possible on the web. Does your company sell watches? Perhaps you want to tap into the camera and give them a simulation of how it will look on their hand. Does your company offer coupons to in a certain area? Tap into the GPS to provide location specific info. Want a faster checkout process? Integrate the iris scanner or fingerprint scanner for payment verification. The possibilities are endless, and with technologies like augmented reality, virtual reality, webGL improving every day, the website experience is only becoming more impressive.

Progressive web apps are the way to build web applications from now on. By applying all of the principles to your website, the difference in user experience is practically black and white. As more and more sites adopt this behavior, the overall experience of the web itself is improved. There are still some limitations in the browser technology that prevent it from competing with well-designed native applications. Perhaps websites will pivot into a new role of how we use it, or maybe it will absorb all the responsibility of apps entirely. That is the exciting part about software engineering, we are at the edge of so many impactful advancements. What else will be created? What problem will be addressed next?

https://buildfire.com/reasons-google-doesnt-rank-site-and-fix-it/

https://opensignal.com/reports/2018/02/global-state-of-the-mobile-network

https://www.slideshare.net/comScoremarcom/2017-us-mobile-app-report

https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/