Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Progressive Web Application Development by Example

You're reading from   Progressive Web Application Development by Example Develop fast, reliable, and engaging user experiences for the web

Arrow left icon
Product type Paperback
Published in Jul 2018
Publisher Packt
ISBN-13 9781787125421
Length 354 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Chris Love Chris Love
Author Profile Icon Chris Love
Chris Love
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Introduction to Progressive Web Apps 2. Creating a Home Screen Experience with a Web Manifest FREE CHAPTER 3. Making Your Website Secure 4. Service Workers – Notification, Synchronization, and Our Podcast App 5. The Service Worker Life Cycle 6. Mastering the Cache API - Managing Web Assets in a Podcast Application 7. Service Worker Caching Patterns 8. Applying Advanced Service Worker Cache Strategies 9. Optimizing for Performance 10. Service Worker Tools 11. Other Books You May Enjoy

Real-world PWA examples

Flipkart, the Amazon of the Indian sub-continent, embraced PWA as soon as the term was first mentioned. In many ways, they are the poster child of doing a PWA the right way.

Flipkart's consumer market consists of customers almost entirely on poor mobile connections. Their mobile devices have limited storage and may or may not have a reliable 3G connection. In fact, 63% reach the site via 2G. A client application experience that loads quickly and works even when the network is absent gives Flipkart a business advantage.

The Flipkart PWA (https://developers.google.com/web/showcase/2016/flipkart) was created by a small team of engineers in 42 days, a small investment on their part that has paid huge dividends by increasing conversions by 70%. These are just some of their published key performance indicators:

  • Users time on the site with Flipkart lite vs previous mobile experience, 3.5 minutes vs 70 seconds
  • 3x more time spent on site
  • 40% higher re-engagement rate
  • 70% greater conversion rate among those arriving via the Add to Homescreen feature
  • 3x lower data usage

Over 50% of the Weather Channel's mobile usage comes from the web. Reaching consumers around the world is a priority. The web offers a reliable channel to reach everyone, which often means lower powered devices. Re-engagement and the delivery of timely information, such as storm warnings, was also very important.

The Weather Channel (https://developers.google.com/web/showcase/2016/weather-channel) created a PWA, implementing push notifications to deliver experiences matching their native application. This upgrade enabled their team to reach 178 countries and deliver weather forecasts while improving their load time:

  • This PWA is now available in 62 languages and 178 countries
  • 80% improvement in load time
  • Based on this successful global test, the team will expand the PWA to its U.S site in 2017

Lancôme (https://developers.google.com/web/showcase/2017/lancome) rebuilt their mobile web presence as a PWA and increased conversions by 17%. As they tracked mobile web usage, passing desktop, Lancôme saw their conversions drop. After considering a native application, they decided investing in the web was the right way to go.

They determined customers were not likely to download a native application, nor use it often. They knew a web presence would have to be done right, as doing so could generate more rewards. They decided to rebuild their web presence from the ground up as a PWA.

Overall benefits:

  • 84% decrease in time until the page is interactive
  • 17% increase in conversions
  • 15% decrease in bounce rate
  • 51% increase in mobile sessions

iOS improvements:

  • 53% increase in mobile sessions on iOS
  • 10% decrease in bounce rates on iOS

Push notification benefits:

  • 8% of consumers who tap on a push notification make a purchase
  • 18% open rate from push notifications
  • 12% increase in conversion rates on recovered carts via push notifications

If you are worried about browsers that do not support PWA technology yet, take note of the iOS statistics. Lancôme is not alone; almost every company embracing PWAs have reported similar improvements on iOS. Later, you will see how to polyfill caching and the Add to Homescreen experience in your applications to achieve similar results.

These are just a few samples of major brands that have adopted PWAs and reported benefits. There are many more smaller businesses also improving because they are building web experiences customers want to use. The great thing is you can start enhancing your existing web site today using examples from this chapter.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime