Progressive web apps

Progressive Web Apps

Your web app on steroids

Maxence Poutord - @_maxpou

DublinJS, Dublin, September 2018

Slides, links, etc.

maxpou.fr/speaking/

Progressive Web Apps

Your web app on steroids

Maxence Poutord - @_maxpou

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

Source: ComScore 2017 U.S. Mobile App Report

Do I really need an app for that?

It's hard to reach new cusommers

...but...

Users time spent

Source: comScore Mobile Metrix June 2015

Capability vs Reachability

Introducing
Progressive Web Apps

#1 Linkable

1 page = 1 link

#2 Safe

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

#3 Responsive

#4 App-like

Speed matter

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

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

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

#6 Fresh

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

Avoid this:

#7 Installable

Chrome create APK / Web APK (Android)

#8 Discoverable

Web App Manifest


{
  "name": "GitVub",
  "short_name": "GitVub",
  "icons": [
    {
      "src": "/static/img/icons/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    }, 
    // ...
  ],
  "start_url": "/index.html?source=homescreen",
  "display": "fullscreen",
  "background_color": "#f5f5f5",
  "theme_color": "#424242"
}

PWA in Windows Store!

blogs.windows.com

Lighthouse

Report example

#9 Re-engageable

Please: ask only when needed.

Web payment API (Draft)

Payment Request API (W3C)

Web Share API (Draft)

#10 Connectivity independent

"The best request is no request"

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

(Source: GSMA)

Service workers

Service workers

Offline strategies

Cache first

The offline cookbook - Jake Archibald

Offline strategies

Network first

The offline cookbook - Jake Archibald

Offline strategies

cache then network

The offline cookbook - Jake Archibald

Offline strategies

stale while revalidate

The offline cookbook - Jake Archibald

Example: Cache first


self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function() {
      return caches.match(event.request)
    })
  )
})

Workbox


workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      })
    ]
  })
)
workbox.routing.registerRoute(
  new RegExp('https://api.github.com.*'),
  workbox.strategies.networkFirst()
)

#11 Single Page Application

Feedbacks

Twitter iOS native app

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

️

Source: developers.google.com

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!

Let's Summarize

My definition of PWA

Let's Summarize

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

Fast

Integrated

Reliable

Engaging

Thank you.

@_maxpou - maxpou.fr - hello@maxpou.fr

Back up slides

Services workers not ready?

@google, @mozilla, @Microsoft , @samsung and @opera on stage for #pwadevsummit Q&A session ! pic.twitter.com/3V4krKnEsq
— Nicolas Inchauspé (@nicoinch) June 21, 2016

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

Tool: webpagetest.org

Performance is Money

Think With Google: Potential Revenue Impact Calculator

Native development still relevant

Google Maps PWA

PWA: 205kB vs. Native app: 193MB

Playing with Google Maps #PWA pic.twitter.com/smrbCNPbpJ
— Maxence Poutord (@_maxpou) June 21, 2018

"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)

Progressive Web Apps

Your web app on steroids

Slides, links, etc.

maxpou.fr/speaking/

Progressive Web Apps

Your web app on steroids

Native apps are "doomed"

App install friction

Retention

Do I really need an app for that?

It's hard to reach new cusommers

...but...

Users time spent

Capability vs Reachability

Capability vs Reachability

IntroducingProgressive Web Apps

#1 Linkable

#2 Safe

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

#3 Responsive

#4 App-like

Speed matter

Application shell architecture

#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

#6 Fresh

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

Avoid this:

#7 Installable

#8 Discoverable

Web App Manifest

PWA in Windows Store!

Lighthouse

#9 Re-engageable

Web payment API (Draft)

Web Share API (Draft)

#10 Connectivity independent

Service workers

Service workers

Offline strategies

Cache first

Offline strategies

Network first

Offline strategies

cache then network

Offline strategies

stale while revalidate

Example: Cache first

Workbox

#11 Single Page Application

Feedbacks

Twitter iOS native app

Twitter (Lite)

Forbes

Pinterest

Old mobile web vs. new mobile web

Web vs. native

Try it out!

Let's Summarize

Let's Summarize

Thank you.

Back up slides

Services workers not ready?

Service Workers + subdomains =

Tool: PWA Builder

Tool: webpagetest.org

Performance is Money

Native development still relevant

Google Maps PWA

PWA: 205kB vs. Native app: 193MB

"I need performance"

Introducing
Progressive Web Apps