Reading up on Progressive Web Apps

So I’ve been working in a new project and what sets it apart the most from previous projects I’ve worked on is that our team is building Progressive Web Apps (PWAs). I got thrust into the project in firefighting mode, and I’ve pretty much managed to get by with my experience in working on web apps and hybrid mobile apps. Essentially, my simplistic understanding was PWAs are amped up web apps because they’re app-like [they’re just websites that took all the right vitamins.” – Alex Russell].

  • They can be easily be “installed” from the web browser without having to go through app stores or MDMs like AirWatch.
  • They can be available from your mobile device’s home screen.
  • When you open them, they look like an app — full screen, without the browser header and navigation bar.
  • When you switch apps on your mobile, they’re there along with other “normal” apps.
  • They’re responsive — the same app on my desktop Chrome browser has a “mobile-friendly” version on my mobile’s Safari or Chrome browser or when opened as an app.

But when you have to keep on throwing around the term “Progressive Web App” or “PWA” (people ask about push notifications which you then push back on with the reasoning that it’s currently a limitation for iOS), you want to have a better understanding of what you’re talking about. Well, at least I want to.

So I’ve read up a bit on what PWAs are or what makes a web app a PWA. Common to most of the results are some attributes of the PWAs and some baseline criteria to qualify as PWA.

Attributes

This list is a mix verbatim from Alex Russell (he used colons) and from Wikipedia (em dashes). These are the attributes or characteristics of PWAs.

  • Progressive — Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. [This seems similar to responsive though]
  • Responsive: to fit any form factor
  • Connectivity independent — Service workers allow work offline, or on low quality networks.
  • App-like — Feel like an app to the user with app-style interactions and navigation.
  • Fresh: Transparently always up-to-date thanks to the Service Worker update process
  • Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
  • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
  • Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
  • Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

Baseline Criteria

This is more of implementation requirements — so might not be quite visible to business owners. Copy-pasted the 3 listed items below verbatim:

To be a Progressive Web App, a site must:

And apparently, there’s the Lighthouse tool which can run automated checks to evaluate whether a site/web app is a PWA or not. It’s easily install-able as a Google Chrome extension and generates a nice looking report which also could seem like a reference on what to improve for your web app.

Sample output of report (this is just the summary, there’s a breakdown that actually follows)

So after going over all those links and references, do I know how to define a PWA?  Idk, I’ll probably revert to: they’re amped up web sites which can be installed behave like apps. 🙂

References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s