Time to start PWA’ing WP [PART 1]

If you can’t make sense of this title, read on.

If you have been able to make sense of this title, read on anyway.

What are PWA’s?

PWA’s are progressive web apps.

What are Progressive Web Apps?

Progressive web apps are highly responsive web sites (for mobile devices) that take advantage of the latest features of HTML5, CSS3, and JS to serve up an “app” or “program” experience similar to an app you’d find in an app store. They run in a regular browser like Firefox or Chrome.

This is more than just a friendly aesthetic or design for mobile. It means implementing methods such as SPA (single page application), and features such as pre-loading and caching, content/page transitions, full screen mode (without the URL address bar), home screen icons, and notifications, among other “app-like” features.

PWA weather app example

Google’s developer section has a great section on Progressive Web Apps for a deeper understanding, as does Mozilla’s developer documentation for a quicker summary.

What are some examples of PWA’s?

Check these PWA’s out on your mobile phone. They’re not necessarily built on WordPress. I just want you to focus on their PWA features, so you get the feel of what a PWA is like:

  • events.google.com/io2016If you browse it in Chrome on your phone, this one will prompt you to add an icon to your home screen. It will notify you that it cached the page on your first visit. Also, take note of the branding: the pre-loader with the flashing logo when you first visit the site, as well as content transition effects as you browse the main section. It just feels “app-y”.
  • html5games.comGame apps are often one of the main culprits that burden your phone. This site lets you enjoy mobile phone games without leaving any kind of big footprint on your phone’s operating system. They’re not quite as sophisticated as some of the paid, premium games you can get at an app or play store, but they’re getting there.
  • web.telegram.orgIf you’ve used WhatsApp or Viber, this is a similar messaging deal, only it runs “app-like” right in your browser tab.
  • pwa.rocksMany more PWA examples are available at this above site.

Codelabs at Google also has a great tutorial on how to code your first web app: codelabs.developers.google.com/codelabs/your-first-pwapp

Why bother?

Although they are still a work in progress to a certain degree, progressive web apps are evolving to match a lot of the complexity and sophistication of their native “app store” counterparts. Their main big benefit is that you don’t have to use a programming language such as Objective C or C. Web programmers are able to use their beloved, trusted trio of HTML/CSS/JS to get the job done, and this means producing apps that are cross-platform on desktop, mobile, and any OS.

PWA’s also make the web more open and free. They liberate us from the shackles of Apple and Google, who have a quite a grip on the app industry and the vetting process through their stores.

Why PWA’s with WordPress?

At the time of writing this article, WordPress claims to power 28% of the internet.

That, my friends, is no small number.

There are a lot of businesses with their site on WordPress and, much like these businesses have a dependency and legacy to Microsoft Word or Office for their word processing needs, they also now have a dependency on WordPress for their website needs.

In the coming years, users are going to come to expect PWA-like behaviour, and it is probably not time and cost effective for most businesses to uproot their entire online existence onto a new platform.

For that reason, “PWA’ing” an existing WordPress site is probably going to be the answer.

But do I have to?

Not really.

For many businesses, a PWA is overkill. A traditional responsive website will meet their needs, and most WP themes nowadays are already just that: responsive out of the box.

There are two main instances that you may need to invest some time on a project that morphs an existing WordPress site into a progressive web app.

  1. A client requests an “app” (a native app) to go along with his/her existing site; however, that app would be overkill, since a PWA can most likely achieve most of the features that a client is searching for. Many users don’t want to add yet annnooother app on their phone to burden it, so a PWA makes sense. It also makes sense for the client too, often being more cost effective.
  2. A client has certain requests in regards to the user experience of their existing, responsive WordPress site that only PWA features can handle. For example, s/he may want to send out notifications to his/her users’ phone, in order to keep those users more engaged with the business online.

Knowledge is power

So now you have the 411 on the connection between progressive web apps and WordPress.

In the next article, I’ll go over some practical ways to get WordPress to look and behave more like a progressive web app.





Leave a Reply