A History of Progressive Web Applications and Native Applications

By: Clinton N. Godlesky

Abstract

A progressive web application, also known as PWA, is often seen as a replacement for an existing native application. There are several barriers to market entry with a native application compared to a progressive web application, mostly related to the iOS platform. Quickly publishing to market is often cited as a reason to use Progressive Web Applications vs. native applications. However, before committing to a full-on switch to Progressive Web Applications, there are many technical considerations.

Introduction

On January 9th, 2007, Apple Inc. launched the iPhone. Steve Jobs stood on stage during his keynote at the Macworld Conference & Expo in San Francisco, California, in his trademark jeans and black turtleneck and talked about how the future was web apps. Developers would write apps using AJAX and web 2.0 technologies, all supported by the power of Safari on these little magic devices.

The world was impressed with the hardware, which arguably changed how we consume information on the web, but they were not impressed with how open his initiative was. Despite the web app promise, developers wanted to write applications like the native calculator, weather, and notepad applications that shipped with the phone. Apple named these native applications “widgets” during the launch presentation. Soon after Apple’s launch, jailbreaking an iPhone became a thing. Upon seeing this vast demand, in October 2017, Steve Jobs announced that Apple was working on an SDK for iPhone apps. Apple scheduled the new platform to launch in 2008.

Steve Jobs on stage with iPhone app icons in the background. He was showing widgets, which would later become apps, and are hoped to be replaced with Progressive Web Applications. — Steve Jobs presented iPhone capabilities, defining all other apps as “widgets.”

Apple Launches The App Store

This reactionary change of direction helped kill the early promise of web apps. In July 2008, the App Store opened with 500 native apps developed and ready to download. Just one year later, 50 thousand apps were available to download. The competition took notice, and in October 2008, the Android Market opened (now known as the Google Play Store).

For the last 13 years, if you wanted an app on any mainstream smartphone, you went to the App Store or Google Play Store. Using an application marketplace to download apps is a trained behavior among smartphone users. While technology-savvy people will know how to access web app functionality on websites and install and use a PWA, most people search for the brand or App on an App Store. As of 2021, that is where the majority of users focus.

PWA, A New Alternative Open Format

The App Store and Play Store have a healthy ecosystem for phone application development. Each platform enables developers to make applications using dedicated tools and methods. Yet, both are different in their approach. In addition, each operating system has a different architecture and requires unique tools and techniques for application fabrication.

While the smartphone application process was churning, desktop browsers continued innovating in new ways. In 2015, Google’s Chrome had just crossed the usage graph path in the United States, cementing itself as the most used browser on the Desktop (StatCounter 2021). It continued to trend upwards while Internet Explorer continued to drop. The Internet Explorer browser never recovered and is reborn today as Edge using Chromium as its engine.

Google Starts To Innovate

Once Google’s Chrome browser had the lead, this naturally allowed the company to develop standards for the web. There were several different systems in play already, some of these having moderate success. Adobe Air, PhoneGap, and Electron were early attempts. Some of these are still relevant today.

In 2015, designer Frances Berriman and engineer Alex Russell, workers on the Google Chrome project, first coined the term Progressive Web Apps. Shortly after, Google invested heavily in promoting PWA development on the Android platform.

Two years later, in 2017, Apple introduced service worker support for Safari on the iPhone. This support was not available for 3rd party browsers on iOS.

In early 2019 Google introduced a concept called Trusted Web Activity, known as TWA. The new functionality allows a PWA to list within the Google Play Store.

As of 2019, PWA exists as bleeding-edge technology on Android Phones. On the other hand, Apple has some catching up to do (See PWA in 2019 below).

What Exactly is a PWA?

Progressive Web Applications are web applications that has more native app-like features. Push notifications, being installable, having a loading screen, and offline capabilities are all part of the PWA promise. The following terms are standard in use during discussions of PWA:

Manifest File ⏤ This is a simple JSON file to list metadata for the web app. This file is for attributes such as the app name, default orientation, and icon assets.

Service Worker ⏤ This is a JavaScript file that sits in the background and performs work. Have you ever closed an app and were reminded later to do something? Ever leave an app, and it’s still calculating or uploading something? It’s doing background work, and service workers are an entity that delivers on that concept. They handle push notifications and direct incoming messages to the App. An outside service usually pushes notification data to a web app, and the service worker takes that and produces a push notification depending on its configuration. It can handle many other things, such as caching important files and requests. For example, have you ever made an appointment on an app and lost cellular service? A service worker will store that request on your device and wait until the phone has connectivity before pushing it to the server.

What can Progressive Web Applications do?

It’s essential to keep in mind that a PWA is a progressive web app, not a replacement native app. There is a world of things that native apps can do that PWA cannot. These include:

Camera (Streaming Access)
GPS (Real-time, not one-time geolocation)
Geofencing (for marketing purposes)
Accelerometer
Compass
Contact list
Alarm
Calendar
SMS and push notifications
Near-field communication and mobile payments

A PWA is advantageous as it is supposed to be platform agnostic. HTML, CSS, and JS are all supposed to work and play nicely together. Nevertheless, this has not happened because each platform is adopting it differently.

Progressive Web Apps in 2021

In 2021, Android had a clear lead in adopting PWA throughout its platform. It even allows you to list PWAs (As TWAs) in the Google Play Store. But in the United States, Apple still owns more than 50% of the smartphone market share. The PWA experience on an Android phone is near complete, whereas a user might not know it exists if you are using an iPhone. There are several things Apple has not yet allowed that PWAs are known to support:

Loading Screen on Launch
Add to Home Prompt
Push Notifications
Locked Orientation
Status Bar Color
The tap delay still exists on iOS
PWAs in the App Store

A clear lead? Or a non-bipartisan issue

The most considerable barriers to the market are the add-to-home prompt and listing of the PWA in the App Store. Users download and install apps most often in the App store. iPhone users receive no automatic home screen prompted to install a PWA. In addition, it is more than a one-click process to install on iOS, unlike Android, where the installation is a single tap.

In late 2019, Apple released iOS 13 along with their iPhone 11. With the new release, many were eager to get under the hood of the latest Safari browser to see if PWA was given a boost and finally brought up to par with what Google had done. Unfortunately, in the fall of 2019, things went the other direction. Apps built only using HTML5 are frowned upon in the App Store. So apple released a news update specifically targeting this situation:

“In order to provide users with the secure and curated experience that they expect on the App Store, we have always specified that apps must be self-contained bundles. This means that the core features and functionality of the app must be contained within the binary of the software, rather than made possible by referring users outside of the approved app, including through the use of HTML5. Apps that provide core features and functionality dynamically with web technology like HTML5 are best delivered to everyone in Safari, rather than through the curated App Store.”
Apple, September 6, 2019

If you place your PWA into the app store, the core functionality should not be HTML/JavaScript code. Apps must have directly coded core functionality to be considered an App.

How to get Progressive Web Applications into the App Store?

Well, developing a native app using a JavaScript-based framework is a start. There are many frameworks available, like Cordova, React Native and Flutter. However, these generate proper native applications and don’t fix the PWA problem on iOS. The PWA can be placed into the framework and will mostly work. However, you’ll spend 20-50% more code/time to get the application to work correctly. Some frameworks will accept a base PWA; however other ones, such as React Native and Flutter, require unique components and code approaches. Once you wrap it up, you can submit it to the Apple App Store or Google Play Store.

Apple warns against non-native Apps.

However, Apple might not be so friendly about you doing that. Alongside the announcement from September 2019, Apple seems to be rejecting wrapped PWA and generic website-like applications submitted to the App Store. These are a few lines from the App Store Submission Guidelines that they are using that might get a Cordova App rejected:

“4.2.6 Apps created from a commercialized template or app generation service will be rejected.”
“Your app should include features, content, and UI that elevate it beyond a repackaged website.”
“If your app is not particularly useful, unique, or “app-like,” it doesn’t belong on the App Store.”

Apple wants higher functioning applications in the app store and websites to stay on the web. PWA’s most significant problem today is that on iOS, users primarily consume PWAs in the web browser. As a result, they aren’t intuitive to install on iOS. Therefore, while Apple is blocking many wrapped PWAs without additional functionality, they are also not fully committed to solving the problems with installing from the web.

Positives of PWA on iOS include the caching aspect of the service worker and the ability to add to the home screen, even if it’s a manual two-step process that the user has to initiate from the browser toolbar. In addition, iOS 13 introduced a full-screen mode to use in Safari, but you must manually turn it on each time.

Creating a PWA is simple.

Using a single WordPress Plugin, you can easily make a website that scores 100% on Lighthouse for PWA. Creating a PWA from a website is simple. All that is needed is a manifest JSON file (shorter than 100 lines on average) and to add a service worker JavaScript file. A user will likely encounter PWA often while browsing the web on the Desktop. For example, have you been asked if you want to receive notifications while viewing a website in Chrome? That is a PWA functionality. It allows the notifications API on the Chrome Desktop Browser.

Upon adding the base requirements of PWA, a developer can later add additional features. In addition, you can customize things such as push notifications and offline capabilities.

In Conclusion, Why PWA’s May Never Become Mainstream.

A core problem facing Progressive Web Applications stems from the software interfaces used to serve them. In short, Android has done everything it can to enable the best PWA experience. At the same time, Apple seems to be aggressively trying to reject wrapped PWAs in their App Store and passively not fully supporting PWA on their Safari Browser. As a result, the iOS operating system has been an unshakable staple among smartphone users, only steadily increasing its hold on market share among subscribers in the United States (Stastica 2021). Until they allow the same capabilities as Android, a PWA is not the best direction to take when exploring a platform for a smartphone application.