Progressive Web Apps

Posted on by Chris

I recently began reading about Progressive Web Apps (PWAs) and their future potential. In past years, I’ve done several hello-world tests compiling HTML, CSS, & JS into native applications (e.g. using PhoneGap Build), but recently I have been trying to figure out how to best build a PWA, which does not require any device specific compiling (e.g. Swift or Objective-C for iOS or Java for Android apps) and essentially consists of using straight-up web technologies to create mobile apps.

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.

Wikipedia

I have yet to do a hello-world test of my own, but from what I can gather, it does not appear to be that hard. Let’s start with by defining the criteria.

So what exactly is a PWA?

PWAs are supposed to be: Progressive (i.e. work for user, everywhere, on every device, in alignment with progressive enhancement), Responsive, Work offline (e.g. using service workers), feel “app-like” (e.g. having an icon splash screen, rendering in full-screen mode with no native browser bars, running as it’s own app instance and not as a browser tab, fast loading/page rendering, animated transitions between screens, etc), be up-to-date (via service workers), use HTTPS, be discoverable (via a manifest.json and service worker registration), be able to use native device features (e.g. device notifications, camera, geolocation, etc.), be easily installable (no app store required), be easily shareable/linkable (via a URL).

Bare-bones PWA Checklist

Let’s assume that I have already have a responsive web site (as the application shell) that I want to convert into a PWA, what do I need to do? Below is a personal work-in-progress to-do/checklist:

  • Be sure to host it via HTTPS
  • Be sure to add a manifest.json (core meta data such as the app title, paths to icons at different sizes, path to start/index file, background-color, etc)
    • Be sure to create icons at various sizes
  • Be sure to add a service-worker.js file (with list of files to cache locally along with scripts to check for the latest available version/update)
  • Be sure to test it using Google’s PWA tool Lighthouse

Next Steps/Go Further/To-do List

If I ever find the time, this is what I would like to do:

  • Create a test “Hello World” PWA
  • Convert an existing web site/app into a PWA
  • Look into other related considerations, such as:
    • Look into web app frameworks (e.g. React, Vue, Angular, etc.), app-like frontend frameworks (e.g. Framework7), and other frameworks/tools/compilers (e.g. Ionic).
    • Look into state machines (e.g. statecharts and xstate)
    • Look into application shell architecture and best practices for authoring a app.js.
  • Look into GatsbyJS (React-based static site generator) and the possibility of using headless WordPress endpoints to populate a static generated site (that can be a PWA via plugins), example article to look into:

Resources