# Introduction to Progressive Web Apps

Progressive Web Apps, introduced by Google, eagerly approved by Microsoft and reluctantly adopted by Apple, are gaining massive popularity among global leaders of online technologies. Companies such as Pinterest, Aliexpress, Trivago, OLX and Forbes, which have already field-tested the abilities of PWA technology to boost user engagement, proved that it is the best answer to the challenges of the mobile world.

Sign up for updates on The PWA Book ⭐️

Table of content

  • What are Progressive Web Apps?
  • How to understand the term PWA?
  • Native vs. Cross-Platform Apps vs. PWA
  • Characteristics of Progressive Web Apps
    • PWAs are fast
    • PWAs are reliable
    • PWAs are engaging
  • Key advantages of Progressive Web Apps

# What are Progressive Web Apps

A Progressive Web App is a type of web application which can be used as a web page and mobile app on any given device. PWAs are created by fulfilling the majority of requirements listed in Google's checklist, after which a Progressive Web Application is fast, reliable and engaging.

The general idea of Progressive Web Apps is quite easy to display. They are apps written in web technologies (JavaScript, CSS, HTML) that look and behave just like regular web pages. They are visible in Search Engine Page Results and linkable, but offer similar functionalities to native mobile apps: they work offline, can send push notifications and use device hardware the same way as native apps.

PWAs seem to be a modern fusion between the mobile and desktop worlds but - since the term doesn't suggest any particular implementation - it may be challenging to craft a dictionary definition of them. And Google, the godfather of PWA technology, doesn't help.

Google's official introduction says:

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

PWA is fast, reliable and engaging

# How to understand the term PWA

According to Google, the PWA standard is an approach focused on the user experience, but the rest of its definition intensifies confusion. When is a website fast and engaging enough to call it a PWA? Is it crucial to install it on the user's home screen? Or maybe it is all about the immersive full-screen experience? In short: what exactly makes a web app, a Progressive Web App?

Google, probably deliberately, doesn't provide a clear definition of Progressive Web Apps. The idea of an open web seems to conflict with a strong standard defined by a central player on the market. And the giant can't allow for the suspicion that PWAs - introduced by the team from Mountain View - force web owners to use Google’s own standards, technologies or implementation methods. Pointing out a general direction or - better put - a general philosophy to building online touchpoints is a safer choice than forcing a specific method of making them.

Therefore, Google introduced the PWA standard and delivered Lighthouse – an open-source tool that enables developers to audit a web app for PWA features.

💡

Lighthouse, an open-source, automated tool for improving the quality of your Progressive Web Apps, eliminates much of the manual testing that was previously required.

You can check your eCommerce site with the Lighthouse tool in terms of PWA compliance, and also performance, accessibility and best practices.

The general idea is that a Progressive Web App meets the expectations of mobile users who demand the app be easy to use no matter what the external circumstances, but, to qualify as a PWA, the application must meet most (75% compliance is required) of the points in the PWA checklist.

# Native vs. Cross-Platform Apps vs. PWA

Neither PWAs nor native apps are the only way to create a smooth cross-platform user experience. With tools like React Native, Native Scripts, Flutter or Ionic, there is a third way: hybrid apps.

These modern frameworks allow building apps that provide almost-native performance but without the necessity of writing three different code bases. Developers write the application once, and it is available on three operating systems. For native apps, there is a need to use Objective-C (iOS), Java (Android) and - in the old days - C# (Windows Phone). Therefore, the cross-platform approach is less time-consuming, and the costs of writing a hybrid are incomparably lower.

A well-written and optimized cross-platform app should not differ from a native application but in more complex projects, like games or expanded programs, it may be visibly slower or even suffer from serious lag. It is also difficult to support Android-specific or iPhone-specific functionalities with hybrids.

Hybrid apps can be a reasonable choice, especially when the project is relatively modest and the budget limited. In the other case, a native app will be a better option. They are written in languages specific to Android (Java) and iOS (Swift or Objective-C), which guarantee the best possible performance and compatibility with the smartphone's functionalities. Unfortunately, it also means that development takes more time and money. Not to mention that an app is a lot harder to distribute and to update.

PWAs are the latest trend in the IT world and there is a good chance that they will take the place of native and hybrid apps. They are incredibly fast, in contrast to hybrid apps, and they use a single code base between platforms, unlike native apps.

Another notable advantage of Progressive Web Apps is the significantly lower cost of development and the shorter time-to-market. But the list of PWA benefits doesn't end there.

# Characteristics of Progressive Web Apps

# PWAs are fast

Site speed is crucial for every online business, no matter if it is a store or a news site. Online - primarily mobile - consumers are very impatient. Half of mobile visits are abandoned if the loading of the page takes more than three seconds.

For every second delay in mobile page load, conversion can fall by up to 20% - Google

"The State of Online Retail Performance" published by Google, every second of delay causes the loss of a client. Losses can be up to 20% in all possible conversions.

Impact of page load times on conversion rates for desktop and mobile and tablet

source: The State of Online Retail Performance 2017. Holiday Retrospective.

Conversion rates are directly related to page load time, which forces brands to optimize their web sites for speed and efficiency. PWAs guarantee both. Once loaded, they react to users' behavior smoothly, without the need to be reloaded.

# PWAs are reliable

The reliability of Progressive Web Apps is based on their independence from an internet connection. A PWA can work offline, providing a stable experience no matter the quality of the connection. It allows users to stay engaged as long as they want; they can continue browsing a product catalog, or even add items to a cart, without an internet connection.

# PWAs are engaging

A PWA has access to the device's features, which makes it able to enrich the user experience and avoid problems with re-engagement. Moreover, PWAs are conveniently accessible directly from a browser and easy to pin to the user’s home screen. Brands can send their consumers push notifications with special and real-time offers, updates, and reminders of cart abandonments, which increases customers’ loyalty.

Check out available PWA development services 🔍

# Key advantages of Progressive Web Apps

These three characteristics translate to multiple advantages for anyone working with or using Progressive Web Apps. Regardless of whether we talk about benefits for users, developers or businesses, everyone wins with PWAs:

  • Mobile-first approach. PWAs are the direct answer to mobile users’ needs and allow businesses to build web solutions that first and foremost work excellently on mobile devices.

  • All in one. With a PWA, it is possible to develop a web page and app at the same time with lower costs and a shorter time-to-market. On the other hand, users don’t have to visit app stores to get the app; they can install it directly from the browser.

  • Short loading times. PWAs load 2-3 times faster than responsive web pages, so users don’t get annoyed with loading bars and get instantly engaged.

  • Native-like UX. Push notifications, icon on the homepage and offline access are some of the native app features that come with PWAs.

  • Offline capacity. A lot of customers suffer from low internet connectivity. A PWA allows them to continue browsing without obstacles. a PWA’s offline readiness also supports traffic peaks on Black Fridays.

  • SEO-friendliness. A PWA can be optimized according to Google’s guidelines and indexed by Googlebot, which makes a PWA the right choice for many.

Some business factors are, however, also worth noting. With Progressive Web Apps, developers can focus on one project which supports all operating systems and browsers, instead of building apps for individual devices.

This approach is more comfortable than covering all marketing channels with separate online services, although it comes with some design and business challenges.

Jump to the chapter 4 to learn more about the benefits of PWAs for users, businesses and developers.

# Methods of incorporating a PWA solution

A PWA, as a "progressive" standard, doesn't require the implementation of every single feature from the checklist (as mentioned, 75% is enough). The aim is to push developers to make better apps for their users, and so there is no one, universal way to turn a site into a PWA. Therefore, Progressive Web Apps can be developed independently, from scratch or by using ready-to-use solutions. Frameworks like Vue Storefront, PWA Studio, or others can significantly reduce the time and costs of PWA implementation.

The first approach relies heavily on the work of in-house front-end developers. Turning a simple website or a small store into a PWA includes two main steps: adding a Web App Manifest, a Service Worker, and after that, QA with a PWA checklist. The process requires, however, in-depth knowledge of JavaScript, HTML, and CSS. If we are dealing with small entities and not planning to use the full potential of PWA, it can be done.

The level of difficulty increases with the complexity of the project. For eCommerce brands with multiple sites or marketplaces, the process of converting sites into PWAs may cause severe challenges. Moreover, the eventual downtime cost may be too high to risk. To avoid any unpleasant surprises, eCommerce companies often cautiously decide to reach for PWA solutions that are already proved in the market. This approach can be 75% cheaper than building a PWA independently, ensures a time to market as low as 2-3 months, and generate a positive ROI after 4-9 months. It requires some initial investment and collaboration with a partner that guarantees a seamless implementation. But in general, it is a far cry safer and more profitable than building a PWA from scratch.

Learn more about the history of the PWA standard, its evolution in the mobile-first world, and PWA for eCommerce.

Go to another chapter and learn more about the history of the PWA standard.

Go back to The PWA Book main page >