/pwa-dev-summit-presentation

Progressive Web App

What is PWA?

  • "A Progressive Web App uses modern web capabilities to deliver an app-like user experience" - Progressive Web Apps

  • Native app features in mobile browsers (use them if available)

    • Offline functionality
    • Push notification
    • Content caching
    • Streams

  • Internet connection is a feautre not a requirement (progressively)

Why you should care?!

  • Emerging markets will bring billions of new internet users
  • These users will interact with your app on low end mobile devices with ~2G connection
  • Africa: 1 month of work = 180 MB
  • India: 17 hours of work = 500 MB
  • Hungary: 1 month of work = 12 GB

App Shell

  • Design concept
  • Provide the initial app UI from cache
    • Quick load time (comparable to native)
    • Improving user experience (showing something instantly)
  • Load the content afterwards

Caching

Strategies

  • cache first
  • network first
  • cache only
  • network only
  • fastest

Cache busting

  • Two type of resources: assets or data
  • Assets: they change with every release
  • Data: changes frequently
  • Choose the cache invalidation strategy carefully

What is needed for a PWA (subject to change)

  • A manifest.json
{
    "name": "My Progressive Web App",
    "short_name": "PWA",
    "start_url": "/index.html",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#5eb3f9",
    "background_color": "#EEEEEE",
    "icons": [{
        "src": "/icon.png",
        "sizes": "128x128",
        "type": "image/png"
    }]
}
  • Alternatively you can put everything into the index.html
  • Service worker
    • Since Chrome 42.0 and Firefox 44
    • Limited in Opera 24
    • Under developement in Edge
    • Under consideration for Safari
  • Fetch
  • Streams (the new thing)
  • HTTP2

Alternatives (even more progressive)

  • indexedDB (... pouchDB, webSQL)
  • web worker (virtual DOM)
  • App Cache (it is bad but also works)

Things to watch, read

THE END