PWAs: what the progressive web apps are and why they are useful

Reading time : 14 minutes

Every day, nearly 45 million people in Italy alone are online – source Audiweb – and more than 75 percent of them connect to the Web via mobile devices; in particular, the online audience from smartphones is represented by more than 39 million users, equal to 90 percent of the population over 18 years old. If we add that some studies note that today 40 percent of purchases are influenced by mobile devices, we well understand that ensuring a smooth user experience on the site from mobile is a crucial goal that can really make a difference. And that’s (also) why PWAs are becoming increasingly important in a shrewd business strategy, gaining preference over native apps.

What the PWAs are and why they are useful

Progressive Web Apps are a hybrid of mobile app and Web site: it is a technology that runs on the browser and does not require downloads from the app store, which contains Web pages just like a site, but at the same time mimics the functionality of a mobile app, a feature that makes it desirable for businesses.

These apps are designed for the everyday user of the site, to whom it also provides many features unique to native apps: thus, they overcome the limitations of sites that lack mobile features that allow them to market properly and interact directly with customers.

In concrete terms-as explained in an article on Google’s thinkwithgoogle, which is pushing hard on the deployment of this technology-PWAs are “a web application that behaves similarly to a native app when used from mobile” and allow the user to “have a faster, smoother experience, just as if they were browsing an app, but without the need to download an app.”

What this means, then, is that thanks to a progressive web app, it is possible to “load site content in advance so that it loads faster, allow the user to add the site to the phone’s home page, and make the content available offline as well.

The main features of PWAs

PWAs are thus offline web applications that have the coverage of the Web and a set of specific features, a meeting point between classic web technologies and modern native applications, which can be viewed directly on the users’ home screen thanks to the high level of technical development and quality achieved.

PWAs have been talked about for several years already, and in particular they were the focus of panels at Google I/O 2016 and then landed in 2018 within the Windows Store as well, reflecting their rapid deployment related to the inherent features and benefits they offer users (and thus sites).

As mentioned, this technology makes it possible to bring together the qualities of classic site fruition from mobile (through browsers) with those of native apps and helps digital developers build integrated and functional platforms for users and businesses.

As the guide points out, then, Progressive Web Apps are built and enhanced with modern APIs to offer advanced functionality, reliability, and installability by reaching anyone, anywhere, and on any device with a single code base.

PWAs are reliable, fast and engaging

There are three distinguishing qualities of Progressive Web Apps that are also key to making a mobile friendly site: reliability, speed, and engagement.
Schema sull'affidabilità delle PWA

  1. The reliability of progressive web apps

PWAs are reliable because they load instantly and also work offline in the event of network instability or on networks with poor connectivity, eventualities that are always possible in mobile browsing; cached resource pre-memorization also means that you do not have to depend entirely on the network for an immediate and reliable user experience.

  1. PWAs are fast

We know how much loading speed matters to a user, and Google reminds us that 53 percent of people “abandon sites that take more than three seconds to load”; that’s not all it takes, because later on the user demands speed, smooth scrolling and fast interfaces.
Le PWA sono più rapide
Progressive web apps are designed precisely to respond quickly to user interactions with smooth animations and good scrolling quality.

  1. PWAs are more engaging for users

The most interesting element of the technology is the one related to engagement: progressive web apps look like native applications on the individual person’s device, do not need a download through digital stores, and help make the user experience truly optimal, including through full screen reading, having a web app manifest file, and sending web push notifications.Le PWA sono coinvolgenti

A hybrid of mobile websites and native apps

To achieve these goals, PWAs rely on some peculiarities, which realize that hybrid form between mobile version of the site and native app: the structure of the progressive web app displayed by the user recalls that of the web page even in offline mode and when the site content is not responding. The main elements are the header, page layout, and an illustration that warns that the page is loading.

By their very nature, then, PWAs are built following the criteria of adaptive and responsive design: thus, the technology ensures that the user can transition from one device to another (desktop, smartphone, tablet) and enjoy from screens of different sizes without affecting quality.

In their essence, Progressive Web Apps are just Web applications: using progressive enhancement, new features are enabled in modern browsers; using service workers and a Web app manifest, the Web application becomes reliable and installable. If the new features are not available, users still get the basic experience.

How Progressive Web Apps work

Let’s delve into the other main features of PWAs, starting with the very term that appears in the name of the technology: they are called progressive because they are based on the principle of progressive enhancement, progressive improvement, which allows optimal use for every user regardless of browser type.

As we said, the user will have the feeling of using a classic mobile app, with the same ease of interaction and the same design (including the icon on the device’s home), but in reality he will be able to count on a much more complete system. The technology of PWAs makes them always up-to-date (thanks in particular to the Service Workers), secure (the HTPPS protocol is used on all content), indexable and searchable on search engines, easily installable (without going through downloading through stores), and shareable via links.

In addition, progressive web apps run on the web, which means greater freedom of design and functionality for the site, and (with prior consent) leverage geolocation services to send users notifications and updates, enhancing the relationship and retention.

Esempio PWA di Pinteres

Advantages of Progressive Web Apps

So there are many benefits of this technology, both for the developer and the users who use it, and now let us try to define in more detail the main advantages of PWAs over mobile websites and native apps. As mentioned, the main feature is that they work even offline and in the absence of an Internet connection, always guaranteeing a fast (generally faster than site) fruition; they are also responsive, cross-platform and adapt to every operating system and display format.

The other benefits stem from their nature: on the display the user sees a PWA icon to use just like a classic app, plus they can receive push notifications and allow access to certain phone features. In addition, there is no real installation to perform: this allows PWAs not to take up much space in the memory of the mobile device, but also not to go through stores for installation. This is especially good for developers, who have more freedom and do not have to submit to the rules of digital application distribution services.

Progressive Web apps, advantages and strengths

It is another insight that better defines what the strengths of a PWA are from a technical point of view, with the premise that its installable and usable by all users, regardless of size or input type.

  1. Performance
  2. Works on all browsers
  3. Responsiveness
  4. Customized online page
  5. It is installable
  6. It is accessible
  7. It is indexable and rankable on Google
  8. It works with any input
  9. Provides context for authorization requests
  10. It follows healthy code best practices

In practice, then, with PWAs, connectivity is not strictly required because the app works offline as it does online; moreover, users can use any preferred browser to access the app before it is installed, and they can use it on screens of any size, with the assurance that all content will be available in any viewport size. Still, all user interactions meet WCAG 2.0 accessibility requirements, and it works equally regardless of input type-mouse, keyboard, stylus, or touch.

Why to use a Progressive Web App

According to Google and the proponents of this technology, the site that provides a progressive web app can achieve a number of positive effects, such as gaining greater user acceptance, experiencing greater engagement and resulting in increased conversions. Poking around online, however, some drawbacks and weaknesses of progressive web apps are also pointed out, such as higher battery consumption (the code is high-level and engages the mobile device more in interpretation), compatibility with iOS systems not always guaranteed, and lack of access to all phone functions.

PWAs have speed and usability as their strengths, and they seem to be highly valued by users: according to some Google data, sites that have implemented this technology have achieved positive results in increased page views per session and conversions, but also technical improvements. In particular, an average reduction of 60 percent in the loading time of a page is reported, which is followed by a drastic decrease, up to 70 percent, in the bandwidth used in browsing (about 500k versus the 20 MB of a classic native app).

The most obvious discriminator between PWAs and web apps is in findability: progressive web apps are provided by the sites themselves, and the browser can signal the user to download the technology and create a link on the device’s home page. As mentioned, PWA pages are then indexable by Google and thus can bring organic traffic to the site, while native apps do not travel on the search engine.

The differences between progressive web apps and native apps

At this point, it becomes inevitable to think about a comparison between PWAs and native apps, two of the main ways to enjoy content from mobile devices (in addition to the simple mobile version of pages): summarizing to the fullest, native apps are perhaps the most appropriate form of delivering a rich experience to users, with good performance and the ability to monetize with cost per download or IAP (In App Purchase) features. On the flip side, however, apps need to be designed specifically according to the target platform (and thus also require a greater investment in development) and need significant use of the device’s hardware capabilities, take up more memory space, do not offer real-time updates, and the proposed content cannot be indexed on Google.

The positive aspects of PWAs for business

In many cases, making a PWA is a more immediate and cost-effective choice than the work of creating a native app, which requires more effort in terms of development and control: in addition to the production process itself (including also enjoyment from various devices and operating systems), there is also the need to provide for periodic updates, manage reviews, attract downloads, and so on.

Presence in an app web store – not just the Play Store on Android or the Apple App Store on iOs, but also the Windows Store, Amazon App Store, and, depending on the purpose of the app and the platform, Samsung Galaxy Store, Apptoid, and F-Droid-doesn’t just give disadvantages, really, because it also offers added value in several respects. For example, access to these stores is governed by strict requirements that prevent the publication of many malicious or low-quality apps, so having an app published on these storefronts can increase a brand’s overall trustworthiness in the eyes of customers. In addition, it is possible that Web stores will promote our app “automatically,” so being featured in an app store can give a boost to sales and a quick way to increase brand awareness.

A less positive aspect, also reasoning on economic aspects, is that the major app stores charge a commission on each sale (including paid apps and in-app purchases) that can be as high as 30 percent: to take the example given by Nick Chasinov on SearchEngineWatch, in 2020 Apple grossed $64 billion from the app store.

Apple e Google, different approach to PWA and apps

This explains the different approach the two Web – and mobile operating system – giants have regarding native and progressive web apps.

On the one hand, there is Apple, which prefers to have granular control over the apps and, no less important, over the possible revenue it earns from them (also confirmed by the recent Fortnite querelle), while on the contrary Google supports PWAs and encourages developers to create and distribute them.

The reason is technical and practical: this technology runs directly on the browser used on the mobile device, and even in this area Google dominates the market thanks to Chrome, which is used by more than 63 percent of mobile Internet users, and furthermore its open source Chromium base allows other browsers to use PWAs.

It was with Chromium that the Mountain View giant-along with Microsoft, Intel, Samsung, among others-also launched Project Fugu, which aims to expand browser capabilities and help Web apps “do everything native apps can do,” while preserving the Web’s key advantages of security, low friction and cross-platform deployment.

PWA or native app, what to choose?

In recent years we have been online more than ever before and even the less digitized part of the population has experienced the services offered via the Web: we have “worked, studied, shopped and even opened bank accounts online and now people are more demanding than ever when browsing online,” and it is precisely the user experience that is one of the key issues now and in the near future.

If we are looking for a tool to reach mobile users and, at the same time, to stand out and gain an edge over the competition, we need to study well the features of PWAs and native apps to understand which is the best way to go and which solution offers the greatest benefits.

Why to prefer Progressive Web Apps

Many observers, such as in this Teknicks article, urge you to consider the advantages of PWAs, which first and foremost require less effort (in terms of time and cost) than native apps.

From a development perspective, native apps are coded to run on smartphones, tablets, and other smart devices based on the operating system and hardware associated with the device, using a platform-specific programming language, including Java, which is the most common language for Android, and Swift or Objective-C for iOS. PWAs, on the other hand, are basically app-style Web sites that can be run within the browser of a Web site or installed directly on the device and accessed like a native app, using CSS, Javascript and HTML just like a site.

This makes the development of a PWA much faster and simpler, because the code base is generally suitable for multiple platforms and devices (which makes development and maintenance easier and less expensive) and thus the same version that can be viewed seamlessly on almost any mobile device Web browser.

Because of this scalability, developing a PWA is a lot cheaper than developing a native app, which usually involves creating versions to fit each device we plan to support (by device type, operating system, screen size, and so on). In addition, app updates can also be confusing or problematic, because it is necessary to first get each update approved by the stores, and then verify that users actually download and update the app.

With PWAs, on the other hand, it is sufficient for users to have a browser and know the URL of the site; therefore, it is much easier to be able to reach a wider audience, with the changes and updates not requiring approval or additional user installation.

The features of progressive web apps for users

Because of their characteristics, PWAs can therefore prove to be very advantageous especially for a small company or startup, because as mentioned they require less development both in terms of time and cost.

However, it is also important to evaluate their effect on users, which may have positive aspects and others less so than native apps.

For example, it is definitely an advantage that PWAs are smaller in size than native apps, and thus weigh less on the memory of users’ devices; also, being accessible directly from browsers or links, people can reach the PWA by typing its URL, but also bookmark the link, add it to the home screen, and share it conveniently.

PWAs then also have offline accessibility, as they can cache information for later use, and serve users with text style sheets, images and other web content even before a web page is fully loaded, as this article by Richa Pokhriyal notes. Also important is adherence to security parameters, because-in addition to moving in an environment governed by the HTTPS protocol-compared to traditional mobile sites, “progressive Web apps provide additional layers of security, using only HTTP cookies/JavaScript readable cookies along with authentication tokens/CSRF.”

However, there are other less beneficial elements, including the inability of a PWA to access some device features such as proximity sensor, ambient light detection or smart lock – while still supporting features such as GPS, mobile payment, push notification, and camera access.

The features of native apps and why to prefer them

In contrast, specific app development is a good choice when the goal is to acquire mobile-only users. These apps are called native because they are written in the language of the operating system of the device on which the app is installed and do not offer access options from a browser.

Compared to mobile sites, an app has fewer limitations and provides a native experience to a user, allowing a brand to reach more customers, improve their experience, and increase brand reputation in the online space.

Investing in a native app means creating a complex product with greater ability to control user operations-and in fact they are widely used for home banking, social media, or dating platforms; this technology must offer a deeper level of consistency across the board and is preferable when creating high-security apps that must handle aspects such as sensitive customer data in areas such as finance, health, or banking.

In addition, a native app improves speed and UI management: loading time, for example, is much faster because it directly uses the device’s operating system and is not at all limited by the quality of the Internet connection or the device’s operating system. And apps make more effective use of the latest smartphone features, such as geofencing, sensor detection, and more.

At the same time, this solution allows us to increase brand credibility, because having a high-quality app published on one of the top stores from Apple, Google, or others will help us increase perceived reliability among customers.

Some reasons to develop a PWA and not a native app

From what has been written, it seems clear that going for a Progressive Web App is a beneficial choice for those doing business online, because it can help achieve certain business goals and improve profits more quickly and less laboriously than the main alternative.

Specifically, there are at least 4 reasons that may convince you to work on developing a PWA instead of a native app.

  1. Speed of connecting with users

Consumers have several options for “browsing news, buying clothes, and watching videos”-if our site doesn’t keep up, users will take their attention and spending power elsewhere.

Studies indicate that the attention span is 2-3 seconds, so it is important to have a fast loading solution, which usually a mobile web page cannot guarantee. In contrast, PWAs use background cache data and offer faster loading speeds, which improves the customer experience each time they visit the page and also pleases Google’s algorithms.

Just to give examples, in years past Forbes’ site took three to 12 seconds to load completely-these delays caused a 53 percent user abandonment rate, but when the company switched to a PWA, browsing sessions increased by 43 percent.

  1. SEO detectability

In addition to ensuring speed (which affects page ranking), PWAs are also SEO-friendly: since they are hosted on the Web, their content is indeed visible to search engines and can be indexed directly on a search engine, just like any website.

Native apps, on the other hand, are published on multiple app stores and must strive to become more visible so that they can be installed more by users; to improve the detectability of apps, owners should have an effective app store optimization strategy, but they are still constrained by the requirements and rules of the stores. Typically, only the app’s profile page is listed in Google search results, and this the companies to rely on the description, images, and positive reviews to improve visibility and get more downloads.

With a PWA, we then have the same unlimited flexibility as a site to create personalized user experiences and optimized resourceful content that can rank on Google and leverage all SEO strategies.

Concretely, this can increase our ability to generate traffic and leads. For example, when Alibaba turned its website into a PWA, it recorded 76 percent more conversions.

  1. More opportunities for engagement

PWAs support push notifications, creating opportunities for companies to reach customers with personalized product recommendations, news updates, and other relevant communications, all of which can improve customer engagement and increase brand loyalty.

Recent studies report that despite the continued increase in the use of mobile devices for browsing, users are not highly engaged on mobile Web sites, and those with a PWA perform better in this regard. Specifically, the average bounce rate for a PWA is 42 percent lower than for a responsive website, while mobile sessions are up to 80 percent higher, loading time reduced by 85 percent, and engagement 154 percent higher.

This translates into better customer engagement and more sales opportunities for a company developing a progressive web app.

  1. Increase of conversions

Closely related to increased engagement is also a maximization of conversions: through a PWA, as mentioned, we can send in-app/push notifications, personalized emails and create engagement on social platforms with mobile marketing tools that increase conversion rates.

Data show that developing such technology helps significantly improve site sales rates, and according to Google, an average PWA increases conversions by 52 percent. Crédit Agricole Italia’s results are even better: in just three months after the development of a PWA, comparing browsing data between “those who install PWA on their smartphones compared to those who browse the site normally,” it shows a 33 percent increase in sessions per user, a 143 percent increase in average session duration, and a 25 percent reduction in bounce rate, but above all a 99 percent higher conversion rate for users with PWA installed.”

Esempio della PWA di Crédit Agricole Italia

When to bet on a PWA

Now that we know (even better) what the main features and functions of a PWA are, we can also understand when we can benefit from choosing this technology and when, on the other hand, it might be better to develop a native app.

This choice should be based on our business goals (improving conversions, traffic and user experience), target audience, budget and recommendations of a web app development company, always within an effective overall mobile marketing strategy.

PWA can become the ideal solution, in particular:

  • If we have an e-Commerce site and want to be able to better engage customers or get new ones, but do not have the resources to develop and maintain multiple apps on different storefronts.
  • If we want our app to reach many people in a very short period of time, in addition to the distribution channels we already leverage, as it is easy to share a URL link or even gain a feature in Google search results.
  • If we are a young company that wants to stimulate user engagement, because it does not require any downloads or installation, but at the same time allows us to interact with customers through features such as push notifications.
  • If we want to integrate and increase website traffic.

More generally, a PWA is a faster and more cost-effective choice than creating an app from scratch, and it is no coincidence that many major brands, including Starbucks, Twitter, and Uber, have focused on PWAs within their web strategy, in addition to native apps, to meet the needs of their users holistically.

Ultimately, if we need an app that is easy to configure and update, versatile, and works on a wide range of devices, then a PWA is probably the right choice because of its scalability and lower cost of entry, as they will allow us to focus our efforts on a single front that prioritizes user experience, instead of wasting energy on multiple native apps designed for different operating systems, with limited visibility on search engines.