A simple Progressive Web App (not WordPress)

As someone providing support for a WordPress caching plugin for a living and dealing with questions around page caching and website performance all day long, I am fascinated by the concept of Progressive Web Apps. So I made one, just for the fun of it!

Progressive Web Apps—what’s the fuzz about?

If you have not, or only vaguely heard about PWAs, the basic concept is this: Make content available offline, so a person who would access your site once would be able to pull it up later even if their phone happens to be on a slow network connection, or is even completely offline.

If you are interested in benefits for engagement and conversion, I recommend for you to read some of the case studies on PWA Stats.

Also, turning your website into a PWA does not require to re-build that website as a “single-page app”. Not at all!

Literally any website can be a progressive web app:

• switch over to HTTPS,
• add a JSON manifest file with your metacrap, and
• add a service worker.

That last step can be tricky if you’re new to service workers, but it’s […] certainly a lot easier than completely rearchitecting your existing website to be a JavaScript-driven single page app.

Jeremy Keith, Progressing the web

You can make a PWA, too!

For my own little PWA experiment, I followed a Beginner’s guide to making Progressive Web Apps, kindly posted by a Samsung Developer whose real name I would love to learn, so I could thank him properly.

Making a PWA (a trivially simple one, admittedly) was pretty straightforward with that tutorial. I did not pick a WordPress site for my first attempt, of course, but went with just the one page of static HTML linked at the top of this article.

Obviously, once you’re done, you’re going to want to know how well you’ve done. I used the Lighthouse audit panel in Chrome:

So yay, that was easy! 🎉

What’s next? WordPress?

The nice people over at Cloud Four have kindly shared their experience of how they turned their company WordPress website into a PWA.

They cover some of the technical bits, but what interested me most was their decision making for the cache strategy: Which pages (or views) should be available offline, and which should be replaced by a default placeholder page? Obviously, having a service worker fetch an entire larger website into the browser’s cache would not make sense.

I’d venture to predict that PWAs will be all over the place in a year from now; which obviously isn’t a very dramatic prediction since they have started to appear all over the place already.

I found some WordPress plugins related to offline content and service workers in the WordPress plugin directory, but most of them seem to provide a proof of concept rather than a ready-to-use product for WordPress site owners. Which is cool, I mean, no rush.

Do you have any first-hand experience turning a WordPress site into a Progressive Web App, flesh out a cache strategy, and implement a service worker? I’d love to hear about your thoughts in the comments!