What is PWA? A Simple Guide for Non-Developers

PWA (short for Progressive Web App) are so rarely requested as a feature during development, so it feels like no one from management is even aware about it.

That’s why I want to explain how PWA might be useful for a business and what features it unlocks for a website.

What is PWA and how it works

Those files provide an app-like experience to users – website becomes installable, an app icon appears on the device upon installation. Furthermore, service-worker.js is a layer between website and a browser and can provide various custom solutions, like serving cached content even if the device is offline or sending push notifications to device.

With that additional functionality, enabling PWA lets you make a non native, but still Android, iOS, Desktop and Web app from just your website.

What features are available with PWA

Lets look into most interesting features, that a product can get with PWA:

• Different caching strategies. Serve cache only when offline. Serve cache while new version is loaded.
• Background jobs. Service worker can perform jobs even when user is not browsing your site right now. Fetch new content in the background for example.
• Push notifications. You can use Firebase or recently added PushAPI to send native notifications to user device. Marketing offers, new posts and such.
• Badges. Small version of notifications that appear right on the app icon. You know, like the counter of unreads on messaging apps.
• Share through native UI. Allows you to share content by bringing up the device UI with all available share targets of the device.
• Load balancing. You can intercept the request and serve it from a server of your choice.
• Deferred requests. Service worker can store requests that failed because server was unavailable or user was offline and retry them periodically in background or just later.
• Install to device. A shortcut to open you website without browser and local storage for your website when user is offline. You can force download all or some pages into cache, even if a user didn’t visit them yet.
• List in App Store. This is not 100% real for all app stores, but Google Play allows PWA apps to be published. With a custom webview wrapper I think it might be available for publishing in Apple Store as well. However in both cases, native payment solutions might be unavailable.
• One codebase. You can get app-like functionality and appearance without having to maintain 3 versions of code. Well, to be fair you can build native apps with one codebase with React Native or Unity as well, but its a different story.
• PWA can outperform native application. Web was always optimized to work on low-end devices, while native application might be resource-intensive without proper optimizations.

Cons of using Progressive Web Apps

There are still some limitations with this approach, lets see, what the problems are:

• Might not be able to publish in App Store or use App Store APIs.
• Bad installation flow. Prompt for installation appears rarely and you can’t control how often to show it. User can manually install the app through browser settings.
• This technology introduces a new layer of complexity and potential bugs to the website.

PWA for WordPress with WP BOX

WP BOX implements core PWA functionality through a must use plugin for WordPress with dynamically generated manifest.json, which is populated with data from current site title and current logo.

This plugin also enqueues an async script, which upon page load registers service-worker.js

WP BOX also manages version control for all 3 files.

Current implementation allows installation on device and serving content from cache when device is offline. Install WP BOX to try it!