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

<!--[if lt IE 9]>

HTML + CSS + JS

CSS Grid +

Service Worker + ...

PWA

www.konga.com

- 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?

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

"Mobile web audiences

are almost 3x the size

and growing 2x as fast

as app audiences."

PWA

Every step lose 20% of potential users

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"

Source of app discovery:

PWA

Pull to refresh

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 :^(');
}

Service Worker

  • Network or Cache w/ timeout
  • Cache Only
  • Cache & Update
  • Push Subscription
  • Background Sync

konga.com example

Check out serviceworke.rs for more

RAIL 

  • First time load:               <10s on 3G
  • Aspirational goal:          <3s to first paint
  • Repeat visit page load: <500 ms
  • Always scrolling:            60 frames/second
  • Content shouldn't jump as images are loaded

 

Hardware Support

HTTPS

PWA

https://jakearchibald.github.io/isserviceworkerready/

PWA

No iOS support?

That's it 

I'm done

Just Kidding

PWA is still awesome

Thanks!

@jumbosushi

The emerging world of PWA @ OttawaJS

By Atsushi Yamamoto

The emerging world of PWA @ OttawaJS

  • 86
Loading comments...

More from Atsushi Yamamoto