What Is a Progressive Web App? A Full Guide to PWA

9576 Views
|
30 Sep 2020
|
11 min
author avatar
Maria D.
Business Analyst
author avatar
Kostya G.
AWS Certified Engineer

Every company these days has a website, sometimes with a native app to give users a choice. Native apps do a lot for user engagement—launch fast, work well, remain available offline.

But native app development costs a lot, too.

As it turns out, you can get a little bit of native-app-like functionality at a lower cost. That’s what progressive web apps (PWA) are for.

In this guide, we’re explaining ‘what is a PWA website’, how it is different from a regular one, and why PWA may be a good tool for your business.

Table of contents

What's a Progressive Web App?

A progressive web app is basically a website with additional benefits for mobile devices. These PWA benefits include push notifications, offline access, an option to install a progressive app to the home screen of your device, and a few more.

PWAs were introduced by Google in 2015, first available only for Android users. In March 2018, PWAs finally became available on iOS 11.3.

Here's how Alex Russell, a Google’s engineer who came up with the term, explains it:

Alex Russell
“PWAs are just websites that took all the right vitamins”

Just like websites, PWAs are written in ‘ web languages’—HTML, CSS, and JavaScript. That makes it possible to launch a PWA in different browsers on desktops, laptops, and mobile devices.

In a desktop browser a PWA looks like a regular website. But when the user opens it on a mobile one, the site becomes the hybrid of a website and a native app.

Here’s how a PWA works:

  1. When a user goes to the PWA site, they see a pop-up asking to install the app on their phones.
Adding Starbucks PWA

One of the major benefits of PWA—an option to add it to the home screen

  1. Once users install the PWA, the app icon will be added to the home screen or launcher.
  2. When users open the PWA, the webpage will open in a separate window rather than a new tab.
How a PWA works on Android

Starbucks’ PWA: how it works on Android

After installation, PWAs create a site cache. This increases the loading speed and makes the site available offline.

On Android, a PWA can do almost anything a native app can. That even includes fingerprint authentication, payment, NFC, vibration, speech recognition, and many more.

What a PWA can do

You can check the features available in your browser on whatpwacando.today

Our web developers rarely have issues with PWAs on Android devices. The thing is, if the app needs access to devices' features, you’ll have to use extra APIs—NFC API, Geolocation API, Bluetooth API, and so on.

Same if you want to publish the PWA to Google Play. You’ll have to use additional tools like PWABuilder.

The situation is a bit different for iOS, though. Progressive web apps vs. native iOS applications don’t get as much support from Apple. For example, PWA’s push notifications don’t work in Safari.

This doesn't mean progressive apps don't work on iOS. They do, and they are great.

What else progressive web apps are capable of:

  • You can add them to the home screen in one click (without App Store/Google Play)
  • Load fast, work offline, and send push notification
  • Sync in the background when the PWA is opened
  • Offer full-screen user experience without the URLs
  • Served via HTTPS to protect the security and privacy of its users

Сompanies that already adopted the PWA technology:

  • Uber
  • Starbucks
  • Google Developers
  • Pinterest
  • Twitter
  • The Financial Times
  • The Washington Post
  • Forbes
Companies that adopted PWA

Companies who realized the advantages of progressive web apps

PWA Advantages for Businesses and Users

One of the main progressive web app advantages is its cost. Turning a website into a PWA is faster and cheaper than making a native application. And users still have your website’s icon on their home screen, enjoy fast loading, offline access, and get push notifications.

In case you already have an adaptive website (or plan to build one), it may be a good idea to extend it with a PWA.

Progressive Web Apps: Benefits for Businesses

Can be installed without app marketplaces

PWAs are not in the Google Play or App Store market. This means you don’t need Apple’s or Google’s approval to get into users’ pockets or release an update. As well as there’s no need to pay 30% commission to app marketplaces.

PWA is faster to develop

Developers don’t spend time building apps for multiple platforms. Or adapting them with the native code, if we’re talking about cross-platform development with Flutter or React Native.

Why use PWA? Because it runs well on Android and iOS, fits various devices, and many functions of native apps can be achieved on Android by PWA.

!

Learn more about cross-platform development with Flutter (and how it cuts the costs).

Send push notifications to users

For example, with Google Duo PWA (a video calling app) installed, you will get a notification to accept the call when someone calls you on Duo. Push notifications are available on Windows, macOS (not Safari), Linux, and ChromeOS.

Google Duo PWA push notifications

Progressive web application benefits: push notifications on ChromeOS

Easier to release updates

PWA users don't update the app each time developers release a new version. They always have access to up-to-date solutions.

This lets companies get rid of a problem called software fragmentation. Previously, they had to maintain old versions of apps or risk losing users until they started the update.

Benefits of Progressive Web Apps for Users

PWAs load fast

As a PWA works with local cache, it sends fewer server requests, which leads to better performance. Even if a user has an extremely slow internet connection, operations with local cache are processed much faster than usual.

By the way, fast loading is one of the core requirements of a PWA.

PWAs are lightweight

There's no point in keeping a 100MB app on a device when a PWA is much lighter (less than 1MB on average). PWAs are perfect for online shopping, ticket booking, or food ordering. They weigh less, and users still take advantage of push notifications when the order's up.

Website remains available offline

Regular websites or web apps don't show any content if the connection is limited. Or if there’s no connection at all. PWAs, as well as mobile apps, are self-contained, and they can be used offline.

Starbucks PWA how it works offline

How a PWA works offline

PWA is faster to install

Just compare. Here’s the general process of installing a PWA vs. native app.

To install a native app:

  1. Go to App Store or Google Play
  2. Search for the app
  3. Click on “Install”
  4. Accept various authorizations
  5. Open and launch the app

While PWA installation includes:

  1. Visiting the site
  2. Adding the site to the device home screen
  3. Opening and using the app

Of course, there are both pros and cons of progressive web apps. No matter how progressive they are, PWAs remain websites at their core. For example, it’s quite convenient to share a PWA via URL but it requires the connection, which drains a device battery faster than a native app.

PWAs offer fewer features than native apps, and they don’t get much support from Apple as the company focuses on native apps.

It can be partially compensated with Google’s and Microsoft’s support. These companies are pushing PWAs extensively. Google even allows progressive apps to be packaged as Android apps and distributed on Google Play.

Finally, PWA implementation shows great results for businesses. You can see more successful cases on pwastats.com.

PWA successful cases

PWA app benefits for different companies (Source: PWA Stats)

PWA vs. Native App vs. Web App

As I’ve said, progressive web apps are websites at their core but with some native-app-like perks. Let’s see how they’re different from native and regular web apps.

PWA vs. native mobile app vs. web app
Type What is How to install Device's features Internet connection Updates

Native app

Written for mobile OS (iOS or Android)

From App Store/Google Play, installed directly on a device

Full access

In most cases, doesn't depend on the connection

Comply with app store regulations, users need to update the app on their devices

Web app

Runs in a browser, on a remote server

Installation on a device isn't required

Limited acess to device's hardware

Doesn't work without connection

Promptly delivered to users

PWA

Website with app-like features and UI

Not installed on a device

Limited acess to device's hardware

Has an offline mode (interface and contect available due to caching)

Instant and automated updates

What Makes a Progressive Web App?

Progressive apps aren’t tied to a framework or any other tool. PWA is a technology developers can apply after fulfilling some requirements.

Basically, all you're going to need to turn a website into a PWA is to include a manifest.json file and a service worker.

What’s a Service Worker?

A service worker (SW) is a JavaScript file that a browser runs in the background. It supports some of the main PWA app benefits—offline mode, background syncs, and push notifications.

  • Push notifications

Workers run separately from the main browser thread, so they’re independent of the app they’re associated with.

That’s why service workers can receive push messages from a server when the app isn't active. This lets your PWA show push notification even when it’s not open in the browser.

!

On desktop OS's, Chrome and Firefox users can only receive notifications when the browser is running.

  • Offline mode

The service worker caches an application shell (interface), so it loads instantly on the next visits. The dynamic content (like messages or payment history) is refreshed every time the connection is back.

Let's say you're using a PWA messenger. Users won’t see the difference between the online and offline modes when it comes to the interface. The site is still working; a message history is available. But you need an internet connection to receive messages.

The service workers can delay actions until a stable internet connection is back.

  • Background synchronization

When you’re sending a message, the service worker checks whether you have internet access. If you do, great. The message will be sent.

If there's no connection, the workers will wait until users have the internet and send the message. Even if users navigate away from the original page.

How service workers work

How does PWA work with SW

One more thing: service workers only run over secure HTTPS connection.

What's a Manifest File?

Manifest is a simple JSON file that defines the basic parameters of PWA.

With the manifest, developers control:

  • How the PWA is launched (i.e., full-screen mode without a visible URL bar)
  • The way the app is displayed to the user (what icons, background color, fonts, screen orientation to use)
  • Whether it's possible to add the app to the home screen
What manifest file is responsible for

What can progressive web apps do with the manifest file

As for the tools, there are several popular technologies to create a PWA, mainly based on JavaScript:

  • React, a JS library for building dynamic user interfaces
  • Polymer, a combination of components, tools, and models designed to create PWA
  • Angular, a JS framework for creating dynamic web apps
  • Ionic, a JS framework for creating apps for multiple platforms with a basic code
  • Accelerated Mobile Pages (AMP), an open-source project to improve the performance of web pages
!

Which framework does the job better— Angular or React? Check our fullest comparison.

When it’s better to develop progressive web apps than a native one:

  • When your app does not require advanced functionalities (for example, it’s not a social network)
  • You don’t have plans on distributing the app on marketplaces
  • The app doesn't need to interact with native features (geofencing, NFC)
  • You don't need to customize the user interface
  • You want to keep users engaged but have a limited budget and little time for go-live
  • Need the app to run on various devices and OS
  • Search engines indexing is important

For example, progressive web apps are great for media as they offer offline access to cached articles. That’s why The Washington Post was one of the first companies to adopt PWA technology, followed by Financial Times.

The difference between PWA and website

How progressive web app works vs. how a website works

PWAs bring quite a few benefits to both users and businesses. They aren't hard to build, which means they won't cost you much. While features like offline access and push notifications are great for boosting user experience.

But progressive web apps have limitations, especially on iOS. Another fast and budget-friendly option is Flutter app development, which covers two platforms using a single codebase. That's in case you want to focus on native-like apps.

Other than that, PWAs may be quite enough to extend your current website.

Does your business need a PWA?
Tell us about your project, and our Business Analysts will explain the options.

Frequently Asked Questions

Rate this article!
An image
An image
An image
An image
An image
(307 ratings, average: 4.96 out of 5)
Leave a comment
An image
Your message is checked by the moderator and
will add to the site ASAP
Latest articles
typos
Report a typo
Back to top