If you listen to the pundits, Progressive Web Apps (or PWAs) have come to represent all that is good about application delivery via the web, and are sure to rule the web today, tomorrow and forever more. While that may be a grandiose claim — or at the very least some very wishful thinking — the fact remains that PWAs are having a large impact on how users interact with their web-enabled devices.

PWAs were originally proposed by Google back in 2015, and were saddled with this all-too-simple description: “A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” However, there is a great deal more to a PWA than “modern web capabilities”. At its core, a PWA is all about delivering a better, faster user experience, regardless of what browser or device they are using.

That said, there are several criteria that Google laid out to better determine if an app fits the PWA mold. To be considered a Progressive Web App, the app must be:

  • Progressive: In other words, the app should work for every user, regardless of browser choice. The app must be built with progressive enhancement as a core tenet.
  • Responsive: Adapt to any form factor, such as a tablet, mobile device, desktop, or any other device that consumes web content via a browser.
  • Connectivity independent: Ability to work offline or in poor connectivity situations.
  • App-like-Presentation: The app should use the app-shell model to provide app-style experiences.
  • Fresh: Always up-to-date, enabled by the service worker update process.
  • Safe: Delivered via HTTPS to protect data from interception, snooping or tampering.
  • Discoverable: Identified as applications, as defined by W3C manifests, and implementing a service worker registration scope, making them visible to search engines.
  • Re-engageable: Users are able to re-engage with applications through push notifications and other informational display features.
  • Installable: Allow users to have the freedom to install (or keep) apps on their device without having to rely on an app store.
  • Linkable: Can be shared via URLs, without the need for a complex installation process.

Yet, those criteria seem to bring up more questions than answers, questions such as what is an “app-shell-model”, or a “service-worker,” and so on. Truth be told, a PWA can be classified as a standard for building mobile websites. In other words, a PWA is designed to behave like a traditional app, yet perform fast, and not require anything unique on the end user’s part.

PWAs do not have to be a mystery wrapped in an enigma, but they do work somewhat differently than a traditional app does. In essence, a PWA works like a website, and PWAs are built using a framework. Like websites, PWAs are accessed using URLs, which means they can be indexed by search engines, allowing PWAs to be found on the pages of Google and Bing. Progressive Web Apps can be designed to look and feel exactly like existing websites or mobile apps, or they can be designed differently, so that users know that they are browsing the PWA. PWAs can also be seamlessly integrated into existing website/app structure and designs. It all comes down to flexibility, which PWAs seem to excel in.

PWAs are a true indicator of how the app market is changing , and are likely to become a “go-to” technology if the current trends of diminishing application downloads and customer engagement continues. Ultimately, PWAs may kill off the need for most non-core apps (such as the big social media platforms, as well as major services such as Uber, Lyft and Airbnb).

PWAs may lead to many companies not worrying about building their own custom apps, but shift to the ideology of what a responsive web app can offer. What’s more, users shy away from buggy apps, especially if they have to download them through an app store. And given the option of not needing to download an app and have it just work, users will flock to PWAs and eschew the whole app store experience. With that in mind, it makes sense for developers to learn what they can about PWAs and see how PWAs can deliver faster, better end user experiences.

PWA Advantages:

  • No Installation Needed: PWAs are basically just web pages; users can consume them directly from their browser and then decide whether or not to keep them for offline use.
  • Instant Gratification: PWAs load instantly and do not require extensive prerequisites to run on the end user’s device.
  • Instant updates: PWAs are updated on use, just like a web page, which means PWAs will always be current with the latest deployed features and code.
  • Eliminates the App Store: Users do not need to access an app store to receive a PWA or add it to their desktop or favorites.
  • Portability: As websites, PWAs prove to be fully portable, and do not require any type of special packaging and deployment models.
  • Secure: PWAs are secure, hosted over HTTPS, using TLS between the endpoint and server.
  • Responsive: PWAs use responsive web design (RWD) techniques, which allows them to work on all combinations of mobile devices, laptops, smart phones and tablets.

PWA Disadvantages:

  • Single sign-on and cross-application logins are not supported: Third-party applications that require a login, such as Facebook and Google, will continue to require their individual login, as PWAs are unable to independently collect and store that login information.
  • Lack of hardware functionality support:  PWAs do not support all the hardware components that native apps support, such as cameras, GPS, and biometric accessories.
  • Browser compatibility: Newer versions of Chrome, Opera, and Samsung’s Android browser support PWA. However, IE, Edge, Safari and many custom and proprietary default browsers do not support PWA.

Like with any new technology, there are usually hurdles to overcome. Arguably, the biggest hurdle for PWA comes in the form of its lack of support for Apple’s Safari browser, which is the native browser for iOS devices, meaning that PWA may not work on the countless iPhones, iPads and other devices. What’s more, Safari is the native browser on the OSX platform, meaning that the many flavors of Macintosh may not be able to use PWA.

Under the Hood of the PWA Architecture
Basically, there are two parts to a PWA: service workers and application shell architecture.  Service workers are bits of code that act like a proxy that sits between the website and the browser. Its job is to intercept what is asked of the browser and then hijack the responses given back. In effect, the service worker caches information, so the data is only fetched once for replay thousands of times. Service workers also exist to deliver extra features via browsers, which were impossible in the past. These include:

  • Push notifications: Informs the user of an event, such as a new message, a page being updated and so forth.
  • Synchronization: Updates data in the background, even when the user isn’t using the web page or website.
  • Caching: Stores information for offline use, allowing the user to have some functionality of a site while offline.
  • Pre-fetching data: Identifies data that may be used in the near future, such as images or content not yet displayed, and pre-fetches it to speed up access.
  • Incorporating additional data feeds: PWAs can query hardware such as geolocation, GPS, sensors, and so on using AJAX code.

The application shell architecture serves a different purpose, which Google defines as “the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network.”

The application shell can be thought of as similar to the bundle of code that you’d publish to an app store when building a native app. It is the skeleton of the UI and the core components necessary to get an app off the ground, but likely does not contain the data.

However, Google’s less-than-stellar definitions do give a little more insight as to what is required to create a PWA, notably HTML, CSS, and JavaScript. Google also states that for single-page applications with JavaScript-heavy architectures, an application shell is a go-to approach. This approach relies on aggressively caching the shell (using a service worker) to get the application running. Next, the dynamic content loads for each page using JavaScript. An app shell is useful for getting some initial HTML to the screen fast without a network.

Working with PWAs
For application developers, working with PWA takes a little bit of a different approach than building desktop applications or native applications. Creating a PWA requires much less work than building a traditional app. That is due to it being both a website and an app, operating across various systems at the same time. That also means the costs may be much lower, yet the PWA may provide an experience that is hard to differentiate from a native application. What’s more, PWAs require hardly any storage space on the target device.

Getting started with a PWA project usually involves delving deeper into Google’s code lab, which offers a step-by-step tutorial to create an app using the “app shell” method. Google lays out some basic requirements for getting started, including:

  • A recent version of Chrome.
  • Chrome DevTools to better understand what’s happening at the browser level.
  • Web Server for Chrome, or your own web server of choice.
  • The sample code
  • A text editor
  • Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools

From an educational standpoint, Google does an excellent job of introducing someone to the power of PWA and what the appropriate uses of the technology are. However, those looking to take PWAs further should expose themselves to other sources of education, as well as polishing up on their JavaScript skills. That said, Google does provide several boilerplates to make getting started that much easier. Nevertheless, it would be wise to get development teams working on PWAs rather than continuing to push app downloads, which may well soon be irrelevant.

Examples of PWAs
PWAs are already having a major impact on how people are using the web. Features such as push notifications, offline web pages, and fast load times are attracting a large audience of adopters, with many in the Fortune 1000 introducing PWAs as a means to better service customers. Examples abound of successful PWA implementations and a few are well worth looking at before delving into creating PWA solutions.

  • Twitter Mobile: Accessible at mobile.twitter.com, Twitter has created a PWA that is actually better than the company’s traditional app. The PWA implementation is faster, works offline, and is responsive.
  • Washington Post PWA: Offers a mobile experience that rivals the traditional web experience of the Washington Post. Offline access, caching and pre-loading create a fast experience. Also shows how effective the Server Worker Precache library and the Service Worker Toolbox library can be implemented effectively.
  • Flipboard: Has created a mobile experience built around the capabilities of PWA. Several unique features abound and the company’s implementation of PWA gives some solid hints as to what is possible with the technology.

There are numerous other examples of excellent PWA offerings. However, for developers, the biggest value comes from delving into how those examples work and using the browser’s developer tools to see how that PWA implementation was done. Simply put, dissecting a good Progressive Web App is also a good way to learn new techniques!

The Future of PWAs
One thing is certain, PWAs is here to stay, as evidenced by the number of enterprises that are deploying PWAs as a way to better service customers. Furthermore, PWA development may very well be a skill set that will be in more demand.  According to Gartner, “By the end of 2017, market demand for mobile app development services will grow at least five times faster than internal IT organizations’’ capacity to deliver them.”

The truth here is that most IT departments aren’t prepared to address this growing demand for mobile apps and are already bogged down with traditional application development, along with their other tasks.

Mobile application development requires new skills and time, luxuries that many businesses lack. As a result, technologies such as PWA and other low-code developer tools are bound to grow. The question remains though, will PWA and other fast development tools remain in the realm of IT, or will those technologies give rise to “citizen developer”, allowing business to create their own applications, without the help of IT or traditional developers.

While it’s not too late to get on the PWA bandwagon, developers need to realize that the first wave of PWAs was created by content businesses, such as FT, Washington Post, and CNET rather early on. Those were followed by another wave of commercial successes, such as Alibaba, which saw a 76% increase in conversions after upgrading its site in the summer of 2016 to PWA technology. That is a strong indicator that the need for PWA pros will only rise.

For PWAs, the future Is bright, driven by the fact that PWAs deliver next-level mobile customer experiences by combining existing technologies in a marketplace that is eager to invest, experiment, and reap the rewards. Growth in mobile technology as well as digital transformation is driving businesses to consider new ways of delivering applications and engaging with their customers. Those indicators show that developers embracing PWA development should be assured significant work for quite a while.