Progressive Web Apps - The Future of the Web

Responsive Web Design

There’s a problem with the way that most people are building websites today. It’s a problem that actually stemmed from an early 2000’s web design solution that really began to gain acceptance around 2012 and 2013….responsive web design.

At that time, responsive web design solved a problem. It allowed for a better user experience on devices smaller than desktops by allowing desktop pages to be viewed in response to the size of the screen or web browser of the user. When the majority of internet traffic was on a desktop and only a small percentage on mobile devices, this approach was acceptable.

Responsive Design Limitations

Fast-forward to 2017 though, and mobile should not just be an afterthought of a desktop designed website. Mobile is overwhelmingly the growth engine of the web. Over 50% of internet traffic now takes place on a mobile device. And while a responsive designed site can fit the screen of a mobile user, it often takes forever to load, negating the perceived user experience benefit of fitting a mobile screen.

Many companies today are lagging severely behind when it comes to mobile. 77% of mobile sites today take 10+ seconds to load and yet a Double Click study found that 53% of users abandon sites that take longer than 3 seconds to load. At 10 seconds, approaching 100% of casual users will bounce. So more than ? of the mobile sites on the web today are forcing almost every casual mobile visitor to their website to bounce. Our expectations on the web are changing faster than websites.

Introducing Progressive Web Apps

The good news is that there is a better way. Progressive Web Apps (PWAs) are a hybrid of web and mobile technology that offer the performance benefits of a mobile application (near instantaneous loading time and offline mode) coupled with the discover-ability of a standard web page (no more app store discovery and update problems!). 

Progressive Web Apps (PWAs) are built around the situation that the network (or internet connection) is slow and unreliable, ensuring that no matter what level of connection a user has, the website will still load quickly and reliably. In some cases, a PWA will even allow the website to function without any internet connection at all, using what is known as a “service worker.”

Push notifications, adding an icon to the home screen, persistent auto-login, and other traditional native app features are also possible by building a progressive web app. PWAs fully embrace the constraints of mobile devices (unlike responsive sites), while preserving the openness and reach of Web (unlike native apps).

While PWAs are new, they are unmistakably superior to any legacy options for many use cases. They have received massive and accelerating developer support from Google over the past two years. Below are some of the early adopters of PWAs that have seen great results.

PWA Success Stories

Early adopters of progressive web apps are reaping significant user experience and engagement wins:

• Twitter built a PWA (mobile.twitter.com) that has all of the features of its native app that loads 30% faster than the native client, and has a data saver mode that lets users use up to 70% less data
• Alibaba has increased conversions by 76% since implementing a PWA.
• Ali Express’s use of PWA-style authentication resulted in 85% fewer login failures,
• Pinterest’s use of PWA-style authentication led to a 10% increase in desktop logins.
• Carnival Cruise Line reported that 42% of users that receive PWA-style notifications return to the website.
• Housing.com decided in favor of building a progressive web app after discovering it was 53 times more expensive to acquire a mobile app download compared to a website visit.
• Forbes said that their new PWA doubled the average user session duration, resulted in six times the completion rate, and had 20% more viewable impressions than its previous mobile site.
• WEGO.AE (the largest travel marketplace in the Middle East) has decreased page load time from around 12 seconds to between .50 and three seconds using a PWA

(These statistics were provided at the 2016 Google Chrome Dev Conference PINT attended with the exception of the Twitter, Forbes, and WEGO case studies, which can be read here:

https://www.androidcentral.com/twitter-lite-progressive-web-app-thats-designed-emerging-markets

www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-web-app/

https://saudigazette.com.sa/business/3-seconds-better-12/)

What to Do

There are options when it comes building a PWA. PINT can help you start from scratch or we can evaluate retrofitting your current site to embrace PWA methodologies and significantly improve your website's performance and user experience. Like many other things we do at PINT it is possible to take an evolutionary (not revolutionary) path to PWAs. We can incrementally attack the worst hurt items for your current site and appropriately phase other obstacles according to a timeline and budget. Let’s get in touch, take a look at some data on your site, and come up with a plan.

Charlie

[email protected]