WordPress contributors are working on getting support for Progressive Web Apps (PWA) into core. A new PWA feature plugin is now available on WordPress.org, spearheaded by the teams at XWP, Google, and Automattic.
Progressive Web Apps are applications that run on the web but provide a speedy app-like experience inside a mobile browser. Google describes them as having the following three qualities:
- Reliable – Load instantly and never show the downasaur, even in uncertain network conditions
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling
- Engaging – Feel like a natural app on the device, with an immersive user experience
The plugin adds support for technologies that PWAs require, including Service Workers, a Web App Manifest, and HTTPS. These technologies support functions like background syncing, offline content, push notifications, mobile home screen icon, and other PWA features.
XWP CTO Weston Ruter said the purpose of the feature plugin is to curate PWA capabilities for proposed merging into core. The idea is to merge them piece by piece. Core tickets are already in process for adding support for web app manifests and support for service workers, as well as bringing improvements to HTTPS.
“This PWA feature plugin is intended to equip and facilitate other plugins which implement PWA features,” Ruter said. “It’s not intended to negate any existing plugins with these features, but rather to allow such plugins (and themes) to work together seamlessly and expand upon them.”
The first release of the plugin on WordPress.org (v0.1.0) adds support for web app manifests and initial support for allowing theme and plugin developers to register scripts for service workers via wp_register_service_worker(). It also includes an API for detecting whether HTTPS is available.
“A next step for service workers in the PWA feature plugin is to integrate Workbox to provide a declarative WordPress PHP abstraction for managing the caching strategies for routes, with support for detecting conflicts,” Ruter said. Anyone who is interested to contribute to PWA support for WordPress can check out the discussions and plugin on GitHub.
In the past, app-like experiences were only available for sites and services that had their own native mobile apps, but native apps can be costly to develop and maintain. Progressive web apps use the greater web as their platform and are quick to spin up. They make content easier to access on mobile even without an internet connection. It’s also far easier to tap a home screen icon than to enter a URL on mobile, and this makes users more likely to engage with their favorite sites.
PWA Stats is a site that features case studies of progressive web apps that have significantly increased performance, engagement, and conversion. A few compelling examples include:
- Tinder cut load times from 11.91 seconds to 4.69 seconds with their new PWA. The PWA is 90% smaller than Tinder’s native Android app. User engagement is up across the board on the PWA.
- Grand Velas Riviera Maya resort increased its Black Friday conversion rate by 53% due to its progressive web app’s speed and notifications.
- Trivago saw an increase of 150% for people who add its PWA to the home screen. Increased engagement led to a 97% increase in clickouts to hotel offers. Users who go offline while browsing can continue to access the site and 67% continue to browse the site when they come back online.
- Pinterest rebuilt their mobile site as a PWA and core engagements increased by 60%. They also saw a 44% increase in user-generated ad revenue and time spent on the site has increased by 40%.
PWA support in WordPress will enable the plugin and theme ecosystems to work together in providing site owners with more engaging ways to connect with their visitors. Once the market starts building on core support, site owners should soon be able to offer better experiences for mobile users without having to become experts in the technologies that power progressive web apps.
I switched my manually coded implementation with this plugin. Chrome’s Lighthouse says it’s poorer than my implementation and it’s missing the “Add to home screen” feature. But I’d rather have it as a plugin than hardcoded in my theme and I hope they’ll update it more frequently.