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

<!--[if lt IE 9]>

HTML + CSS + JS

CSS Grid +

Service Worker + ...

PWA

www.konga.com

PWA

- 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

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

Hardware Support

HTTPS

PWA

Recap

- Same engagement level as mobile

- No need to go through app stores

- Good performance

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

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

@jumbosushi

The emerging world of PWA @ DevTeach Montreal

By Atsushi Yamamoto

The emerging world of PWA @ DevTeach Montreal

  • 1,861