Progressive Web Apps

Ask any web developer about challenges in web application development, and you will hear horror stories: Different browsers render controls and widgets differently, so an app that looks good on one browser looks terrible on another. Sometimes there are even differences between different versions of the same browser. Some apps that function properly on one browser crash and burn on another. And then there are differences between how apps behave on browsers under different operating systems. The result is that developers have had to maintain multiple versions of an app’s code base just to account for all the permutations.

Although efforts to enable cross-platform development have seen some success in the area of mobile apps, it seems that less progress has been made for web apps. After all, the web is supposed to be browser- and operating-system-agnostic already—what more is there to do?

It turns out there is something—something that not only takes a significant step toward true cross-platform development, but also does so in a way that takes the ordinary web app model and improves on it. That something is the progressive web application.

A Rising Star in the Cross-Platform Sky: Progressive Web Apps

A progressive web application (PWA) is, first and foremost, a web application. Like regular web apps, a PWA lives on a server, separated from the end user by the internet. The server, and other back-end resources, do the computational heavy lifting, accept requests from end users, and respond accordingly.

What distinguishes PWAs from regular web apps is that the client-side piece is implemented in an interface that looks and behaves more like an OS-native application than like a web browser.

Because it’s really a web app, developing a PWA requires the same tools and techniques as more traditional web apps, such as HTML, CSS, JavaScript, ASP.NET, and PHP. If a development team can build a traditional web app, it’s not a huge stretch to have them build a PWA. A PWA requires a few extra elements and considerations that regular web apps don’t, such as:

  • A web app manifest, a JSON file that defines certain aspects of the app, such as the title, icon file to use for the user’s home screen or desktop, the app’s background color, and other parameters.
  • A secure HTTP connection using the HTTPS protocol; this requires an SSL certificate.
  • One or more service workers, pieces of code that listen for certain events and perform useful tasks such as caching data, thereby enabling offline use of the app.

All of these, plus the other additional elements that a PWA needs, are well within the skill set of the typical web app development team.

From the user’s perspective, a PWA is “installed,” making it similar to a native app in that the user ends up with an icon on the desktop or home screen. Because it’s a web app, however, there’s little in the way of actual installation in the traditional sense. Essentially, that desktop icon is a link to the web app.

Progressive Web Apps

PWAs: Pros and Cons

What’s so great about PWAs? In addition to their lightweight installation, PWAs have the following benefits:

  • Hardware resource access: A PWA can access the device’s storage, camera, microphone, GPS, NFC radio, or devices connected via USB. This is an advantage over traditional web apps.
  • Offline mode: Also unlike regular web apps, PWAs can be used when the device has no network connection because it can store data and other resources on the device.
  • App store optional: Because they are web apps, PWAs are distributed outside the app-store ecosystem, thereby reducing the administrative hurdles in getting the apps to market. A PWA can be listed in an app store, but it is actually downloaded from the distributor’s site.
  • Easy updates: Because nearly all the code is maintained on the server side, the user doesn’t need to download or install updates. Users see updates as soon as they make their way to the production server.
  • Other goodies: PWAs can take advantage of certain features that native apps enjoy, such as user notifications, even when the app isn’t running.

Are there downsides to PWAs? A few:

  • Less than universal support: Although PWAs are gaining in popularity, they are not yet supported on all devices and platforms. An industry consortium is still hammering out the details of the standards that PWAs should follow. Once that’s done, support should spread to all major platforms. They are already fully supported on Chrome and Safari, with Firefox and Microsoft Edge soon to follow suit.
  • Permission to access resources: Unlike native applications (at least on desktop platforms), PWAs require user permission to access hardware resources. This is a good thing, because it puts the end user in control of the access, but if an app is completely useless without those permissions—that is, if there’s no “plan B” for a feature  if the user doesn’t grant the right permissions—the app will be less popular than it could be.
  • Slower performance: A PWA, which runs in the equivalent of a browser window (even if it doesn’t look like a browser window), will in most cases not be as fast as a similar app running on the platform’s native OS. This could make a big difference, depending on the app’s complexity.

What’s Next for PWAs?

As the industry settles on standards for PWAs, look for widespread adoption, owing to the many advantages. Already, some major tech players have compelling PWAs, including the likes of Twitter, Pinterest, and Snapchat. High-profile media outlets are also taking advantage of PWAs. PWAs are especially well suited for mobile platforms, which still have cross-platform development issues and whose users often suffer from spotty, throttled, or nonexistent data connections and limited storage for installed apps.