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 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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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, 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 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.
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.
We use PWABuilder to package a PWA for both iOS and Android.
Apps feel like native ones, and are available on stores and installable.
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.
