Progressive Web Apps

Your web app on steroids

DublinJS, Dublin, September 2018

Slides, links, etc.

maxpou.fr/speaking/

Progressive Web Apps

Your web app on steroids

DublinJS, Dublin, September 2018

Native apps are "doomed"

50%
80%
94%
of all U.S. smartphone users download zero apps per month
of time spent is in users' top 3 apps
of revenue in the App Store comes from just 1% of all publishers

App install friction

Retention

More than 75% of App Downloads Open an App Once And Never Come Back

application retention

Source: ComScore 2017 U.S. Mobile App Report

Do I really need an app for that?

It's hard to reach new cusommers

comscore audience web modile

...but...

Users time spent

13% Mobile web 87% Apps

Source: comScore Mobile Metrix June 2015

Capability vs Reachability

Capability vs Reachability

Capability vs Reachability

Capability vs Reachability

Introducing
Progressive Web Apps

Introducing PWA

#1 Linkable

1 page = 1 link

#2 Safe

Let's Encrypt: a free, automated, and open Certificate Authority

letsencrypt sponsors

#3 Responsive

content is like water

#4 App-like

Speed matter

Team Red Bull Racing tire change
  • 2.05 Seconds = Team Red Bull Racing tire change
  • 19 seconds = average page load time (3G network)

53% of users bounce if sites load > 3s

source: doubleclickbygoogle.com

Application shell architecture

app shell architecture
app rendered

Georges.com reduce page load by 3.8

#5 Progressive

Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

Not every browsers are the same

what web can do today

https://whatwebcando.today (Firefox 58 Ubuntu)

#6 Fresh

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

Avoid this:

#7 Installable

install PWA install PWA install PWA install PWA

Chrome create APK / Web APK (Android)

#8 Discoverable

Web App Manifest

manifest.json

PWA in Windows Store!

how Windows store crawl PWA

blogs.windows.com

Lighthouse

lighthouse logo Report example

#9 Re-engageable

push notifications

Please: ask only when needed.

Web payment API (Draft)

Web payment API

Payment Request API (W3C)

Web Share API (Draft)

Web payment API

#10 Connectivity independent

"The best request is no request"
chrome offline T-rex
oh my god!!!

45% of mobile connections are still on slower 2G networks


(Source: GSMA)

Service workers

what is a service worker

Service workers

what is a service worker

Offline strategies

Cache first

cache falling back to network

The offline cookbook - Jake Archibald

Offline strategies

Network first

network falling back to cache

The offline cookbook - Jake Archibald

Offline strategies

cache then network

cache then network

The offline cookbook - Jake Archibald

Offline strategies

stale while revalidate

stale while revalidate

The offline cookbook - Jake Archibald

Example: Cache first

code without workbox

Workbox

example with Workbox example with Workbox

#11 Single Page Application

Feedbacks

Twitter iOS native app

twitter lite pwa

Twitter (Lite)

  • +65% pages per session
  • +75% Tweets sent
  • +20% bounce rate

Source: developers.google.com

Forbes

  • +43% sessions per user
  • +20% ad viewability
  • x3 scroll depth
  • +100% engagement
Forbes pwa

Source: developers.google.com

Pinterest

Old mobile web vs. new mobile web

+40%
+44%
+50%
+60%
Time spent > 5 minutes
User-generated Ad $
Ad Click Throughs
Core engagements

Web vs. native

+5%
+2%
+0%
+2-3%
Time spent > 5 minutes
User-generated Ad $
Ad Click Throughs
Core engagements

Source: A Pinterest PWA Performance Case Study by @addyosmani

Try it out!

flipkart google maps instagram starbucks tinder twitter

Let's Summarize

My definition of PWA

baby car

Let's Summarize

"Just websites that took all the right vitamins"
- Alex Russell

Fast

Integrated

Reliable

Engaging
Capability vs Reachability

Thank you.

Back up slides

Services workers not ready?

can I use service workers? Yes.

Service Workers + subdomains =

    3 subdomains = 3 Service Workers

  • www.website.com
  • secure.website.com
  • french.website.com

Foreign Fetch Status (Chrome Platform)

Tool: PWA Builder

pwa builder

Tool: webpagetest.org

Performance is Money

Think With Google: Potential Revenue Impact Calculator

Potential Revenue Impact Calculator

Native development still relevant

facebook mobile stats

Google Maps PWA

PWA: 205kB vs. Native app: 193MB

"I need performance"

Checkout:

  • Performance as a feature
  • Do you really need to track you customers that much?
  • page-transitions.com by (@sarah_edo)
  • WebAssembly (Wasm)