The emerging world of PWA

Atsushi Yamamoto

@jumbosushi

PWA

Progressive Web App

Progressly Enhanced Website

"Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience."

Sam Dwyer
from "Progressive Enhancement: What It Is, And How To Use It?"

Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?

<!--[if lt IE 9]>

HTML + CSS + JS

CSS Grid +

Service Worker + ...

Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?

PWA

www.konga.com

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

- Site is served over HTTPS

- Pages are responsive on tablets & mobile devices

- The start URL (at least) loads while offline

- Add to Home screen

- First load fast even on 3G

- Page transitions don't feel like they block on the network

- Each page has a URL

- Content doesn't jump as the page loads

...

WHY PWA?

Cake drawings by Tiffany Tse from What is Progressive Enhancement and Why Should You Care?

The 2016 Mobile Web Report by comScore (slide 19)

PWA

{
  "short_name": "CakeOntheWeb.io",
  "name": "Joe's CakeOntheWeb.io",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "theme_color": "#2196F3",
  "background_color": "#2196F3",
  "display": "standalone",
  "orientation": "landscape"
}

<!-- inside head -->
<link rel="manifest" href="/manifest.json">

4X higher interaction rate from Add to Homescreen

The 2016 Mobile Web Report by comScore (slide 15)

"Mobile web audiences

are almost 3x the size

and growing 2x as fast

as app audiences."

PWA

Every step lose 20% of potential users

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

From https://youtu.be/qmE_jpnYXFo?t=96

People intrigued

1000

Load Store

800

Find the app

640

Click install

512

Accept Permissions

410

Download + wait

328

Users

262

Native Mobile App

People intrigued

1000

Users

800

PWA

"We've reviewed the application, and we've

decided not to publish the application"

www.konga.com

Source of app discovery:

2015 Mobile Marketing Insights (slide 10)

PWA

Pull to refresh by Regy Perlera on Dribble

Service Worker

Programmable

Network Proxy

Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', 
                  registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
} else {
  console.log('Service Worker is not supported :^(');
}