Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progressive Web
Applications
Overview
● Why progressive?
● Service Workers
● Cache API
● IndexedDB
● Manifest
● Current Browser Support
● Development w...
● Don’t make network connectivity, browser or device choice a limiting factor
● Boost web app performance even for good co...
● Progressive web apps bigger topic than offline support
● AppCache difficult to work with
● Alternative with service work...
Service Workers: the What
● Run in their own worker context (no DOM access)
● Use postMessage, onMessage for child/parent ...
Service Workers: the How
● Lots of ways to do this…
● Progressive Enhancement: Register service worker
● Declare network r...
Service Workers to the Rescue: Service worker lifecycle
Waiting
Terminated
Fetch /
Message
Error
Install
Activate
Idle
No ...
Demo
More about Cache API
● Request/Response storage
● Origin can have multiple cache objects
● Should periodically delete unus...
IndexedDB
● Allow storage of larger, more structured datasets
● Supports queries, cursors etc.
● Transactional, Object-Ori...
Manifest
● Specify appearance of web app
● More native-like experience
● Example
● Include with link tag
<link rel="manife...
Manifest: Example
Current Browser Support
● Basically just Chrome, Firefox, and Opera for the time being
● Is Service Worker Ready?
● Also p...
Development with Lighthouse
● Service worker helper module
● And for grunt/gulp
Build Tools & Plugins
● Identity streams
● Navigation preload
● Foreign fetch
● Background Fetch
● Future App Model: Advanced Service Worker (Vi...
Examples
● Production
○ Flipkart
○ Washington Post
○ Ali Express
● Offline ToDo
● Other examples
○ Trained to Thrill
○ Off...
Get in Touch: @tpgmartin
● Blog
● Twitter
● GitHub
● Progressive Web Apps
○ Addy Osmani
○ Google Developers
○ pazguille/offline-first
○ Udacity: Offline Web Applications
● S...
● Application Cache
● Cache API
● IndexedDB
○ Using IndexedDB
● Browser Support
References
Upcoming SlideShare
Loading in …5
×

Progressive web applications

188 views

Published on

An overview of the motivation behind progressive web apps, how to implement them, and other useful tools and discussion. For full presentation with usable links: https://goo.gl/VRKE6L

Published in: Technology
  • Be the first to like this

Progressive web applications

  1. 1. Progressive Web Applications
  2. 2. Overview ● Why progressive? ● Service Workers ● Cache API ● IndexedDB ● Manifest ● Current Browser Support ● Development with Lighthouse ● Build Tools & Plugins ● The Future
  3. 3. ● Don’t make network connectivity, browser or device choice a limiting factor ● Boost web app performance even for good connectivity ● Enable engagement for offline users ● Create a native-like experience ● Four components: service workers, cache API, IndexedDB, manifest file Why Progressive?
  4. 4. ● Progressive web apps bigger topic than offline support ● AppCache difficult to work with ● Alternative with service workers and cache API ● Service workers are just code ● Simple, repeatable patterns Service Workers: the Why
  5. 5. Service Workers: the What ● Run in their own worker context (no DOM access) ● Use postMessage, onMessage for child/parent communication ● Fully asynchronous ● Have access to cache API and fetch API ● Basic idea: service workers act as a proxy server ● HTTPS only
  6. 6. Service Workers: the How ● Lots of ways to do this… ● Progressive Enhancement: Register service worker ● Declare network resources to cache ● Subsequent page request fetch cached resources ● Can additionally choose to fetch updated resources from network
  7. 7. Service Workers to the Rescue: Service worker lifecycle Waiting Terminated Fetch / Message Error Install Activate Idle No Service Worker
  8. 8. Demo
  9. 9. More about Cache API ● Request/Response storage ● Origin can have multiple cache objects ● Should periodically delete unused caches to be safe ● Cache polyfill (https://github.com/coonsta/cache-polyfill)
  10. 10. IndexedDB ● Allow storage of larger, more structured datasets ● Supports queries, cursors etc. ● Transactional, Object-Orientated database ● Built with async in mind, indexeddb-promised (for Chrome only)
  11. 11. Manifest ● Specify appearance of web app ● More native-like experience ● Example ● Include with link tag <link rel="manifest" href="/manifest.json">
  12. 12. Manifest: Example
  13. 13. Current Browser Support ● Basically just Chrome, Firefox, and Opera for the time being ● Is Service Worker Ready? ● Also polyfills for different APIs ● Chrome has good support for development ○ DevTools: Toggle force upload in sources tab ○ DevTools: Clear cache/unregister service workers with “clear storage” ○ Check running service workers: chrome://inspect/#service-workers ○ Check all registered instances: chrome://serviceworker-internals/
  14. 14. Development with Lighthouse
  15. 15. ● Service worker helper module ● And for grunt/gulp Build Tools & Plugins
  16. 16. ● Identity streams ● Navigation preload ● Foreign fetch ● Background Fetch ● Future App Model: Advanced Service Worker (Video) The Future
  17. 17. Examples ● Production ○ Flipkart ○ Washington Post ○ Ali Express ● Offline ToDo ● Other examples ○ Trained to Thrill ○ Offline News
  18. 18. Get in Touch: @tpgmartin ● Blog ● Twitter ● GitHub
  19. 19. ● Progressive Web Apps ○ Addy Osmani ○ Google Developers ○ pazguille/offline-first ○ Udacity: Offline Web Applications ● Service Workers ○ Introduction to Service Workers References
  20. 20. ● Application Cache ● Cache API ● IndexedDB ○ Using IndexedDB ● Browser Support References

×