Raymond Camden talks about “Progressive Web Apps (A Gentle Intro for CFers who are scared of PWAs)” in this episode of ColdFusion Alive podcast with host Michaela Light. By our nature web developers are prone to anxiety.

Show notes

What is a Progressive Web App (PWA) from a high level

The next level from Web 2.0

“Progressive Web Apps are user experiences that have the reach of the web, and are:

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.”

What is a PWA in more detail?

A Progressive Web App is:

Progressive

- Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.

Responsive

- Fits any form factor: desktop, mobile, tablet, or whatever is next.

Connectivity independent

- Enhanced with service workers to work offline or on low-quality networks.

App-like

- Feels like an app, because the app shell model separates the application functionality from application content .

Fresh

- Always up-to-date thanks to the service worker update process.

Safe

- Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.

Discoverable

- Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.

Re-engageable

- Makes re-engagement easy through features like push notifications.

Installable

- Allows users to add apps they find most useful to their home screen without the hassle of an app store.

Linkable

- Easily share the application via URL, does not require complex installation.

(from https://developers.google.com/web/progressive-web-apps/ )

Why care?

Better UX, more engagement, more ad revenue or sales

How compare to a native app

Easier to build

Very easy to install (just go to the website link!)

Cross device on release

Not for complex

Progressive - grac

Background sync

Push notifications

How different from Responsive web apps?

Progressive apps are responsive with other features too

Famous Examples

Uber - runs great even on 2G networks

tech details https://eng.uber.com/m-uber/

Pinterest - user engagement time up 40%, ad revenue up 44%

Tech details https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

Tinder - 90% reduction in download size

Tech details  https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

Forbes - content load time down from 6.5 to 2.5 seconds, 40% increase in user engagement

Tech details https://digiday.com/media/new-mobile-site-forbes-boosted-impressions-per-session-10-percent/

What is the preferred way of building a PWA?

Uses Mobile chrome features

Frameworks

Bootstrap for the responsive part

Offline libraries for connectivity independence

What are you looking forward to at ITB?

Mentioned in this episode

https://developers.google.com/web/progressive-web-apps/

PWAstats.com

Chrome User Experience report (CrUX)

Brad Wood CommandBox episode

Listen to the Audio

Bio

Raymond Camden

Raymond Camden is a senior developer advocate for Auth0 Extend. His work focuses on Extend, serverless customization, and the web in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at [email protected].

Interview Transcript:

Michaela 0:01

Welcome back to the show today we're talking about progressive web apps, something that you might have been afraid of. But after this gentle introduction from Ray Camden,