Skip to content

Commit

Permalink
update examples page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sylvainpolletvillard
sylvainpolletvillard committed Nov 28, 2023
1 parent 4e8c1c0 commit 0c6ee0c
Show file tree
Hide file tree
Showing 11 changed files with 323 additions and 320 deletions.
8 changes: 7 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
# pwa-cookbook

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
npm run dev
```

### Compiles and minifies for production

```
npm run build
```

### Run your tests

```
npm run test
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "node ./build/deploy.js"
Expand Down
Binary file added public/img/gallery/google-maps.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/gallery/spotify.webp
View file
Binary file not shown.
Binary file added public/img/gallery/starbucks.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/gallery/starbucks.webp
View file
Binary file not shown.
193 changes: 103 additions & 90 deletions public/pages/en/examples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,106 @@

# Examples of Progressive Web Apps

A list of PWA can be found in these links:

- <a target="_blank" href="http://pwa.rocks">PWA.rocks</a>
- <a target="_blank" href="https://pwa-directory.appspot.com">pwa-directory</a>

Here is a selection of PWA among the biggest companies and high traffic websites:

<div class="gallery">
<ul>
<li>
<a href="https://mobile.twitter.com/" target="_blank">
<img src="../img/gallery/twitter-lite.jpg" alt="Twitter Lite">
<p>Twitter Lite</p>
</a>
</li>
<li>
<a href="https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05" target="_blank">
<img src="../img/gallery/pinterest.jpg" alt="Pinterest">
<p>Pinterest</p>
</a>
</li>
<li>
<a href="https://https://developers.google.com/web/showcase/2016/alibaba" target="_blank">
<img src="../img/gallery/alibaba.jpg" alt="Alibaba.com">
<p>Alibaba Express</p>
</a>
</li>
<li>
<a href="https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0" target="_blank">
<img src="../img/gallery/tinder.jpg" alt="Tinder Online">
<p>Tinder</p>
</a>
</li>
<li>
<a href="https://www.flipkart.com/" target="_blank">
<img src="../img/gallery/flipkart.jpg" alt="Flipkart">
<p>Flipkart</p>
</a>
</li>
<li>
<a href="https://www.trivago.com/" target="_blank">
<img src="../img/gallery/trivago.jpg" alt="Trivago">
<p>Trivago</p>
</a>
</li>
<li>
<a href="https://app.ft.com/" target="_blank">
<img src="../img/gallery/financial-times.jpg" alt="Financial Times">
<p>Financial Times</p>
</a>
</li>
<li>
<a href="https://flipboard.com/" target="_blank">
<img src="../img/gallery/flipboard.jpg" alt="Flipboard">
<p>Flipboard</p>
</a>
</li>
<li>
<a href="https://housing.com/" target="_blank">
<img src="../img/gallery/housing.com.jpg" alt="Housing.com">
<p>Housing.com</p>
</a>
</li>
</ul>
</div>

Below, we present a selection of technical demos / show-offs:

<div class="gallery">
<ul>
<li>
<a href="https://paperplanes.world/" target="_blank">
<img src="../img/gallery/paper-planes.jpg" alt="Paper Planes">
<p>Paper Planes</p>
</a>
</li>
<li>
<a href="https://hnpwa.com/" target="_blank">
<img src="../img/gallery/hnpwa.jpg" alt="HNPWA">
<p>HackerNews PWA</p>
</a>
</li>
<li>
<a href="https://deanhume.github.io/beer/" target="_blank">
<img src="../img/gallery/progressive-beer.jpg" alt="Progressive Beer">
<p>Progressive Beer</p>
</a>
</li>
</ul>
</div>
Here is a selection of PWA among the biggest companies and high traffic websites

Source: https://business.adobe.com/blog/basics/progressive-web-app-examples

## Starbucks

<figure><img src="../img/gallery/starbucks.jpg" alt="Starbucks"></figure>

Starbucks used a PWA for its ordering system, which afforded the coffee giant additional functionality that a regular website doesn’t. When accessing the Starbucks PWA, consumers can place their orders, browse the menu, and much more without the hassle of downloading a new mobile app.

One of the big benefits is that this PWA is available offline, meaning customers can browse the menu and add things to their carts even if they don’t have service. When service is restored, they can immediately come back and complete their orders.

PWAs offer a lot of speed. Starbucks customers can place their orders quickly, something that’s important if they’re in a hurry and trying to grab a quick item on the go. PWAs load efficiently and offer a frictionless purchasing experience.

Another perk of PWAs is that they’re smaller than regular apps, so they take up less space on a phone. This makes it more likely that a customer will have room on their device — and keep it there even if they’re low on space.

## Uber

The ride-sharing company also uses a progressive web app. Uber completely rebuilt its original website to replace it with a PWA as part of its efforts to break into new markets. Company leaders realized that the web app needed to mimic the booking experience available through the native mobile app if it wanted to expand its market share.

The primary benefit of the Uber PWA is that it works on slower networks and doesn’t take up much space. This allows more users to interact with the app, even those with limited network and storage resources.

The Uber PWA is so versatile and accessible that it can be accessed via 3G or even 2G networks. Its PWA can accommodate the needs of consumers with low-end devices, as well as those who only use the service periodically and have no interest in installing the native mobile app permanently.

The Uber progressive web app can be downloaded in seconds thanks to its compact file size. By expediting the download process, Uber can reduce bounce rates and prevent potential customers from turning to one of its competitors.

## Pinterest

<figure><img src="../img/gallery/pinterest.jpg" alt="Pinterest"></figure>

Pinterest is a unique social media platform designed to help people share creative ideas, find recipes, plan projects, and more through its user-friendly pinboard format. The original Pinterest app was somewhat lackluster, providing a clunky user experience and failing to adequately translate the pinboard system to a mobile format.

The company completely overhauled its app by rebuilding it with PWA technology. The new app offers a seamless user experience that encourages users to spend more time on the site and strengthens the Pinterest revenue stream.

Progressive web app technology was the perfect fit for Pinterest and its information delivery model. Pinterest users want quick, convenient access to visual content in an easy-to-digest format. The PWA provides all that and more.

Today, Pinterest is thriving, largely thanks to its PWA. The success of its progressive web app reinforces the importance of providing users with a frictionless, fast, and efficient mobile browsing experience.

## Twitter Lite

<figure><img src="../img/gallery/twitter-lite.jpg" alt="Twitter Lite"></figure>

Twitter is known for being a fast-paced social media platform. Users enjoy being able to quickly post a thought or share a concise message with followers, retweet content from their favorite influencers, and join digital conversations about trending topics.

However, Twitter wasn’t always the lightweight, versatile application it is today. Despite the fact that the vast majority of Twitter users access the platform from mobile devices, previous iterations of the app lacked agility and flexibility.

To remedy this shortcoming, Twitter developers replaced the application with a PWA dubbed “Twitter Lite” in 2017. The results were impressive.

Most notably, the platform experienced a 75% increase in tweet volume and a 65% rise in pages per session. Its bounce rate also dropped by 20%. The PWA provided users access to an ideal mix of web and native mobile app features, resulting in an exceptional experience.

Not only was Twitter Lite faster and more feature-laden, but it also used a fraction of the device storage space of its predecessor. According to estimates, Twitter Lite requires less than 5% of the storage space of the standard Twitter for Android app.

## Tinder

<figure><img src="../img/gallery/tinder.jpg" alt="Tinder"></figure>

With more than 75 million global users, Tinder is one of the top-ranked dating apps in the world. The app is the most popular in the United States, with more than 7.8 million active users.

At one time, Tinder was only accessible via mobile devices. However, its progressive web application offers a more seamless user experience, regardless of what device or browser consumers use to access the platform.

As with virtually every other PWA, Tinder’s progressive web app consumes far less data than the native app. This lightweight application not only consumes less space on user devices, but also helps Tinder boost engagement.

Specifically, the company noticed an uptick in overall usage and an increase in average session times. Additionally, Tinder users started sending more messages and editing their profiles more often.

There’s no question that adopting PWA technology has helped Tinder establish itself as the leading dating app.

## Trivago

<figure><img src="../img/gallery/trivago.jpg" alt="Trivago"></figure>

Trivago is one of the world’s largest hotel search engines. While the company already had a strong foothold within its market, much of its traffic originated from mobile devices. This should come as no surprise, as 59% of all web traffic comes from mobile devices.

In 2017, Trivago decided to implement a progressive web app to make its services more accessible. Due to its ability to function offline, the PWA could help users avoid frustrating service disruptions when hopping on an elevator or driving through areas with poor service.

Another perk is that it gives users a chance to try out the platform before downloading. The PWA was made available in 33 languages and can be accessed from 55 different countries.

The response to Trivago’s progressive web app was overwhelming. Since launching its PWA, Trivago experienced a 150% increase in engagement. Conversions skyrocketed by 97%. On top of that, the company found that users returned to the app at least twice in the 14 days after they installed the PWA on their devices.

## Spotify

<figure><img src="../img/gallery/spotify.webp" alt="Pinterest"></figure>

While all of the progressive web apps examples on our list highlight progressive web app success stories, one of the most notable is Spotify. The music-streaming company has thrived since it transitioned to PWA technology. The Spotify PWA is everything users expect from a progressive web application — it’s simple, fast, reliable, and unobtrusive.

Spotify launched its progressive web application in 2019, the same year the streaming platform’s popularity exploded. After deploying its PWA, Spotify experienced a free-to-paid conversion rate of 46%. Just four years prior, its conversion rate was only 26.6%.

Over the next several years, the PWA continued to help Spotify gain traction with its target audience. In 2021, Spotify reported a conversion rate of 58.4%, shattering the old industry record that it set in 2019. The platform also enjoyed a sharp increase in average monthly listening hours and a rise in desktop users.

The question is, what makes Spotify’s progressive web application so appealing to users?

Spotify’s PWA checks all the boxes. It is lightweight, can function offline, provides an immersive user experience, and serves up customized playlists, which it builds based on a consumer’s listening habits.

## Google Maps

<figure><img src="../img/gallery/google-maps.png" alt="Google Maps"></figure>

Google designed a PWA version of its Maps app to function on phones with less bandwidth and computing power.

The PWA, a slimmed-down version of the standard app, offers much of the functionality of its larger counterpart without consuming so much space on a user’s mobile device. As a result, more consumers are able to access the Google Maps platform.

Users can connect with the Google Maps PWA in several ways. Like other progressive web applications, it can be reached by launching a smartphone’s mobile browser. Alternatively, Android users can download the PWA through the Google Play Store.

The primary benefit of developing a Google Maps PWA is that Google was able to reach a much broader audience. Although the PWA doesn’t offer all of the same features as the native mobile app, it does provide precise directions, along with information about businesses like operating hours.
9 changes: 5 additions & 4 deletions public/pages/en/pwa.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<span class="requirements">Prerequisites: none</span>

What is a Progressive Web App (PWA)
============================================
# What is a Progressive Web App (PWA)

*Progressive Web Apps* or *PWA* are **websites** that use modern web capabilities to deliver a **native app-like** user experience.
_Progressive Web Apps_ or _PWA_ are **websites** that use modern web capabilities to deliver a **native app-like** user experience.

In order to achieve that, PWA must enforce a certain number of technical criterion and performance constraints.

Expand All @@ -15,9 +14,11 @@ Like native apps, Progressive Web Apps are:
- **Fast**: the user experience must smooth and animated without any lag
- **Engaging**: the PWA has to behave like a native app and provide to the user a similar feeling

A PWA is mobile-friendly and indexed for SEO just like any modern website. But like apps, PWAs are also installable, available offline, connected to push notifications, and can be tied to location via GPS. In other words, they’re the best of both worlds.

Many large web companies, such as Google, [communicate a lot](https://developers.google.com/web/progressive-web-apps/) about PWA and try to put them in the limelight by [**integrating them more within the platforms**](integration.md), particularly in mobile apps.

-----------------------------------------------------
---

[PWA examples](examples.md)

Expand Down
Loading

0 comments on commit 0c6ee0c

Please sign in to comment.