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 for a native application compared to a progressive web application, most of which are 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 powered by 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, Steve Jobs announced in October 2007 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 launched with 500 native apps ready for download. Just one year later, 50,000 apps were available for 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 provide a healthy ecosystem for mobile app development. Each platform enables developers to make applications using dedicated tools and methods. Yet both differ in their approaches. 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 threshold in the United States, cementing its status 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 took the lead, this naturally enabled the company to develop web standards. There were several systems already in play, some of which had 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, both workers on the Google Chrome project, first coined the term “Progressive Web Apps”. Shortly after, Google invested heavily in promoting PWA development on Android.

Two years later, in 2017, Apple introduced support for service workers in 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 (TWA). The new functionality allows a PWA to be listed in 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 have more native app-like features. Push notifications, installability, 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 been 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 entities that deliver on that concept. They handle push notifications and direct incoming messages to the App. An external service typically pushes notification data to a web app, and the service worker uses it to produce a push notification based 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 a network connection before sending 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 for a native app. There is a world of things that native apps can do that PWAs 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 because it is 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 significant barriers to market entry are the add-to-home prompt and the listing of the PWA in the App Store. Users most often download and install apps from the App Store. iPhone users do not receive an automatic home screen prompt to install a PWA. In addition, it is not a one-click process to install on iOS, unlike on Android, where installation is a single tap.

In late 2019, Apple released iOS 13 along with its iPhone 11. With the new release, many were eager to get under the hood of the latest Safari browser to see whether PWAs were 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 solely with HTML5 are frowned upon by 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 time and code to get the application to work correctly. Some frameworks will accept a base PWA; however, others, such as React Native and Flutter, require distinct 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 provided by the service worker and the ability to add it to the home screen, even if it’s a manual two-step process that the user must initiate from the browser toolbar. In addition, iOS 13 introduced a full-screen mode for Safari, but you must manually enable it 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 its App Store and passively not fully supporting PWAs in its Safari Browser. As a result, the iOS operating system has been an unshakable staple among smartphone users, steadily increasing its market share among subscribers in the United States (Statista 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.