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

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.

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:

Just like websites, PWAs are written with the help of a certain ‘web development stack’—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.

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

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.

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

Companies that already adopted the PWA technology:

• Uber
• Starbucks
• Google Developers
• Pinterest
• Twitter
• The Financial Times
• The Washington Post
• Forbes

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.

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.

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.

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.

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.

• 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.

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

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

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

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.

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.