Progressive Web Apps

What is a Progressive Web App?

The start URL loads while offline
First load fast even on 3G
Site uses cache-first networking
Metadata provided for Add to Home screen
Push notifications support on web even when outside of the site
How is it implemented?

Chrome 52 or above
Service Workers
App Shell architecture
Caching assets and network requests
Static Content

Images

Static Content

Stylesheets
.reveal {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 42px;
  font-weight: normal;
  color: #fff;
}
            

Javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
      .register('./service-worker.js')
      .then(function() { console.log('Service Worker Registered'); });
}
            

Dynamic Content

XHR
Push Notification

Foreground
Background