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

• Instant Loading: Building offline-first progressive Web Apps - Jake Archibald
• Building for Billions - Tal Oppenheimer
• sw-toolbox
• Service worker introduction
• Offline cookbook
• Jake Archibald resources page
• PWA examples
• App Shell
• Service worker cookbook

THE END