Tet

Mobile Apps Development

Best Progressive Web Apps Examples over the Past Decade

February 24, 2021

Starbucks, Uber, Twitter, and Instagram have turned to progressive web apps (PWAs) to expand to new markets. Even TikTok did the same thing. So what is it about PWAs that concerns these big companies that much? Let’s review the most outstanding progressive web apps examples to see how they could possibly benefit your business. 

What are Progressive Web Apps (PWAs)?

Back in 2008, when smartphones first hit the scene, they brought with them numerous features that remained unavailable on the web. Those features were offline mode, push notifications, background sync, and access to device-specific resources, namely cameras, GPS, and contacts. The emergence of smartphones paved the way for the rise of native apps in the following years. In case you didn’t know, native apps are programs that people build specifically for a single operating system of mobile devices, using a relevant software development kit (SDK).

The gap between websites and mobile apps

However, any business that intended to launch native apps must face two major drawbacks:

  • First off, the cost for mobile app development and maintenance is several times higher than your budget for a website only. This is especially true when you want to have it compatible with various operating systems, be it iOS or Android. Multiple platforms mean multiple codebases. And efforts need to be duplicated accordingly.
  • You also need to pay twice as much money as the budget for SEO (search engine optimization) because the traffic you get from Google cannot be directly funneled to apps. Apps are not linkable and searchable by search engines, and thus, require you to handle a whole new section called mobile app marketing. 

Due to the aforementioned pitfalls, business leaders who want to cut down the costs often choose web development only. At the beginning of the 2010s, the only way for websites to go along with mobile devices was the use of responsive web design (RWD). But responsive websites left a lot to be desired, in terms of functionality and interactivity, compared with native apps. So we can see that there was a gap between websites and native apps. 

Responsive web design
Responsive web design was once solution to web display on multiple devices (Source: Hubspot Blog)

Nevertheless, web technologies have kept evolving, and mobile devices have become more and more powerful. To this day, websites are able to compete with native apps with a solution called progressive web apps or PWAs.

See also: 5 Compelling Reasons Your Website Should Be Responsive

Definition and Benefits of Progressive Web Apps 

Progressive web apps examples are way easier to find than you might think. Telegram, 9GAG, Dev.to, and Flipboard are progressive web apps. Even the ubiquitous game 2048 is also one of the progressive web apps examples.

To put it short, progressive web apps are powerful mobile websites that offer relatively similar functionality as native mobile apps. PWAs could work offline and enable push notifications thanks to service worker, a script that performs caching background sync. Moreover, PWAs can escape the browsers and appear on your home screen just like native apps thanks to a manifest file that contains its metadata. 

PWAs allow your business to be present on any devices and compatible with any operating systems with only one codebase. And because PWAs are friendly to search engines, your investment in SEO definitely matters in this regard.

See also: Short Guide to Understand Progressive Web Apps in 2021

Successful Progressive Web Apps Examples

To see what progressive web apps look like, let’s go through six case studies of PWAs developed by big brand names.

Starbucks, one of the first progressive web apps examples

Back in 2015, when Starbucks was planning to release a mobile ordering app, their most salient concern was how to reach out to the emerging markets, particularly the rural areas where the internet connection is not always readily available. Starbucks wants their customers to be able to browse the menu, customize their orders, and add items to their carts, with or without wifi. 

progressive web app examples Starbucks
A prompt popped up to ask if you want to have a WPA manifest file on your home screen. (Source: Tigren)

So they called in Formidable, a design and engineering consultancy and open source software organization, to help them build an app that could go offline, and the given solution was a progressive web app.

Now you can easily get access to this PWA (app.starbucks.com) through desktop and mobile browsers, and there will be a prompt asking if you want to install the apps on your device. Just confirm it, and you will immediately have a shortcut of Starbucks PWA on your home screen. 

Uber

Started out as an app for smartphones only, Uber came to realize that it’s a huge disadvantage not to involve desktop users. So in 2017, they released m-uber, a progressive web app that allows all users to request a ride, regardless of network speed and device used.

progressive web apps examples Uber

Visit m.uber.com via any modern browsers, and you can easily use the service without having to download and install the app from the stores. 

This new web booking flow did not only help the company expand to new markets but also proved to be a favorable application thanks to its lightweight and convenience, compared with the native counterpart. According to Uber’s senior product manager Madhur Chadha in a 2019’s blog post, since the release of m-uber, the number of desktop users had made up 30% of total access. 

To get more technical insights, you can check out this article on how Uber engineering team developed m-uber.

Twitter Lite

Announcing the release of Twitter Lite in April 2017, Twitter’s Product Manager Patrick Traughber stated that they initiated this project with somewhat the same reason as that of Starbucks: to promote Twitter usage in emerging markets across the Asia Pacific.

Twitter Lite

This PWA helps do it by getting rid of the barriers such as slow mobile networks, expensive data plans, or lack of storage on mobile devices. Now, it is available at mobile.twitter.com.

Surprisingly, nearly 80% more tweets appeared via Twitter Lite than before via the native app. The bounce rate also saw a decline of 20%. 

See also: Why Google advocates Progressive Web Apps

Instagram

Instagram was first realized as a mobile app, but in order to meet the needs of desktop users, they launched the website (instagram.com) to enables the webview of users’ feeds and profiles, with limited functionality.

After years of demand from Microsoft, this Facebook-own social media released an app for Windows 10. Within the same year, they developed a mobile website to add a “lightweight” version of the explore tab, and this is Instagram’s progressive web app. 

Instagram app on Microsoft Store (source: Windows Central)
Instagram app on Microsoft Store (source: Windows Central)

In 2020, the app on Windows 10 was also updated to a PWA which supports direct messages through desktops, a feature unavailable on the web before. Although Instagram PWA still has a lot of room for improvement to match up with its native counterpart, this shift to PWA signifies Facebook’s intention in reaching users across devices.

Pinterest

Pinterest PWA’s story is a little different from that of Uber or Instagram. While Uber and Instagram started with apps first and went with websites later, Pinterest was originally a website (pinterest.com). One year after the website launch, Pinterest developed its native app on iOS, followed by the versions for other mobile platforms. 

It was not until July 2017 that Pinterest began working on rewriting their website as a PWA when they acknowledged the limitation of the mobile web version: low connectivity and insignificant conversion rate. Due to the complicated process of download, installation, and signup, only a small fraction of mobile web visitors became authenticated users. 

And the numbers after this transformation were pinteresting. Weekly active users on the mobile web increased by 103% on average within one year, and new signups increased by 843%. There was also a surge in engagement, with the number of Pins progressed by 401%, session length by 296%, and the number of users saving Pins on their board by 295%. 

Tinder Online

Another noteworthy progressive web apps example is Tinder Online. This case study is similar to that of Uber. With the ambition to engage desktop users, this online dating app developed its version for web browsers, known as Tinder Online (tinder.com), globally launched in September 2017.  

pwa tinder online

It took 3 months to implement the MVP for this PWA, using React as UI library and Redux for state management. In the early days, Tinder was still iterating on their PWA, but after a while, they started to see positive results from the fruits of their labor.

See also: How Much Does it Cost to Build Apps like Uber, Tinder, and Instagram?

Given all the advantages associated with the above progressive web apps examples, should you turn to PWA, too? Well, this question is indeed not easy to answer. Whether a native app, a hybrid app, a progressive web app, or a responsive website suits your business best depends on who the target audience is, which platform to aim at, and how your prospective customers interact with you. 

In this case, it is advisable to seek help from an expert in the industry. Our professionals at Designveloper, highly skilled in consultancy, can certainly lend you a hand. So do not hesitate to reach out to us at any time. 

Also published on

Share post on

Get in touch

Simply register below to receive our weekly newsletters with the newest blog posts