Progressive Web Apps in Latam

9 min readDec 4, 2017

Written with Alberto Medina (My colleague at Google).

Note: Google’s blog ThinkWithGoogle has published a business-oriented version of this article, in Spanish, that can be found here.

LATAM Mobile Tech Landscape

Almost ten years have passed since the mobile revolution started with the emergence of iOS and Android; nowadays a large percentage of web traffic is generated from mobile devices. In LATAM, this reality is prevalent. A recent study on the penetration of mobile technologies in the region shows incredible stats such as:

By 2020, a smartphone adoption rate of 71%, ahead of the global average of 66%.
An additional 171 million new smartphone users across the region.
By 2020, 42% of 4G connections, close to the global average of 44%.
Brazil, in particular, is seeing a strong 4G growth spurt.

These stats are staggering and organizations in the region have been rapidly realizing they must provide great user experiences across all platforms, both mobile and desktop.

To achieve an awesome experience on mobile platforms, an organization can choose to develop a native application (iOS or Android). This path can indeed provide a great user experience, but still leaves two aspects in need of solutions: the distribution problem, which is one of the hardest problems in software; and matching the mobile experience on desktop to ensure an awesome UX across all platforms.

The distribution challenges of native apps are apparent from studies like the 2017 US Mobile App Report, which indicates that 51% of users download zero apps per month. Although this numbers may actually be better when based on larger datasets from the Play Store, for example, it still is true that there exist a high friction for users getting to native apps, and that users tend to download and keep only a handful of top-ranked apps. Furthermore, the limitations of the devices predominantly used in the region compound on the distribution challenges for native apps; one of most sold phones in 2017 in LATAM is the Samsung Galaxy J5; this device may be considered above average, but it is still fairly limited in terms of storage and capabilities.

The other option an organization may choose is to develop a web application tapping into the great reach of the web, reducing the storage capacity needed on user devices, and avoiding the high install friction of native apps.

Despite the appealing advantages offered by web applications, native apps have been perceived, rightfully so, as more prevalent than web applications. Historically, there are several reasons for the disparity between the use of native apps vs. web apps: limitations in the mobile platform, which do not play nicely with the traditional web access model; failing to adapt the web development workflow and strategies when moving from desktop to mobile platforms; and limitations of the web platform, which until not long ago used to lack most of the capabilities needed to provide a user experience on web at par with that provided on native apps.

Of these challenges, achieving high performance on mobile web apps emerges as one of the main ones and certainly the one of most concern and frustrations for users. But why is it so hard to achieve high performance on web apps? The reasons are two-fold:

Mobile-platform Specific: differences in CPU architectures (e.g. non-symmetric multi processors), differences in storage characteristics (e.g. multi-layer memories), and differences in the quality and operational characteristics of the cellular networks used to connect mobile devices to the Internet (e.g. latency and error rates)
Website specific: page bloat (size and number of resources used), page structure and rendering strategies, and things like intensive animations and other coding anti-patterns.

This is a challenge faced by users and developers alike at a worldwide scale, but it’s exacerbated in the LATAM region where OS fragmentation is the norm, low-end devices represent a high percentage of the market, and connectivities are far from ideal.

Performance is User eXperience

Users have high expectations for the performance of websites; and when such expectations are not met, users react in ways that clearly impact the outcome of key business metrics. There have been a variety of studies aimed and showing this reality. For example, a 2016 DoubleClick study reported the following results:

User expectations

46% of consumers indicate that waiting for pages to load is what they dislike the most when browsing the mobile web
50% of people expects a page to load in less than 2 seconds
About 53% of all mobile visits are abandoned if the page loads in more than 3 seconds

Load times

77% of mobile sites take longer than 10 seconds to load
On 3G networks, the average time to load is 19 seconds
On 4G networks, the average time to load is 10 seconds

Site structure

The median mobile web page is 1.4MB in size!. This implies that the data alone takes 13 seconds to load on a 3G network (first view).
The median mobile page makes 77 server requests; some of those take place simultaneously, while others are serialized.
About half of all server requests come from ad-related calls

The same study reports results indicating the positive effects of better performance. Specifically, the study found that sites that load in 5 seconds vs. those loading in 19 seconds exhibit:

25% higher ad viewability
70% longer average sessions
35% lower bounce rates
2X greater mobile ad revenue

Clear collective user statements as the ones in studies like this, together with the technological landscape of the LATAM region, point the attention of developers and organizations towards providing native-like user experiences on the web platform.

Progressive Web Apps

Progressive Web App (PWA) is an umbrella term used to define applications built with modern web technologies, which provide user experiences matching those of native mobile apps. From a developer’s perspective: “A PWA is a model for creating app-like experiences using the latest Web Technologies progressively”. The progressive aspect indicates that the apps will provide progressively-enhanced user experiences as new and more advanced features become available in the platforms they run on, and also that the features and capabilities can be exploited in an incremental manner.

The goal of PWAs is to combine the best of two worlds: mobile web apps and native mobile apps, to deliver mobile web apps that look and feel as if they were actually native apps running on the target device. It important to emphasize that this goal does not mean building native apps using Javascript; instead, it means building improved web experiences for all users using web technologies.

Historically, the world of web development entailed the following strengths and challenges:

Whereas in the world of native apps, the main strengths and historical challenges have been:

PWAs enable the creation of web-based experiences with features and capabilities such as:

PWAs play an important role in LATAM and other emerging markets, as they enable beautiful experiences while minimizing the consumption of resources in limited platforms (storage, bandwidth). And this is true not only for companies in the region; for example, companies like Twitter are developing PWAs for their products allowing users in emerging markets to have an awesome experience despite of the limitations in the technological landscape of the region: “Twitter Lite is a great way for many people in emerging markets across Asia Pacific, Latin America and Africa to experience Twitter for the first time on their mobile devices.” — Twitter blog.

LATAM Case Studies

In the past two years we’ve seen many successful examples of achieving “app-like” experiences (see here a comprehensive list of PWA Case Studies). The example mentioned above, Twitter Lite PWA, offers a great user experience while requiring only 600KB as compared with the 23.5MB required by the Twitter native app, and reducing data consumption by as much as 70% as users scroll through their timelines. Also, at this year’s CDS we had the opportunity to see how companies like Vivanuncios (MX), Terra (BR), OLX, Garbarino and Infobae (AR) have expanded the penetration of PWAs in the region by launching their own PWAs:

For companies like OLX , the UX on their PWA is very similar to the one provided by their native application, including features that not long ago required a native SDKs to achieve them (e.g. fine-grained geolocalization). This is very exciting as it reflects how the evolution of the web platform has reached levels where most of the things that an app can do, can be achieved with modern Web APIs today (see whatwebcando.today, for more details).

There are several examples in LATAM showing the potential in the region for innovation and achieving great results across different market verticals. Below we elaborate on some examples:

It’s well known that soccer is very popular in Brazil (and in Latin America, in general). To keep those eager sport readers coming back to their mobile experience, Terra provided a simple, yet engaging, feature on the mobile web app where, using the capabilities of the Notifications and Push APIs, users can subscribe on their site to their favorite team, and receive real-time soccer stats; and since many of Terra’s users will experience connectivities issues and slow networks, instead of showing a broken experience when a notification is sent, but there is no connectivity (e.g. the infamous Chrome Dinosaur), Terra provides an Offline experience that lets users browse and read recent articles without having to wait until you get a decent connection back.

Infobae, another big News site from Argentina, launched a PWA built from the ground-up, on a subdomain (app.infobae.com) at the beginning of 2017, and after comparing with their Mobile and Desktop experiences, achieved impressive stats: 230% longer sessions and 3X more page views per session than on their previous mobile site. Also, bounce rates decreased considerably from 51% to 5%.

As can be seen in the following chart, their PWA implementation shows remarkable performance improvements, which in some cases improved even upon the performance of their desktop experience:

MercadoLibre, largest e-commerce in the region, with over 190M+ registered, has raised the bar of Mobile Web experiences, by letting users users receive a push notification when the seller of a product responds to their question, without the need of installing the Mobile App. The implementation of this feature has been featuredon this CDS presentation, as “The New Bar of Mobile Web Experiences”.

Garbarino, one of the biggest retailers from Argentina, launched a React-based PWA and observed great performance improvements: +27% increase in conversions; 9% decrease in bounce rate; 35% increase in pageviews per session; and a 13% increase in returning visitors, compared to their previous mobile site. It’s very interesting to see what decisions are involved in this process, which have been very well documented on a recent blog post written by Garbarino’s technical lead. They have also been distinguished in Chrome Dev Summit, as an example of how to achieve reliable connections on the web, in Latam.

Avantrip, a well known travel brand from Argentina, also launched a PWA with the goals of improving performance and offering a better UX on their mobile site. And they succeeded, achieving some impressive results: about 33% reduction on load times; 26% increase in hotel reservations rate; and a 78% increase on flight purchases. Furthermore, they observed a 54% increase on mobile traffic six months after launching the PWA version.

These are just a few examples of what have been observed and what can be achieved in the LATAM region by taking advantage of the power enabled by using Progressive Technologies to build web-based experienced. At the time of this writing, many companies are starting to shift their gears and looking the Web platform as their platform of choice.

Conclusions

The benefits of building applications using modern web technologies in the LATAM region are clear, and the approaches adopted by organizations may vary depending on their reality and needs; some companies have opted to build PWAs from the ground-up, while others have obtained great results by incrementally adding “app-Like” features in small steps to their existing web sites. This means that there’s no need to plan for a big launch, a full site redesign, or major architectural change; you can start right away exploring the capabilities of progressive web technologies and incorporating them into your application progressively.

There are many resources available for you to learn and expand your knowledge. The PWA Instructor Lead Course is a great starting point!

2018 will be a big year for the Mobile Web in Latin America, and the potential of the region to innovate will play an important role in providing awesome experiences for many of the next billion internet users.