What Are Progressive Web Applications Capable of, Really?

What are progressive web applications and how do they fare against native apps these days? In this blog post, I interview our very own Joni Juup who has been closely following the development of PWAs for quite some time. So pour yourself a nice cup of coffee and let's dive in!

In some scenarios, web applications now perform as well as their native counterparts.

Tuomas: Let's say someone is about to build a shiny new native application for their company. Everyone is excited. Now what if someone suggests that the team should perhaps toss the idea of coding a native app for each platform and leveraging web technologies instead? Is that a smart thing to do?‍

Joni: Not too long ago, a decision like this would have meant making compromises in user experience and letting go of all kinds of cool things native apps are capable of. But web technologies are developing at an amazing speed.

In the past few years alone there have been huge improvements in both performance and tools available for developers and designers. What this means is that in some scenarios, web applications now perform as well as their native counterparts, and it is increasingly more feasible to use web technologies as an integral part of a native application project, or even build a mobile application entirely with web technologies. This is where Progressive Web Applications (or PWAs) step in.

The Basics

Tuomas So what exactly is a Progressive Web Application?

‍Joni: A Progressive Web App is essentially a website that can be accessed from your phone’s home screen, just like native applications (Android devices even show a helpful “install to home screen” banner when opening a web app from your browser). The big difference here is that PWAs are basically displayed using your smartphone's browser. So no App Stores, Play Stores, or different builds for different mobile operating systems. Just the web at its best.

The PWAs architecture also strongly emphasises speed and performance, so it's a good way to build performant web apps, even if you're not mainly targeting mobile users.

‍Tuomas: So what are Progressive Web Apps capable of doing?

‍Joni: Well, using the latest Android version or mobile Chrome, Web Apps can access for example

• Geolocation
• Touch gestures
• DeviceMotion access
• WebAudio API
• Partial camera access
  ‍

…and more capabilities are being added all the time. PWA's also leverage the use of a neat little thing called service workers.

Service workers and bad Apple

Tuomas: What is a service worker?

‍Joni: A service worker is essentially a chunk of code that sits around patiently between your web app and the internet connection. When the internet connection goes down, the service worker is there to provide data and content for your app. This way, the user can use the web application even when it is offline.

Previously, mobile web apps haven’t had a way to include their own background processes like this. But with service workers, it is now possible to do things like cache data offline, send push notifications for users and keep the service worker as a separate background process.

Apple is still horribly lagging behind with their standalone web app experience.

Tuomas: I've gotten the impression that Progressive Web Apps aren't that good on Apple iOS devices.

‍Joni: Yup, Apple is still horribly lagging behind with their standalone web app experience. However, PWAs do work on iOS devices too, but with some (rather serious) limitations: no service workers, no native push messages and generally a more limited access to device hardware. Offline functionality is still doable with solutions like PouchDB and local storage.

Good use cases for Progressive Web Apps

Tuomas: So what are PWAs good for then? And when is a native app the better way to go?

‍Joni: Consider the things you usually do on a mobile browser. That kind of stuff usually works great as a PWA. I'm talking about things like:

• Data browsing and reading - services that fetch stuff online for you to look at
• Simple tools - like forms, counters, check-ins, orders
• Targeting users on multiple platforms with one solution (PWAs work on browsers - so pads & desktops are covered)
• MVP’s, getting things done fast and iterating and releasing new versions, even multiple times a day
  ‍

So when considering building a PWA, ask yourself these questions:

• Do you need to record videos or take a lot of photos?
• Is it a critical tool that needs to work offline?
• Is it something you want to sell on the App Store or Play Store?
• Does it involve complicated graphics and animation? (although WebGL is already quite capable, it’s still no match to iOS Metal performance, for example).
  ‍

If you answered yes to most of the questions above, then a native app is probably a better way to go.

Other solutions leveraging web technologies

Tuomas: So what other solutions there are to leverage web technologies in mobile apps?

‍Joni: There are great solutions like React Native and Cordova that leverage web technologies. React Native makes it possible to develop native apps with the speed and technologies familiar from the web-development world. React Native basically compiles your JavaScript code into native app for iOS and/or Android platforms, which you can keep developing with one code base. Cordova instead leverages web technologies more directly, by wrapping your web-based app in a native container, while giving you access to native-level functions, like device motion, vibration and dialogs.

‍Tuomas: All in all, would you say that PWAs are a viable alternative to native apps?

‍Joni: Our own experiences with building PWAs and leveraing web technologies in our projects extremely promising. That being said, PWAs are is still a bit of a novel concept for most users, since a large majority of users (in Finland at least) do not yet have mobile devices that can fully take advantage of all the wonderful stuff PWAs offer. But if you’re developing a web service with performance and future horizons in mind, placing your proverbial bets on PWAs is a relatively safe thing to do.

‍More on Progressive Web Apps: Google Developer SiteA Beginner's Guide to Progressive Web Apps by Smashing Magazine