The concept of PWAs (Progressive Web Apps) is not new. It has been around since 2015, when Google introduced this new form of web experience on mobile devices. In the past few years, PWAs have gained strength and more people are betting on this idea. But, what are PWAs exactly? A Progressive Web App is a web app that uses modern browser features to provide users with an experience similar to a native application. These apps are hosted on servers, accessible by URLs and indexed by search engines. According to Google, PWAs should be:
Reliable
When it is opened in a userās home screen, a Progressive Web App loads instantly, regardless of the state of the network, and never shows the downasaur, even under uncertain network conditions. As the main features of the PWA are pre-stored in cache, it is able to eliminate dependency on the network, ensuring an instant and reliable experience for its users.
Fast
About 53% of users leave a website if it takes more than 3 seconds to load. Once they have loaded, users expect websites to be fast, without irregular scrolling or slow response in their interfaces. Most websites load all files and images (which are usually the heaviest) when accessed for the first time and this ends up impacting usersā experience, since they have to wait for the end of this process to start interacting with the website.
For this reason, a PWA should not only open quickly when accessed, but should also have a short response time on its interfaces, to reduce what is called Time to Interactive (TTI), loading files and making calls to other resources and sources only when really necessary.
Engaging
PWAs should make users feel like they are in a native app. Progressive Web Apps can be installed and stay on the userās home screen, without the need for an app store. They offer an immersive, full-screen experience and can even re-engage users with Push Notifications.
Is the āMobile App Eraā ending?
The mobile app boom that began in July 2008, when Apple launched the App Store, is no longer the same. Many companies know how difficult and costly it is to get people to download their apps. Have you ever stopped to think about how many apps from the App Store or Play Store you download each month?
According to The State of Mobile 2019, from App Annie, in terms of time of use, the most used apps in 2018 were communication and social networking apps, responsible for 50% of the time spent on apps globally. They were followed by video players and editors (15%) and games (10%). According to Statista, 96% of usersā time is spent on 10 applications. Of that 96%, most of the time is used in up to 3 apps.
Source: https://www.statista.com/chart/3835/top-10-app-usage/
Given this scenario, it becomes increasingly important to understand how users relate to apps, to identify aspects of user experience that can be improved, not only in the original apps themselves, but to make suggestions and to use in other options.
User retention
Retention is a measure of the percentage of users who return to an app sometime after its purchase. For apps, retention is assessed by the number of users who continue to use an application, for example, one, two or three months after its download. Turnover is the opposite, measuring the percentage of people who do not return to a product or service after a certain period of time, migrating to other options in the market.
According to data from Localytics, 43% of users continue using apps a month after downloading them, which means that 29% of users generate turnover and are no longer using those apps after a month. Things get worse as time goes by, reaching an average of 71% churning rate in the 3rd month.
Source: https://www.localytics.com/lp/cheat-sheet-overall-app-benchmarks-h2-2018/
Retention can also be more thorough, being measured by how many users return to an app in a specific number of days after its download. About 24.9% of users revisit apps one day after downloading them, while only 9.4% of users revisit apps two weeks after their download.
Source: https://www.localytics.com/lp/cheat-sheet-overall-app-benchmarks-h2-2018/
Therefore, just having an app in stores does not mean that people will use it or even download it. In the world of native apps ā in which large user bases, traffic, among other points, are necessary for monetization ā however wonderful a new application idea may be, it costs more and more advertising and promotion to reach a critical mass and generate revenue efficiently.
What is the difference between developing a native app and a PWA?
Building native apps can be a very expensive solution for some companies, as it requires the maintenance of two software development teams, one for Android and the other for iOS. As it is necessary to ensure that both versions of the app are up to date, developing new features can greatly impact the productivity of a team or a company.
Since all that is needed in order to develop a PWA are web technologies, there is no need for multiple teams with expertise in different operating systems. For iOS apps, it is still necessary to go through Appleās review with each new version. On the other hand, a PWA is hosted on a server and accessed through an address in the browsers bar. Therefore, it doesnāt need Appleās approval and doesnāt have to have its new versions sent to app stores.
On Android, Googleās Play Store already supports the publication of PWAs, which brings many benefits and makes usersā experience better, as if they were using a real installed app.
Thus, for the development of PWAs, it is only necessary to have knowledge in web technologies (there are several options between frameworks and libraries) to serve users of practically all platforms, without having to be an expert in each userās preferred operating system.
Another important aspect to be considered when developing apps and PWAs is the space needed to install them on a hard drive. A growing trend are cloud-based services and Software as a Service (SaaS) models delivered by browsers instead of installed software. Today, we already have many well-established SaaS, such as Netflix and Spotify, which also serve app users. However, the idea of a SaaS is that all that is needed for the experience is an Internet connection.
The aim of a SaaS is to be able to be accessed from any device, anywhere. This concept is very similar to the principles and characteristics of PWAs. As PWAs are an option that considers both the reduction of space on the hard disk needed for an app, the reduction of data needed for it to work, and also have offline versions that make them less dependent on an internet network, they can be a means to achieve a SaaS that is even more accessible and independent.
Checklist
There is a list of items and features created by Google that define what is expected of a PWA:
- Progressive: made for any user, regardless of their preferred browser;
- Responsive: made for any device (desktop, tablet or mobile);
- Connectivity-independent: works even if the user is offline;
- App-like: the user should feel as if they are in a native app;
- Fresh: no need to download updates from the application, the browser will simply detect a new version and update it automatically if necessary;
- Safe: done only with HTTPS (Hyper Text Transfer Protocol Secure), seeking to ensure that the domain or address is verified;
- Re-engeable: through Push Notifications, the user can be constantly engaged;
- Installable: an icon can be added to the main work area of a smartphone and desktop with just one click; Thus, while there are many things that can lead a baseline PWA to a good experience, the checklist provided by Google can help teams to create the best possible experiences for users. The list includes, according to them, all the things that are needed for a baseline PWA and how to take it a step further and provide fantastic usability by thinking about users, the (often limited) conditions they may have and not the platform itself. One tool that can help a lot during the development of PWAs is Lighthouse, also created by Google. Initially, the tool was designed to audit PWAs, but its main goal is to assist in improving all aspects of a Web App. It can be run via terminal or installed in Chrome as an extension. The tool applies tests to a website, offering tips, suggestions and possible solutions in 5 different aspcts: Performance, Accessibility, Best Practices, SEO (Search Engine Optimization) and PWA.
These 5 different categories in Lighthouse seek to identify, according to metrics studied by Google, what are the scores of a website or PWA according to these studies. This directly impacts the ranking or position of the site when a user searches on Google, because the search algorithm also takes this ranking into account.
Limitations with respect to native applications
A downside to PWAs is that they do not yet have full control over the hardware of the device on which they are installed. Bluetooth, contact list and Near Field Communication (NFC) are some examples of features that canāt be accessed by PWAs yet (access https://whatwebcando.today to see more limitations).
Another point is that while Google, Microsoft and Mozilla are betting high on this new approach, Apple is not focused on it yet. In iOS 11.3 of Appleās mobile operating system, support has been added to the basic set of new technologies behind the idea of Progressive Web Apps (see more here https://firt.dev/notes/pwa-ios/). However, there is still a lot to be implemented and corrected to provide the user experience that is expected from a real PWA. Apple doesnāt seem to be in a hurry to implement full support for these apps ā for example, one of the basic points that isnāt yet supported on iOS, but not mandatory in the PWAs, is the option of sending Push Notifications. Still, even if Apple doesnāt fully adopt PWAs, theyāre already a reality and are all around us with remarkable results, some examples of which weāll explore next.
Case Studies
Below, we can see some of the big companies in the world that have already adopted PWAs and the results they have brought to these companies:
Tinder
URL:https://tinder.com/?lang=pt-BR
Tinder PWA, the relationship app, developed its own PWA in about 3 months. While the Tinder Android app requires 30 MB of space, its PWA version offers the main Tinder experience at a data cost of 2.8 MB. The PWA also appears to encourage more activity from users. Compared to users of the native app, PWA users swipe more, send more messages and use the app for longer periods of time.
Uber
URL: https://m.uber.com
Uber needed an app that could be used by anyone, regardless of the speed of their network or device. Its solution was to develop a PWA that mimics its native features in functionality, but that had a significantly smaller MB size of stored data. Using small libraries and SVGs (Scalable Vector Graphics) instead of images where possible, Uberās Progressive Web App is just 50 KB and loads in less than three seconds even on 2G networks!
URL: https://mobile.twitter.com/
Although smartphone adoption had grown to 3.8 billion connections by the end of 2016, 45% of mobile connections are still on slower 2G networks, according to the GSMA (Global System for Mobile Communications Association), a trade body that represents the interests of mobile network operators worldwide. With Twitter Lite ā the PWA version of Twitter, a social networking app ā it is possible to preview images and videos before choosing which ones to upload fully. This reduces data usage by up to 70%, turning Twitter more accessible in areas where mobile data is expensive.
iFood
URL: https://www.ifood.com.br/pwa
iFood, a Brazilian food delivery app, also recently launched its PWA. This version occupies only 280 KB on Android, but does not include notifications about the status of orders and coupons ā although the iFood team is already working on it, according to the app.
Top comments (1)
I'm really interested in progressive web apps and their potential in the future.