Since the creation of PWAs in 2015, the subject has garnered a lot of attention. If PWAs are not intended to replace native mobile applications, they are very complementary and have a great future ahead of them.

Why is this technology so popular today?

We invite you to understand it by looking at 3 “success stories” of Progressive Web App. They illustrate 3 challenges that they overcome better than the traditional mobile web can do!

Twitter Lite: Improving User Retention

Mobile sites do not offer an optimal browsing experience for their users: they are often slow, not available offline, and consume a lot of loaded data. To meet these challenges, Twitter launched its Progressive Web App Twitter Lite in April 2017, with the aim of improving its audience in countries with poor connectivity.

The success is there and compared to the old version of the mobile site, Twitter Lite has allowed:

• To increase the number of pages per session by 65%
• To increase the number of tweets sent by 75%
• To reduce the bounce rate by 20%

As a result, Twitter Lite has become the fastest and safest way to use Twitter's core features on mobile.

George.com: improving user conversion

E-commerce is also a good example where PWAs have a role to play. According to the Adobe Analytics Report, mobile accounts for 51% of Internet traffic, but only 31% of revenue in 2018. There is a real conversion challenge on mobile that PWAs aim to solve by rethinking the user experience.

Google devoted a case study to the English ready-to-wear site George.com, which launched its PWA in February 2018. This PWA allowed them to considerably improve the performance of their mobile website and:

• Divide page load time by 3.8
• Divide bounce rate by 2
• Increase the conversion rate by 31%

International Courier: improving the acquisition of new users

Other players choose PWAs to differentiate themselves from their competitors and acquire new users. Le Courrier International, for example, launched Le Réveil Courrier in 2018. The progressive web app met all the needs of the Mail Alarm Clock...

• Home screen shortcut to improve retention
• Morning notifications at 7am to engage users
• Reading possible in offline mode from the second click

... Without presenting the cumbersome nature of an application:

• Updates to download
• Data consumed
• Memory used on the device

Courrier International is launching this week its #ProgressiveWebApp for subscribers. Go to the Mail Alarm Clock on https://t.co/FeVa5z2qNz #reveilcourrier #PWA @courrierinter pic.twitter.com/MGCVHxL6BU

Acquisition, retention, conversion, these success stories illustrate how Progressive Web Apps have revolutionized the mobile web world by integrating more and more “app-like” functionalities. At BAM, we have 3 PWA projects in progress and more and more customers are asking us to assess this possibility.

To conclude, here is a matrix that classifies the types of needs that each technology meets:

++table style="width: 100%; border-color: #000000;” border="1">++tbody>++tr style="height: 26px; ">++td style="width: 135px; height: 26px;" >++/td>++/td>++td style="width: 135px; ">PWA++/td>++td style="width: 135px; text-align: center; height: 26px; ">Mobile app++/td>++/tr>++tr style="height: 74px; ">++td style="width: 135px;" >The mobile web is very important in my audience++/td>++td style="width: 135px; width: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135" >++/td>++/tr>++tr style="height: 74px; ">++td style="width: 135px;" >I am looking for a product with high performance (fast execution) ++/td>++td style="width: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; text-align align: center; "> ✅ ++/td>++/tr>++tr style=” ✅ height: 74px; ">++td style="width: 135px; height: 135px;" >I need to be able to update my application without delay++/td>++td style="width: 135px; height: 74px; height: 74px; text-align: center; "> text-align: center;" > "> ✅ ✅
(in react native) ++/td>++/tr>++tr style="height: 74px; ">++td style="width: 135px;" >I'm looking for a product with complex user interactions++/td>++td style="width: 135px; ++tr style="width: 135px; "height: 135px; height: 135px; height: 135px; text-align: center;" >++/td>++td style="width: 135px; height: 74px; text-align: center; ">++/td>++td style="width: 135px; height: 74px; text-align: center;" >++/td>++td style="width: 135px; height: 74px; text-align: center; ">++/td>++td style="width: 135px; t-align: center;" > ✅ ++/td>++/tr>++/tr>++tr style="height: 74px; ">++td style="width: 135px;" >I am looking for a product where offline mode plays a critical role++/td>++tr style="width: 135px; ">++/td>++td style="width: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 135px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px;" >74px; height: 74px; ">74px; height: 74px;" >74px; height:; height: 74px; text-align: center; "> ✅ ++/td>++/tr>++tr style="height: 74px;" >++td style="width: 135px; ">I'm targeting an audience in countries with low connectivity++/td>++td style="++td style="width: 135px; height: 135px; height: 135px; height: 74px;" > ✅ ++/td>++td style="width: 135px; height: 74px; height: 74px; px; text-align: center; ">++/td>++/td>++/tr>++tr style="height: 74px;" >++td style="width: 135px; ">User acquisition is first in my strategy++/td>++td style="width: 135px; height: 135px; height: 74px; text-align: center;" > ✅ ++/td>++td style="width: 135px; "> ++/td>++td style="width: 135px; height: 135px;”; height: 74px; text-align: center; ">++/td>++/tr>++ tr style="height: 74px; ">++td style="width: 135px; width: 135px;" >Retaining my users is the first in my strategy++/td>++td style="width: 135px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height: 74px; height ++/tr>++/tbody>++/table> ✅

Do not hesitate to contact a BAM expert to assess the technical strategy that best meets your needs!