Tuesday, September 12, 2017

What Makes a PWA a PWA?

Last week Google announced the schedule for this year’s Chrome Dev Summit. The Lumavate office was abuzz, because the 2015 Dev Summit was where Google introduced the concept for Progressive Web Apps (PWAs). Much to our excitement, we scrolled through the schedule and saw that the majority of this year’s sessions are PWA-centric!

It’s technology that Google is moving full-speed ahead with, which is why we want to dive into a few high-level PWA concepts for you in the coming weeks. We’ve already put together a handy infographic that serves as your crash course to PWAs, but let’s dive a little deeper and talk about the technical elements that differentiate a PWA from any other native mobile app.

Technical Requirements

Although the list of technical requirements found in the Google PWA checklist is lengthy, these four elements take care of the bulk of the functionality:

  • Service Worker – The API that caches data as you browse. The more you use the PWA, the more data it saves for a smoother experience when you’re in a low-service or no-service zone.
  • Application Shell Architecture (App Shell) – Think of this as the frame of your PWA. It’s comprised of the design elements that stay put no matter what part of the PWA you’re accessing (think: toolbar, drop-down menus, modular elements). Your browser remembers the App Shell on repeat visits, allowing it to load instantly so you’re not left with a blank page.
  • Transport Layer Security (TLS) – This simply means the PWA is served over a secure connection, which happens when a site is served over HTTPS. This ensures maximum security for both user and site data.
  • Web App Manifest – One of the main UX elements of a PWA is the ability for the user to save it to their homescreen without a download, and the Web App Manifest is exactly how that happens. Through the Web App Manifest, developers can control how the PWA’s icon will look on the homescreen, making for a seamless and app-like experience for the user when the PWA is saved.

UX Outcomes

Here’s the real reason we’re convinced that PWAs are the future of mobile; With a compliant PWA comes a beautiful, frictionless user experience. A fully PWA-compliant mobile experience meets these three UX standards:

  • Reliable
  • Fast
  • Engaging

The good news? If your PWA has properly implemented each of the technical elements listed above, then these UX outcomes are inherent. Once you nail down the technical elements, your users are guaranteed a reliable, fast, and engaging mobile experience that will keep them coming back time and time again.

In a few weeks we’ll be revisiting the topic of PWAs with a deeper dive into those three UX outcomes, so stay tuned to the Lumavate Blog!