Atsushi Yamamoto

@jumbosushi

Atsushi Yamamoto

@jumbosushi

Photo by Noah Silliman on Unsplash

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

PWA

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

https://vaadin.com/blog/-/blogs/14122731

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

whatcanwebdo.today

Hardware Support

HTTPS

PWA

Recap

- Same engagement level as mobile

- No need to go through app stores

- Good performance

Lighthouse

https://github.com/GoogleChrome/lighthouse

What's the initial score?

1. Add manifest.json

2. Add Service Worker

3. Add more to Service Worker

{
  "name": "Web Application Manifest Sample",
  "short_name": "PWA Sample",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "theme_color": "#9E9E9E",
  "background_color": "#9E9E9E",
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}

1. Add manifest.json

2. Add Service Worker

3. Add more to Service Worker

1. Add manifest.json

Web Worker

No Access to DOM

Programmable Networking Proxy

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

1. Add manifest.json

2. Add Service Worker

3. Add more to Service Worker

2. Add Service Worker

Service Workers: An Introduction

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

localStorage

sessionStorage

Web SQL

File Systems API

AppCache

Synchronous

Depreciated

Only for Chrome

Depreciated

IndexedDB

Async (event-based)

Available in Chrome, Firefox, Opera

Wrappers available (PouchDB, Promise)

Cache API

Async (Promise-based)

key = Request

 value = Response

Works well with Service Worker

Cache API

URL accessible resource

IndexedDB

Other resource resource

if('caches' in window) {
  caches.open('test-cache').then(cache => { 
    cache.addAll(['/', '/images/example.png'])
      .then(() => { 
        // Cached!
      });
  });
}

Adding to Cache

caches.open('test-cache').then(cache => {
  cache.match('/image/example.png').then(matchedResponse => {
    console.log(matchedResponse);
  });
});

Using Cache

1. Add manifest.json

2. Add Service Worker

3. Add more to Service Worker

3. Add more to Service Worker

PWA

No iOS support?

That's it 

I'm done

Just Kidding

PWA is still awesome

https://developers.google.com/web/showcase/2016/aliexpress

https://developers.google.com/web/showcase/2016/aliexpress

pwa.rocks

pwa-directory.appspot.com

@jumbosushi

The emerging world of PWA @ DevTeach Montreal

By Atsushi Yamamoto

Made with Slides.com

The emerging world of PWA @ DevTeach Montreal

  • 1,854

More from Atsushi Yamamoto