Tuesday, June 21, 2022

The Most Ubiquitous Mobile Application Platform in the World: The Web Browser

John Jenson, Technical Director
Innovation / Mobile / Technology

When you open a page in your browser, are you loading a website, or an application?

Depends. Back in the 1990s when Al Gore was using the term “Information Superhighway,” most people would have said websites, but today, that isn’t nearly the case. Many websites today behave like installable desktop applications. By the 2000’s, organizations around the world were creating very sophisticated web applications using the browser as their delivery platform; and by the 2010’s, that trend accelerated even more as modern web application frameworks like React, Angular and Vue became mainstays. In 2015, a new term was coined by Google, “Progressive Web App,” which has been a topic of conversation among web developers ever since. 

Progressive Thinking

Progressive Web Apps (PWAs) are web applications that can be installed to your device’s home screen or desktop just like any other native app. PWA’s execute their code inside a browser engine running on the device, while the native app executes its code directly on the device. Although PWA code executes differently, to the end user, the finished product is nearly indistinguishable from a native application.

You may be thinking, “That’s great, but why does it matter?” Organizations that maintain an application across the web, iOS and Android natively have to build and maintain three code bases. PWA’s allow one code base to span all three platforms, and the cost is the same as building a responsive website with a small amount of additional effort. This enables the application to be installed on the desktop or home screen. Organizations save a lot of effort and money by implementing PWAs that can be deployed on all devices. 

You might be wondering why we aren't seeing more apps being released as PWAs. One of the original hurdles for PWAs was discoverability. In the beginning, no app stores would allow developers to list PWAs; but since 2019 when Google announced support for Trusted Web Activities, that hurdle was removed for Android users. Trusted Web Activities allow PWAs to be published in Google’s Play Store alongside native apps. making them equally discoverable as their native counterparts on Android, but on iOS there is still work to do. Apple is still behind Google in its adoption of PWA features, and has made little progress over the last several years. 

Will Apple ever get fully onboard with PWAs on iOS? Probably not. Let’s compare the business models of Google and Apple to understand why: For Google, the web is its platform of choice. The more people use the web, the more Google’s marketing-reach and influence increases, so PWAs make a lot of sense. Apple, on the other hand, makes most of its money from selling devices, apps and content from its various stores. It makes a 30% fee on all the app sales as well as a 30% fee on all in-app purchases that are delivered via those apps. None of these fees can be collected from PWAs. According to Apple’s 2022 press release in January 2022, it has paid over $260 billion to application developers since the launch of its app store in 2008. That would mean that Apple itself collected $111 billion in fees from the app store purchase during that time. It doesn’t seem likely that Apple would ever be motivated to shutter that revenue stream.

Rather than vent frustration at Apple, let’s focus on the big win for web developers and organizations. The ideal vision for PWAs is to write one application that can be deployed on all devices that is indistinguishable from native applications. Unfortunately, we have not yet achieved that vision, but irrespective of what Apple does, we have more or less achieved it for all major platforms except iOS, including MacOS. That means that we could write one application for iOS, and a second one for everyone else, which would take us from requiring three development teams to only two. That’s a big win. And in some cases, a PWA with less functionality on iOS can still achieve business needs, allowing the vision of PWAs to be realized.

Pushing the Limits

Can PWAs replace native apps completely? No. Even though there are many excellent use cases for PWAs, there are and likely always will be a need for native apps. Generally, this occurs when the application needs to be highly integrated with the device’s hardware or other aspects of the operating system. PWAs, on the other hand, support most, if not all, the feature sets needed by many business applications, and the list of supported features is constantly growing. I’ll give a full feature comparison list at the end, but I’ll highlight a couple key differences between PWAs and native apps below. A few of the more noticeable limitations are the installation process for iOS, push notifications for iOS, and Bluetooth.

Installation

The Google play store allows developers to publish PWAs, so if Android users want to install a PWA, they go to the Google Play store on Android and find it listed alongside all the native apps. Not only will users not experience any friction installing the app, but they also likely won’t even know the app is any different from any other native app. Apple, on the other hand, does not have a PWA publishing method, so for iOS users that want to install a PWA, the only option is to visit the site and add it to their home screen manually. This is not a well-known feature of iOS, so most users will need special instructions on how to do it – likely through the PWA itself:
  1. Open Safari for iOS – this feature is only available on Safari
  2. Go to the PWA site
  3. Click the share button
  4. Choose the "Add to Home Screen" option

Once users add the app to the home screen, a well-built PWA will look just like a native app with an icon, app name and launch screen.

On desktops, the installation experience is much more consistent across operating systems. If you want to try it out, open twitter.com in Chrome on your macOS or Windows device and choose the “Install Twitter” option from the settings menu.

Push Notifications

Android empowers PWAs to surface push notifications, but iOS does not. This missing feature on iOS has caused so much frustration that a petition was created to pressure Apple to implement it.

Bluetooth

Some Bluetooth control is possible in some browsers, but the APIs are still maturing and have not yet reached wide adoption on all the key browsers. Apps that require a fine level of control over Bluetooth devices would likely be better as native applications.

Fully Supported Features

Now that we have some of the key limitations out of the way, let’s talk about some important features that have been implemented on the web on both Safari for iOS and Chrome for Android. 

Face ID and Fingerprint Reader

Biometric based authentication is a feature on which Apple and Google see eye-to-eye. Both Chrome and Safari have implemented the Web Authentication spec, so PWAs can benefit from Face ID.

Microphone and Camera

Browsers on both Chrome and Safari on iOS have been able to access both the mic and camera since March of 2018.

GPS

High accuracy geolocation support has been available on mobile browsers since roughly 2010.

Responsive Web Apps Versus PWAs

For organizations that already own a responsive web application that they’d like to convert to a PWA, they may be wondering what is required. The list of minimum steps to convert a responsive web app to a PWA is surprisingly short. Only 4 things have to be done

  1. Provide a linked web app manifest file and app icon
  2. Register a service worker
  3. Add “viewport” and “theme-color” meta tags in the head of the HTML
  4. Run the app on HTTPS

Once developers provide the above, the browser will consider the website a PWA and will allow users to install it to their home screens. However, in addition to those four things, there are several more best practices that should be implemented in order to create a high quality PWA. A great guide for creating a PWA was published by MDN that provides good practices for building highly usable web applications.

One side benefit of turning a responsive web app into a full-blown PWA is that it will improve the usability of your application and increase your application’s Lighthouse score. Many organizations have come to rely on Lighthouse to help improve their applications’ core web vitals. Google announced in 2020 that web vitals would impact page rank on their search engine, and later confirmed that they started rolling them out in June of 2021.

For organizations that have responsive web sites that they haven’t upgraded to PWAs, it seems like a no-brainer because it requires minimal effort and has great upsides.

PWA Success Stories

PWAs have some other advantages over native apps that are worth noting. There are several brands that have used PWAs in addition to their native apps to help increase user engagement, signups and conversion rates. These brands include Forbes, Pinterest, The Washington Post, Financial Times, Twitter, and Starbucks. PWAs are lighter weight applications than their native counterparts, and are optimized to load very quickly — users don’t have to wait for a lengthy download and installation before interacting with the app. Also, the content can be indexed by search engines, which makes them discoverable in ways that native apps aren’t. These advantages have helped companies strengthen their brands and increase user engagement. Let’s explore the three cases.

Pinterest

Pinterest was interested in improving the performance of their website. They decided to rewrite the site using React and turn it into a PWA. After this conversion, they saw that visitors spent 40% more time on their PWA than their mobile website. They also release a 44% increase in ad revenue as well as a 60% increase in user engagement. 

Starbucks

Starbucks launched a PWA in 2017. They designed the PWA to feel like a mobile app with crisp images, smooth animations, and offline access. Since its launch, they have seen a 2x increase in daily active users.

Twitter

Twitter also launched a PWA in 2017. One of their primary goals was to lower data consumption for users with slow network connections. After launch, Twitter saw a 65% increase in pages per session on their new PWA, a 75% increase in tweets sent and a 20% lower bounce rate.

PWA Comparison Chart

Here is a more complete list of capability differences between native mobile, Android PWAs, iOS PWAs. 

Conclusion

The web browser is the most widely used application platform in the world and it works on just about every personal computing device you can think of. People don’t always think of websites as applications, but they are. Browsers continue to become more stable and more powerful every day, and the advent of the PWA is further evidence of the web’s increasing maturity and its bright future. 

There are many applications today that could and should be built as PWAs. Why limit an app to just one platform? Use the web and broaden your reach. Shopping apps, note taking apps, news apps, online ordering apps, parking apps, classified apps and real estate apps are all examples of applications that would work well as PWAs. That doesn’t mean that PWAs are the answer for every application, but it is the right place to start for many business applications.

 If you are as enthusiastic about the web as Rightpoint, we’d love to consult with you about your next application.