Progressive web applications: 10 examples of web pages

Progressive web apps, progressive web apps, or simply PWAs, are all the rage. What are progressive web apps? What are their advantages over other systems, such as traditional mobile apps?

First of all, it is important to know the difference between a traditional web app and a mobile app. Based on this difference, I will tell you what a progressive web app is and its advantages.

Web application and mobile application

The applications we use on our devices can be quickly classified into two types: web applications and mobile applications.

Web applications are used through a browser, that is, through web pages. Therefore, we only need a device with an internet connection and a web browser to access and make use of the functionalities of the application in question. Furthermore, depending on the browser we have, we will have access to additional functionalities, such as sharing the page we are visiting directly by email, as many modern browsers allow us to do.

On the other hand, mobile applications need a smartphone or tablet to run them. In addition, we need to install them beforehand through an application platform such as the Store. Depending on the type of device we have, such as Android or iOS, applications can behave in different ways, as well as give us access to specific functionalities. Therefore, the mobile application is linked to the type of device we have.

Progressive web apps, progressive web apps, or simply PWAs, are all the rage. What are progressive web apps? What are their advantages over other systems, such as traditional mobile apps?

First of all, it is important to know the difference between a traditional web app and a mobile app. Based on this difference, I will tell you what a progressive web app is and its advantages.

What are PWAs?

Progressive web applications are basically web pages, but through the use of Service Workers and other technologies they behave more like normal applications than web applications.

Basically, a PWA is a solution based on the traditional web, although it incorporates some particularities that make its aesthetics and operation resemble a native app for cell phones and tablets. They are accessed through a browser, but a shortcut can be anchored on the device. They do not depend on operating systems and incorporate native functionalities of the device.

10 examples of progressive web applications

Many progressive web apps look so much like normal web apps that they won’t even be recognized as PWA’s at times.

A PWA uses less space than a native application, does not need to be installed, can work offline, does not need to be updated… Thanks to all the advantages of a PWA, some companies have decided to opt for it.

Therefore, here are some examples of PWA’s, some of them more or less known.

AliExpress

Although AliExpress has its own native application, there is also the possibility of using it as a PWA. Visiting this AliExpress website is like using any other application or web page, but with the great difference that there is the possibility of making online purchases of everything you find while browsing. This Asian store has one of the best PWA that can be given the use. The platform is very simple, the design is friendly and, best of all, they have 20 points in usability.

Another well-known website is Telegram, one of the few messaging services that has opted for a PWA and has done great. Users who have Telegram do not notice the difference at all of this application in its progressive web format than in its native app format and that is quite an important advantage. Broadcasts, forums, sending files, calls, chat, everything is still intact and very functional.

Dev.to

Dev.to is a popular blogging platform for web developers. Despite its popularity, it is not included in most PWA examples, which is surprising if when it comes to the web app’s high score, with a 100 in progressiveness and 90 in performance.

It is important to know that blogging and news platforms are one of the most difficult web applications to optimize, as they are full of textual and visual information contributed by different users. However, Dev.to has shown that it is still possible for a popular blog to have a high-performing PWA.

Flipboard

Flipboard is the progressive web application for all those who want to be informed about the latest happenings in the world as it is a web application about news and updates. This social network used to be very slow when using it on mobile in native app format, as it is loaded with content; however, its new PWA format works fast and with few resources, so you can browse through it without any kind of problem.

Workopolis

This PWA allows users to search for a job using various filters, according to their convenience. With a fairly simple green/white design and display, the Workopolis user homepage is nothing out of the ordinary, i.e. it is similar to other well-known websites. However, it is attractive and minimalistic and, thanks to that, it follows all usability standards.

In addition to being fully progressive, fast loading and high performance, Workopolis scores high on accessibility, practices used for development and SEO positioning.

Twitter

In 2017, Twitter decided to make a PWA to rejuvenate its technology and offer a faster format. The reason why it was decided to carry out was because it had always been a heavy application that needed a lot of mobile resources to function properly. However, the native app still exists for those who want to continue using it.

The organization, knowing the problem that was occurring, launched a lighter version so that less powerful mobiles can support it and run it correctly: Twitter lite. This progressive web application is everything that many Twitter users were waiting for: it loads videos and images quickly, updates quickly but retains the look and feel of the native app.

2048

This fantastic game of concentration, tactics and intelligence can be enjoyed in a much lighter and less resource-intensive version. The fact that 2048 can be presented in PWA format helps, above all, in battery performance. Thus, it consumes less and has more durability. This progressive web app is an excellent example of what can be achieved with this new version. The game works exactly the same as the native version, is just as easy to use for the user and the only difference is that it does not consume as many resources.

Umbrella

Umbrella is a web about meteorology in which you put your location and it makes a tracking according to the hours of temperature, humidity, clouds… The best thing about this PWA is that the creative design of this application does not hinder the performance, that is, it has a lot of creative content and objects, but it does not slow down the loading time. As you can see from the scores, Umbrella is fully progressive and has a great performance score.

HighTide

HighTide is a Progressive Web Application primarily for use by surfers. The website tracks when and where there are higher or better quality waves so that everyone who wants to surf can have a good experience. Like Umbrella, this progressive web app impresses with its attractive and colorful design. However, the concept of HighTide is not so mundane: this PWA is a smart tide locator for surfing enthusiasts.

Although it has great score according to its progressiveness, the performance is a bit below average, which can be explained by the fact that this web application needs to be interactive. Despite working with location data and having similar functionality to Umbrella, HighTide is slower and should be optimized.

Spotify

This website is well known due to the service it offers to listen to music, podcasts or even videos digitally. In addition, it gives access to millions of songs and content from creators all over the world.

Although it may not look like it, Spotify can be a PWA. It has a very good performance and takes up much less space both on the device’s home screen and on the hard drive or memory. To install this Progressive Web Application, you just need to access the link, click the install button and, thanks to that, the application will display a shortcut to the desktop.

Sometimes, we focus on installing apps and more apps on the desktop or on the homepage of the devices and we are not aware that, most of the websites, have the option and opportunity to install PWA. Also, if you want to know the advantages of progressive web apps keep reading:

Advantages of progressive web applications

Now I can explain the advantages of progressive web apps. As I explained, a progressive web app (PWA) is the sum of a web app and a mobile app, without losing the functionalities that we know of each one.

1- We get web and mobile functionalities, 2×1.

First of all, the main advantage is that we gain access to web and mobile functionalities in the same application. With a PWA, we can serve web and mobile functionalities from the same application, depending on the user’s device. With a progressive web app, we work in the same project with web and mobile aspects.

During development, decisions will be made about the differences between the web and app (mobile) formats, in order to take advantage of both potentials in terms of browser and smartphone functionalities respectively.

2- Push Notifications in PWAs

We are already familiar with push notifications: we receive dozens of them on our smartphone throughout the day. They are the notifications that arrive on our mobile, from the apps we have installed.

With a progressive web app, when we have installed it on our device, it allows us to send push notifications to its users. As I said above, with a PWA we gain access to web and mobile functionalities. Therefore, in this case, we gain access to send push notifications that arrive directly to our mobiles.

3 – More agile development

Understanding that a progressive web application is a hybridization between a web application and a mobile application, which gives us access to both sets of functionalities, developing it is much more agile. For the simple fact that we can create both structures in the same project.

In the same PWA we are working on the web and mobile functionality at the same time. Traditionally, we would do a web project and the app independently, with separate projects.

Therefore, developing a progressive web application is a substantial improvement when it comes to developing a mobile application, since it will start from the web project directly, instead of having to be created separately.

4- Progressive web applications are fast

If we have an agile web application, without heavy resource load, i.e., well optimized in terms of speed, we will find an equally fast PWA.

Progressive web applications, in addition, usually incorporate caching mechanisms to greatly improve load times, improving in many cases those that we can experience with mobile applications that we use on a daily basis.

5- Unified databases

As I keep repeating, a Progressive Web App is a hybridization between a web and mobile application, therefore, from the beginning, we can unify the database. That is, by unifying the two applications, web and mobile, we are also channeling all the information flow through the same channel.

Thus, we can optimize the way we interact with the database, create a robust structure that allows us to serve a progressive web application, in its web and mobile functionality. Same data, unified applications, native web and mobile functionality, what more do you want?

6- No internet connection required to use a Progressive Web App

A very interesting functionality of PWAs is the possibility of serving content when internet access is lost. This is because the application has previously downloaded everything necessary for offline browsing.

Obviously, many features will not be available, but at least we will not get a connection error, as we would get visiting the same application, but in web mode, through a browser. Another example of the differences between a web application and a progressive web application that may interest you to choose this exciting technology.

7- They are safe

In order to download a PWA, your browser, which is the actor that allows you to do so in the first instance, will analyze whether the web application is secure. If so, it will allow you to download the mobile version, i.e. the PWA in its mobile version.

It is therefore essential to take care of web security so that it also prevails in the mobile app version.

8- Directly updated, no need to work with Stores

With a traditional mobile app, the developer has to upload it to the Google and Apple Stores. That is to say, after finishing the development, it must be submitted to these services so that they can distribute it to users. Therefore, from the beginning to each update, they will go through the channels of these platforms.

With a progressive web application, as it resides in symbiosis with the web application, downloading and updating is managed directly, without intermediaries. There is much better control over product versions and how new features are deployed to all users.

9- Google encourages and recommends progressive web applications

The search engine giant is promoting the use of PWAs, being one of the organizations that contribute the most to the development of this hybrid technology.

In fact, in the web analysis that we can perform with Chrome on our website, it already indicates whether or not the website in question supports a PWA type app installation. Who knows, perhaps in the near future this web-app hybridization may lead to improvements in positioning.

10- Cheaper than traditional mobile applications

A traditional mobile app, whether native or hybrid, will most likely be more expensive than hybridizing development with a progressive web app. The reason is the development leverage between web and mobile app when developing a PWA.

With a PWA, the development is hybrid, and as I told you, we can take advantage of this symbiosis to form a single project, instead of two specific projects for web and mobile.