Progressive Web Apps: How They’ll Change Your WordPress Business

You have undoubtedly heard about the coming wave of the mobile web. The most common thing you’ve probably heard is that mobile access to the web is increasing rapidly, and that about half of all web traffic is now via phone or tablet. A February 2018 report from the Pew Research Center notes that 95% of all Americans own a cellphone, while the share of Americans with smartphones is at 77%.

You don’t have to look far to see the impact of mobile. Look at your own behavior, and that of your family. In December 2016, comScore reported that the average American older than 17 spent two hours and 51 minutes per day on their phone.

Statcounter.com notes that global web traffic has mostly come from mobile devices for at least a year (51.95% in February 2018).

While you may think that you can’t afford to develop a native app for your mobile users to store on their phones, there’s a terrific alternative within reach of every business: Progressive Web Applications. Perhaps you’ve heard of Progressive Web Applications (PWAs) and how people are using them to build their business. In this post, you’ll learn a little bit about PWAs and why you should think harder about using them in 2018.

Some Definitions

Progressive Web Apps (PWAs) represent a collection of web standards originally developed by Google to improve web site performance on mobile devices. As a result, sites on the web perform more like dedicated mobile applications that you would find on the Apple App Store, or Google Play.

Another definition from the developers for the Indian hotel chain Treebo (more about them later): “PWAs are single page applications that are progressively enhanced with features that bring about a more immersive, native app like experience.”

Breaking that down a little, PWAs on mobile devices allow your readers and customers to load your site’s home page quickly, and use many of the same features on the mobile device that a native app would use. Your site can exist outside the browser, even when the device isn’t connected to the internet. More on this later.

Other definitions

Some of the key technical pieces of a PWA include:

Service workers are the key technology associated with PWAs. These allow PWAs to function outside of the network.

Manifest files contain the icon and name that connects the app on the device to the website. The developer can also add design elements here to enhance your customer experience.

Push notifications communicate with your users (with their permission), so they keep coming back.

Some Reasons

So why should your site include a PWA? It’s pretty simple.

Better Performance — even on the desktop!

You know that you’ve got a limited time to win over a first-time visitor — six seconds of loading before a potential customer ducks out and visits the next site on the search results. Mobile users are even more impatient — half of your potential users leave if a site takes more than 3 seconds to load!

Good news: The changes you make to create a progressive web app will make your site run faster!

Case in point: Indian hotel company Treebo reduced their mobile load time from six seconds to 1.5 seconds by creating their PWA. The site now loads on desktop in one second! Their tech team reported that the site’s search rankings improved, and monthly conversion rate more than doubled!

Offline Capability

PWAs don’t need to be on the Internet to run. Your users can access all the content of the app from their device or desktop.

In fact, one of the nicer things about a PWA is that your customer can save the site on their device’s home page and use it later to buy your product, or get more information.

For example, CNET’s Tech Today offers a daily summary of the technology-related news that is the site’s bread and butter. If you open the site with Google Chrome on an Android device, and scroll down to the bottom of the screen, you’ll see this:

Add a PWA to a mobile home screen. No app store required!
Add a PWA to a mobile home screen. No app store required!

Tap Add to Home Screen to download the Tech Today progressive web app to your device. Tap the icon to load the current Top 10 stories. Swipe left to read each story. Tap the CNET logo to open the CNET home page in your browser.

Note: In Firefox, sites with PWAs have an “Add to Home Page” icon (a plus-sign in a tiny house) right in the address bar. If the PWA is already installed, the Android logo on the address bar takes you to the PWA.

One thing your site doesn’t need: “Download our app” widgets taking up space on your page (usually with iTunes and Android logos distracting users). If Chrome notices that a user has opened your PWA-enabled site a few times a week, it will prompt them to add your PWA. Updates are also automatic.

No need for complex programming languages

You may have considered creating a native mobile app for your business, but discovered that creating a mobile app is a different animal than creating a web site. If you work with a web design/development agency to maintain your site, they won’t necessarily have the right skillset to create an app for the dominant mobile vendors.

For your native to appear in the Apple App Store, your developers have to register with the Apple Developer Network, use Apple’s development tool (which only runs on Mac) and have to know an Apple-approved programming language: Swift or Objective C.

Programming for Android is a little easier (no developer approval required), but the vast majority of Android apps are written in Java, which can be a difficult language to learn.

For either app to appear in the Apple or Android web stores, the completed app has to win approval from the gatekeepers at the respective store.

In contrast, Progressive Web Apps are made with the common languages of the web: HTML, Cascading Style Sheets (CSS), and JavaScript. In short, even beginning web developers can create high-quality PWAs.

More to the point, you don’t need a lot of computer-science education to make a PWA for your WordPress website. If you’ve ever changed the formatting of your site through a child theme, you can probably make a PWA too. We’ll address the coding issues in another post.

Increasing Support from the Tech Giants

Standards take a long time to become standards. Google first promoted PWAs in 2015.

For the longest time Chrome was the only browser to support PWAs, but this is now changing. In the last few months:

  • Mozilla added PWA support in Firefox 58
  • Apple recently announced support for web apps in iOS
  • Microsoft will support PWAs in the next version of Windows 10, due later this year (2018).

Going further than other OS vendors, Microsoft said that “high-quality” PWAs will soon be integrated in the Windows 10 app store on both mobile and desktops.

WordPress and PWAs

WordPress does not yet fully support making progressive web apps in the core application. The Jetpack team is committed to adding PWA functionality in the coming year. This is aided by the Javascript-ification of WordPress.

Jetpack is “gradually introducing PWA features as they are ready,” according to developer Dan Walmsley in a post on the WordPress VIP blog. Developers can add manifest files using Jetpack’s manifest module since v5.6.0, and they introducted lazy loading images, which speeds up site loading even when there’s a lot of images on the page. More features will be coming this year.

A few plugins seek to add PWA functionality, but haven’t been heavily adopted.

  • The WordPress Optimization tool provides a service worker and manifest tool.
  • Super Progressive Web Apps generates a manifest, and a Add to Home Screen button, among other features.
  • The WordPress Mobile Pack also adds PWA features

How will you use PWAs?

In this post, you’ve learned a bit about Progressive Web Apps, and why you should consider adding one to your business website:

  • The ever-increasing wave of traffic from mobile devices
  • Better performance for your website — mobile and desktop
  • Availability even when the device is offline
  • Uses standard web features: HTML, CSS and Javascript. Cheaper to build
  • Increasing support from browsers and operating systems

Perhaps now you want to know how to make a PWA on top of WordPress? Or show your developers how to make it happen? We’ll look at that in a future post.

Michael McCallister
Are you reluctant to move to a mobile-first strategy? What’s holding you back? Have you tried making a native mobile app? A PWA? Do your users match the profile for mobile access? Let us know what you think.