Time to start PWA’ing WP [PART 2]

In part one of this article series, we explored what progressive web apps are, and why they can be relevant to WordPress.

In this article, we’ll look at three ways for making WordPress look and feel like a progressive web app.

1. The easiest way

If you’re looking for the most non-coded way to turn WP into a PWA, then plugins are the way to go.

At the time of writing this article, two popular ones to look at are WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps and Progressive Web Apps.

These add features to your site such as a multi-image mosaic on the cover page (see the above app screenshots for an example), page and sub-page navigation, side-to-side navigation with lateral swiping through categories, responsive UI, app themes, post/page/comment sync’ing for on and offline, and “add to home screen” feature.

 

A few screenshots from the "WordPress Mobile Pack" plugin showing some of the native app-like, 'swipe-able' interfaces.

 

The obvious benefit here is that, as most WP plugins do, this method offers a WYSIWYG or GUI, “clickable” way to achieve the desired goal. The pitfall is that, like any automated solution, you get locked into the trappings of that particular system and are at the mercy of that one particular author. (e.g. after you’ve invested lots of time and money configuring your WP installation to conform to the plugin, what happens if the plugin author stops updating it, and your WP installation updates it’s core files?)

Another benefit of this method is that it easily keeps your desktop and mobile experiences separate. You could have the TwentyEighten WP theme as your desktop experience, and then a completely different mosaic-style, PWA theme when the same site is viewed on your phone.

The downside? While fine on Chrome and Safari currently, Firefox Mobile still displays the desktop version of the site. Also keep in mind that, in the same way people have “app fatigue” on their phones, many WP sites out there have “plugin fatigue” too. Going the PWA route via a plugin is essentially adding one more plugin to your phone, and a fair sized plugin at that.

The semi-hard way

If you want to avoid the limitations of a plugin, Hand coding some select PWA features into your current theme may be the way to go.

4 common, experience-changing ones you may want to consider could be:

  • Push notifications
  • “Add to home screen” option
  • Pre-loader that flashes the company logo on startup
  • jQuery Page transitions

An online/offline sync’ing feature could be a more difficult one to pull off, but you may consider a lighter caching plugin (than, say, a full PWA plugin) such as WP Super Cache to supplement this feature, and speed up the browsing experience.

The benefit of hand coding select PWA features is that it can still keep your site a little more flexible and open to future trends or customization, as opposed funneling it all through a single plugin. If you know front end programming, most of the above suggestions essentially involve creating a .js file or two, linking them up to header.php with a <script> tag, and perhaps executing some Javascript or jQuery in header.php or footer.php. If you’ve already done some basic child theming, you know exactly what I’m talking about.

The downside with this method is that it’s a bit of a half-baked job. In a way, it’s neither here nor there (not quite a website, but not quite a web app either). Also, hand coding the features independently has the potential to leave the coding eco-system a little disjointed.

 

The hard way

If you really want to build a true progressive web app, you can build an independent, non-Wordpress PWA first, and then merge that with a WordPress theme after.

This type of WordPress PWA would even include a manifest.json file. That’s basically to your app what a cover page to your essay. (Sums everything up on the first page.)

You’ll want to build or download a preexisting progressive web app shell. Chrome Developer has the go-to tutorial for creating your first web app here. Alternatively, you could skip to the “Architect your App Shell” section of the tutorial here, or simply straight download the ready-to-go app shell files from this link.

After you have your app shell, what you would do is follow the above tutorial to finish your web app…but even then, only half the work is done!

What you would still need to do is then build a WordPress theme from scratch, while baking your said PWA app shell into that, and merging your WP theme together with your PWA app.

The specifics of how to do this is an advanced topic, beyond the scope of this article, but the resources provided here should theoretically be most of what you need to get started.

The benefit of this method is that it is truly a progressive web app: flexible, extensible, and scalable, aside from any typical trappings of WordPress itself as a CMS. It’s a total custom solution when it comes to turning WordPress into a progressive web app. As a result, it comes with all the benefits that a custom solution offers.

The downside with this method is… well, you saw for yourself the process that is involved in my description. Chances are, you have to learn about a bunch of new coding concepts in that Chrome Developer tutorial, not to mention learn new concepts in building a WP theme from scratch if you’ve only built child themes before. And like any custom solution in tech, this method requires more advanced coding, time, and perhaps most importantly, a healthy client budget (and client will) to make it happen.

 

Which method to choose?

You may already know the answer to this, but it largely depends on your skills vs. the complexity of the project at hand.

If the mom and pop coffee shop down the street needs a digital presence, just building a PWA in the first place is probably overkill; that kind of business probably just needs a simple website. However, if it’s decided that such a business does indeed need a PWA, then the method #1 using a plugin is the way to go.

Perhaps a non-profit website with a board of directors and many site users could benefit from method #2. These tend to be complex WordPress configurations, with lots of content, so I’d argue that it’s a bit risky to channel all that content and configuration through a single plugin’s view on mobile. Keep that client’s existing website the way it is, and just hand code in some select app-like functionality. That way, you have minimal interference with it’s existing complexity.

#3 could be a great solution if you yourself are (or building the site of) a well funded startup. That kind of company might have to get a beta version of an app out to market rapidly. Method #3 provides a nice way to do that. The PWA aspect will give funders and investors the “app-like” feel of the software to test it out, in short development time, while WordPress will handle the basic functionality, such as registration, user authentication, and CRUD.

 

Try it!

I encourage you to give PWA’s a try in some form or another. If you combine them with an easy-to-remember top level domain like .guru or .ninja, they can make for rapid application development with an native app-like feel, yet still using your beloved, trusted HTML/CSS/JS technology stack.

 

Comments

comments

Leave a Reply