Creating a PWA (Progressive Web App) with WordPress
So while we’ve been able to build web apps and responsive websites since ~2012, the term Progressive Web App was introduced by Google (Alex Russel and Frances Berriman) in 2015.
Although technically introduced by Google, Steve Jobs referenced a very similar way of building non-native apps in 2007.
PWA’s may only now be crossing your day-to-day dev path because we’re reaching a point where browser tech can produce pretty damn good app-like experiences. We shouldn’t expect PWA’s to be as good as native iOS or Android apps (not yet anyway) – they don’t have as deep integration with the physical hardware of the device, and they’re using standard web tech (HTML, CSS, JS) which is trying to adapt one codebase to all devices and operating systems – including desktop.
How is a PWA different?
Don’t get too focused on the term PWA – you’re already doing most of the work by making your website responsive and mimicking the style of a native app on the web. A basic PWA is just going to add service workers (for offline access) and a manifest.json file for the homescreen icons and name – though it can go much deeper than this.
Web apps usually have a few key elements missing. Here’s where we can make a web app feel more like a native app:
- App icon and name for home screens
- Push notifications
- Background syncing
- Fast loading (ideally less than 3 seconds)
- Installable from the Google Play store or in browser prompts (no Apple App Store support yet)
- Hardware-accelerated CSS animations
- Access to other hardware features such as camera and microphone