Progressive Web Apps: What you need to know

Bryan Hill
QuarkWorks, Inc.
Published in
5 min readAug 24, 2018
Image result for progressive web apps

My first DevComo Meetup topic, “Progressive Web Apps and Web Assembly.” Initially, I had no idea what Progressive Web Apps (PWAs) or Web Assembly (WASM) represented. I remember thinking I might have picked the wrong meetup to attend. How could an under the hood web technology impact the process of a native mobile app developer? Our speaker, Jared Smith, gave a fantastic presentation on this emerging technology. Jared actually called it the “holy grail” for the web that we have been looking for since the beginning of web browsers.

…I’ve heard that too many times before.

But after his presentation, I started to think this might be something huge. Progressive Web Apps (PWAs) with Web Assembly (WASM) changes the way the web functions and how it will be used. The advantages of this technology already has a long list of improvements and we have barely even begun to understand the extent of them.

Here were my top five takeaways:

  1. Feels like a Mobile App
  2. Better Performance
  3. Faster Engagement
  4. Offline Functionality
  5. Push Notifications

Feels Like a Mobile App

“A progressive web application takes advantage of the latest technologies to combine the best of web and mobile apps. Think of it as a website built using web technologies, but that acts and feels like an app.”

The app is not how we currently think about web applications. They are being designed to look and feel like a mobile app with the add functionality a web page provides. Twitter has already implemented a PWA and it feels almost identical to the native app. The app is able to fit the screen size regardless of the device used and information is quickly displayed into the apps shell.

Better Performance

Tinder’s app size comparison of Native and PWA’s

While it isn't exactly clear how much better the performance may be, there is a consensus that PWAs have a better performance than current web applications and are on par with native apps. Some insights have shown PWAs four times faster and with less than 10% of the data used. Yes, you read that right, PWAs can lower the size of the app by 90%.

Faster Engagement

The six steps a user will take when becoming a new user of an app

“In a consumer mobile app, every step you add to your onboarding flow will cost you about 20% of users.”

With PWAs, your on-boarding flow is practically instantaneous from the web page. PWAs skip the app store entirely and users are able to download the app straight from the web. Since these apps use less data, the user doesn’t have time to get distracted and they dive into the app immediately. This essentially skips the first three steps of the on-boarding flow, leading to significantly more users.

Offline Functionality
One of the most intriguing functionalities is the ability to continue browsing the app even while in offline mode. The app caches old info and will populate the app with this cached data until new data is loaded. The user will still have the same functionality even if they have no service, they will just see old data. For having no service, this is the most ideal functionality.

Push Notifications
One of the features that helps give PWAs a native app feel is push notifications. The notifications are triggered by the Push API and then handled by the web browser’s service workers. The service workers are the heavy lifters in this workflow, which is a major part to the success and ability of PWAs.

While PWAs offer all of these benefits, it still comes with a few drawbacks. Some of these disadvantages include:

  1. Loss of Traffic
  2. Loss of Some Functionality
  3. Offline Apps
  4. Battle with Apple
  5. High Battery Cost

Loss of Traffic
This is due to the app not being on the two main app stores (Google Play Store and Apples App Store). This is the main way most users search and browse apps. There is no PWA featured apps page. All of those users that would have found the app through this way will be lost.

Loss of Some Functionality
PWAs might seem like a Native app, but they are still web apps. This means they have the functionality of a website, not a native app. Without access to all of the devices hardware, PWAs do not support fingerprint scanning, Bluetooth, vicinity sensors, NFC, geofencing, inter-app communications, and advanced camera controls.

Offline Apps
Wait, wasn’t offline functionality one of the benefits of PWAs? Yes, for apps that need to be online at some point, PWAs will work well with inconsistent connections and slow internet. What they do not work well for is apps that never need to be online. PWAs are web apps, so it makes sense that if the web is not needed, PWAs lose most of their advantages.

Battle with Apple
Every big company has bought into PWAs, every company besides Apple. The reason; money. Apple is driven by money more than it is driven to do the best thing. The app store has become bigger than the global box office, so obviously it is very important to Apple that they keep this source of revenue. PWAs threaten to eliminate the need for Apple’s app store because PWAs are directly downloaded from the web. While Apple has said they are onboard and has silently added support for the basic set of new technologies behind the idea of PWAs, it’s still something they want to fail.

High Battery Cost
PWAs try to be in constant connection with the web. This is a very convenient feature when you need data; however, the problem is that it drains your battery faster than native apps. For some users battery life is essential and if an app drains the battery too much, they can’t even use it. A perfect example of this is Pokemon Go. People’s phones were draining too fast, resulting in users having to quit playing the app for this very reason alone.

Even with these disadvantages, I was blown away. PWAs aren’t just a competitor with native apps, but they can develop into a contender for the top spot. The benefits in speed and functionality are too great to not gain a presence in the mobile app market. The question now is, how big of a presence will it make?

As ever, QuarkWorks is available to help with any software application project — web, mobile, and more! If you are interested in our services you can check out our website. We would love to answer any questions you have! Just reach out to us on our Twitter, Facebook, LinkedIn, or Instagram.

--

--