Ryan Heap, DEG UI Development Team Lead, coauthored this post. 

In January of 2007, from center stage at the Moscone Center in San Francisco, Steve Jobs introduced the world to the iPhone. It wasn’t his first Macworld keynote, but it was arguably his most legendary: the device he demonstrated that day ushered in the current era of mobile computing, and made terms like “App Store” ubiquitous almost overnight.

But there’s a problem with this version of history: in the beginning, Jobs didn’t even want an App Store to exist.

Related Content: Building Your Own JavaScript Library for Fun and Profit

“The full Safari engine is inside of iPhone. And so, you can write amazing [web] apps that look exactly and behave exactly like [Apple-created native] apps on the iPhone,” Jobs said during his WWDC keynote a few months later. “And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can look up a location on Google Maps.”

Jobs and Apple were banking on developers creating full-featured websites rather than native apps, so much so that it took an entire year before Apple introduced the App Store in 2008, making it possible for developers to build native third-party apps for the first time.

Approximately 91.5 billion apps were downloaded from the Apple App Store and Google Play Store combined in 2017, accounting for $58.6 billion in global revenue.

The rest, as we know now, is history. Mobile app stores have become a VERY big business: approximately 91.5 billion apps were downloaded from the Apple App Store and Google Play Store combined in 2017, accounting for $58.6 billion in global revenue from app sales, subscriptions, and in-app purchases, according to app research firm Sensor Tower.

But all of that is about to change. Thanks to some recent bleeding-edge advancements in browser and mobile device functionality (not to mention a lot of banner-waving by Google), a new crop of web apps called progressive web applications (also known as PWAs) are quickly blurring the line between web and native—and they’re poised to have a profound impact on the web and mobile landscapes as we know them.

It’s the end of the (app) world as we know it

iPhone developers were quick to criticize Apple’s original web-only app strategy. Sure, it was possible to save a link to a web page on your home screen (using a relatively buried setting in Safari) as Jobs recommended. But historically, native apps have had substantial advantages over browser-based web apps, including better access to device hardware, higher perceived performance, offline capabilities, notifications, and discoverability via dedicated app stores.

Progressive web apps are different. Much like the “responsive design” revolution, a PWA is not a single technology, but rather an umbrella term for a number of cutting-edge web technologies and best practices that can be used to make a website or web app feel as fast and as functional as its native-app counterparts.

A PWA can:

  • Be installed as an icon on the device’s home screen.
  • Access device hardware features, such as GPS, bluetooth, accelerometer, camera, and the file system.
  • Receive push notifications, even when the browser isn’t open (including on the device’s lock screen).
  • Make payments using the device’s built-in payment system (such as Apple Pay and Google Pay).
  • Work offline and improve performance, thanks to some advanced site-caching mechanisms.
  • Have deep linking to any “state” of the application, much like a native app.
  • Function across multiple device screen sizes—from phone to desktop—all from the same codebase, thanks to responsive web design.

In a lot of cases, progressive web apps aren’t “just as good” as native; they’re better. Because PWAs are built on the same HTML/CSS/JavaScript platform as a regular website, it’s entirely possible to create a full-featured app without the need for dedicated Android or iOS developers (or the substantial costs that come with building and supporting multiple native codebases). There’s also no app store overhead or approval process waiting games since the installation of a PWA is as simple as choosing “Save to Home Screen” from your browser.

With progressive web apps, it’s entirely possible to create full-featured apps without the need for dedicated Android or iOS developers.

Don’t limit your PWA thinking to just mobile devices, either. A PWA can be installed as a Chrome Web App in the desktop Chrome browser. And soon, high-quality PWAs will be indexed and included in the Microsoft Store alongside native Windows 10 applications, a clear indication of how much PWAs are changing the application landscape as a whole.

Looking under the hood of Progressive Web Apps

Because a progressive web app isn’t just one single technology, it’s important to understand that calling a website a “PWA” can mean it’s built on any combination of the following technologies and best practices—and that some of these features will be more fully supported on certain devices and browsers than others.

This concept of building a website with a base level of functionality and carefully layering on more advanced features for devices that can take advantage of them is an age-old, front-end development technique known as “progressive enhancement.”

Because PWAs are built with this strategy in mind, the general consensus is that all newly built websites should be PWAs; that is, they should leverage the best practices of a PWA as a baseline, and add the more enhanced PWA features as needed.

That means a PWA experience can vary from device to device. For example, an ecommerce PWA running on a modern Android device may be able to receive push notifications for newly stocked inventory, browse products when there’s no internet connection, and allow payments via Google Pay. That same app on a device with support for fewer PWA features will still have a standard online checkout experience you’d expect from an ecommerce site; it just won’t have all the bells and whistles of the enhanced PWA experience.

But enough theory: what technologies actually make a PWA a PWA?

A secure connection. Whereas many of the following features are optional, a progressive web app MUST be served over a secure SSL connection. In other words, your site’s URL has to be “https://”, not “http://”. This is a general web best practice and is a standard for all sites developed by DEG.

A manifest.json file. Think of a web manifest as a blueprint for your app. It’s simply a JSON file in the root directory of your site, referenced in the <head> of your site’s HTML files. It tells the browser your site intends to function as a PWA and identifies a number of critical details such as your PWA’s name, a description, and where to find the icons it should use when saved to the home screen.

A service worker. This is where it can get complicated. Essentially, a service worker is just a JavaScript file that can run independently from your actual site…but what actually happens within it can be almost anything. The two most common uses for it are to a.) establish a cache of site assets to improve performance and make it accessible even when offline, and b.) register for and respond to push notifications from a remote server. There are many more use cases for service workers than can be listed here, which is why a number of service worker generators have popped up to help streamline their configuration and creation.

Advanced web APIs. Although not specifically PWA-related, access to advanced hardware features via JavaScript—many of which fall under the W3C’s Generic Sensor API specification—can give PWAs the kind of functionality that used to be hidden behind the velvet rope of native app development. For example, modern websites can leverage a device’s ambient light sensor to invert a page’s color scheme at night, or be navigated via voice recognition, neither of which would’ve been possible on the web all that long ago.

Despite Jobs’ early championing of web apps as the future of mobile development, Apple has fallen behind its competitors in terms of full PWA support.

So, about that device support thing…

Front-end developers are already accustomed to making lemons into lemonade when it comes to browser support, and progressive web apps are no exception.

Generally speaking, Google’s browsers—which includes Chrome on both desktop and Android—have excellent PWA feature support, including manifest.json, service workers, offline access, and push notifications.

Microsoft’s products are lagging slightly behind, although there’s light at the end of the tunnel. The current version of Edge, for example, does not yet support most PWA features, but service workers and push notifications are scheduled to be supported in the next major release.

Despite Jobs’ early championing of web apps as the future of mobile development, Apple has fallen behind its competitors in terms of full PWA support (something tells us App Store revenues might play a part in its feet-dragging). Apple released iOS 11.3 in late March 0f this year, which included support for service workers in iOS Safari, but some of these newly supported PWA features have a few limitations. For example, iOS progressive web apps can leverage offline access; however, the device will automatically wipe out the app’s cached files every few weeks, meaning the user will need to occasionally visit the site while online to re-cache its contents. Although not ideal, it’s still a huge step in the right direction.

The PWA future looks bright

Although these new web technologies are still in their infancy, progressive web apps are already beginning to have a huge impact on the way apps are built and distributed. As advanced web APIs mature and browser support rapidly improves, the uncrossable line between a native app and a web app is quickly dissolving.

Related Content: What Facebook’s Data Privacy Changes Mean for Business Pages

It’s difficult to say exactly how much market share will be wrestled away from native applications and the app stores, but one thing’s for sure: anyone who’s considering building or revamping their website or web app should think very seriously about what role a progressive web app should play in their online strategy.

As Steve Jobs used to say, “there’s an app for that.” But now, that app is a PWA.

Keep In Touch

Stay up-to-date on the latest digital trends, DEG news, and upcoming events by subscribing to DEG's newsletter.

Subscribe

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments

  • Everything You Need to Know About Magento 2.3

    Everything You Need to Know About Magento 2.3

    1 year
    Reply
    […] Progressive Web App is an application built to take advantage of modern technology features that “progressively” […]