PWA: What it is and why you should try it

George Bibilashvili's photo
George Bibilashvili
Posted 2023-01-20 · 10 min

The percentage of global web traffic on mobile phones has surged over the past decade. As of November 2022, 60.28 percent of all web traffic came through mobile phones. Providing a good mobile user experience is therefore crucial to attract and retain users.

Mobile applications do this well, but for some, it's not always an affordable option.

Let's say you want to build an application that is available on browsers as a web application, and on mobile devices as a mobile app.

In this case, there are actually 3 options to choose from for building mobile applications:

1. Native apps

2. Hybrid apps

3. PWA - Progressive Web Applications

In this post, we'll touch each of these options, but pay particular attention to Progressive Web Applications and why you should consider them.

Native apps

Native apps are written in code languages specific to the particular operating system that they are developed for: Kotlin for Android and Swift for iOS.

These applications can fully benefit from their native features and easily integrate with the entire ecosystem, but the downside is the cost.

The resources needed to achieve this streamlined integration are too costly for some businesses. Other points to note include:

  • Native apps take longer to develop.
  • It is more expensive to have apps simultaneously on iOS and Android.
  • Adding new features requires separate codebases.
  • You will likely need a bigger team of specialists to work with native languages.
  • The apps require regular updates and maintenance to be submitted to app stores, which can be time-consuming and costly.

Hybrid app development

Hybrid app development combines elements of both native and web apps. They allow developers to code in one single language that can run in different operating systems.

Let's take React Native, Ionic, and Native Script as examples. These are written using web technologies (JavaScript, HTML, and CSS).

In terms of time and cost saving, it is more efficient to use a hybrid app rather than native - but that's not to say hybrid doesn't have its pitfalls.

  • Development complexity: React Native apps require a deep understanding of both React and the native platform being targeted.
  • Limited browser support: Apps are limited to running on iOS and Android. You cannot access content from the browser.
  • Hybrid apps may also have limited access to native device features, requiring additional development workarounds.

The powerful solution for web and mobile


Native and hybrid apps (thankfully) are no longer the only option.

For greater efficiency, lower cost and better user experience, there's another key player when it comes to web app development.

Introducing to you: PWAs.

What is a PWA?

A Progressive Web Application (PWA) is type of web app that can operate both as a web page and mobile app on any device.

Using standard technologies, PWA is aimed at delivering native-like user experience, with speedier conversion and cleaner browsing - even with a poor Internet connection.

PWAs are written in JavaScript, CSS, and HTML. On the browser, they look and behave just like regular web pages; on mobile devices they also deliver functionalities identical to those provided by mobile apps.

They are fast, can work offline, send push notifications, and use some features of user devices.

Why you should consider PWAs

Enter the mobile market, fast

Progressive Web Apps are the simplest and most efficient solution when it comes to making your mark in the mobile world. They are built with the most standard web technologies and can be set up relatively quickly.

What’s more, with PWAs you don’t need to develop two separate apps for iOS and Android, as it works on all kinds of devices.

Lower development cost

Using PWAs could mean significant cost savings.

Native apps are developed with the programming languages of each platform (Objective-C and Swift for iOS, and Java for Android), whereas PWA uses HTML, CSS, and JavaScript.

This means that you do not need to manage multiple teams for each platform - with one project price, you can deliver both the web and mobile experiences for users.


Combined web and app features

PWAs can be used as an app and as a website. This means that the features of the browser and the device on which the PWA is visited can be used. For example, the camera, push notifications (on Android for now) or GPS.

PWAs can also be made visible as an app icon on the user’s phone screen.


No app updates

Because the PWA is connected to the web, there are no app updates required. This ensures that the user (if connected to the Internet) can always work with the most up-to-date version of the app.

Even when you add new features in your application, they will be available without application updates on user's mobile devices.


Easy offline use

PWAs can partly be used offline, which has a hugely positive effect on user experience.

Users will no longer need to load the entire app every time they use it.


Google ranking opportunities

Progressive Web Apps (PWAs) can be indexed by search engines like Google and can rank in search results.

This is because PWAs are treated as regular web pages by search engines, so their ranking is determined by the same factors that affect the ranking of any other web page.

More affordable overall

Progressive Web Apps (PWAs) can be more affordable than native apps because they do not require separate development for different platforms, such as iOS and Android.

This can lead to cost savings in terms of development time and resources. Additionally, PWAs do not necessarily need to be submitted to app stores (they can be installed from the browser) and therefore do not incur fees or commissions associated with those stores.

They can also be submitted to app stores like Apple's App Store or the Google Play Store.

Examples of live PWAs

MatchCards

Match Cards is a fun matching cards game built by Tinloof to train your memory.

The game is available on the browser via https://match.cards.

You can also install this game like any other native mobile application and use it in offline mode without connection.

It provides native-like user experience and is available on any type of mobile device sizes.

Pinterest

Pinterest is a company that has implemented a Progressive Web App (PWA) to provide a more efficient and cost-effective mobile experience for its users.

The PWA version of the site, called Pinterest Lite, is designed to be fast and lightweight, making it ideal for users with limited data plans or slower internet connections.

Twitter

Twitter is another company that has implemented a Progressive Web App (PWA) to improve the mobile experience for its users. Twitter's PWA is a great example of how companies can use PWAs to improve the mobile experience for their users, while also achieving cost savings in terms of development and maintenance.

Forbes

Forbes, a well-known media company, decided to launch a Progressive Web App (PWA) to enhance the mobile experience for its readers.

The PWA version of Forbes' site, called Forbes PWA, is designed to be quick and lightweight, making it perfect for users with slower Internet connections or limited data plans.

Trivago

Trivago PWA was a strategic move for the company, as it allowed them to reach a wider audience and provide an improved mobile experience for users.

Prior to the launch of the PWA, many users were frustrated with the slow loading times and lack of functionality on the mobile website.

The PWA addressed these issues by providing a fast, reliable, and seamless experience for users.

Building a PWA with Tinloof

Looking for more expert advice around building fast and cost-effective web pages and apps?

Get in touch with Tinloof directly to discuss your project.

Frequently asked questions

What tech stack do you use to build PWAs?

The main tech stack what we are using to build PWAs consists of a React framework called Remix, and a headless CMS called Sanity, to control the content of the PWA.

How do you publish PWAs?

We use PWABuilder to package a PWA for both iOS and Android.

Apps feel like native ones, and are available on stores and installable.

How to test if a web app is a PWA?

Lighthouse can be used to evaluate if a web application is a ready PWA.

It's available on all Chrome browsers and provides hints on how to improve the PWA support of an application.

Recent articles

What is a frontend developer?

When you visit any website, what you are greeted by as a user is the website's frontend. The frontend of a website is essentially anything the user can see and interact with. Text,...
Omar Benseddik's photo
Omar Benseddik
2022-10-26 · 8 min