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!
Want to see the web app in action first and read later? Here you go:
To see the website turning into a standalone app, just open it in your phone’s browser, add it to your home screen, and then re-open it from there. Play around with airplane mode, or open it when you’re on a 2G network—it should always be accessible.
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:
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?
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!