Note: Content might be outdated!
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:
WordPress is not WordPress.com
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:
- 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.
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!
No first hand experience on my side, but some time ago people at my former company evaluated using such a thing in order to make a wordpress-driven small knowledgebase available offline for service engineers.
A prototype turned out to be unstable und unreliable, especially when it came to updating existing articles and images and insufficient for filtering/searching. May be lack of knowledge/experience, may be browser support is better now. Anyway they did not want to risk time/money to figure it out.
So they used the proven way building a hybrid Android-App, using wp’s rest api in online mode, (my part, including adding comments), and importing a server-build json data package into local sqlite db for offline mode.
The Washington Post saw 5x increase in engagement on iOS with the public beta of their PWA. Seems the definition of what a “prooven way” is has changed. 🙂
Ja, alles, was man verstanden hat ist veraltet…
This is a fun project and it couldn’t have a better domain name. Pretty obvious!
👋 I’d like to contribute to this project. I think we can make it a bit more simple and to the point!
Thanks! Sure, here you go: https://github.com/glueckpress/wpistnotwp.com