Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Modern Progressive Web Apps

45ca9033757d209fabf1481740d1c936?s=47 Ire Aderinokun
November 25, 2016

Building Modern Progressive Web Apps

My talk at GDG SouthWest Nigeria DevFest 2016

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

November 25, 2016
Tweet

Transcript

  1. Building Modern Progressive Web Apps Ire Aderinokun at GDG DevFest

    SouthWest 2016
  2. ! • Ire Aderinokun • UI/UX Designer and Front-End Developer

    • Head of Technology, Big Cabal • Google Developer Expert, Web Technologies
  3. bit.ly/chrome-dev-summit-2016

  4. What are Progressive Web Apps?

  5. Giving PWAs the Powers of Native

  6. Add to Homescreen Install Application

  7. None
  8. Browser Support Coming Soon

  9. Sharing

  10. Web Share API A proposed Web API to enable a

    site to share data to an arbitrary destination of the user’s choice https://github.com/WICG/web-share/blob/master/docs/explainer.md
  11. https://www.youtube.com/watch?v=lhUzYxCvWew

  12. Browser Support Chrome 55

  13. Account Management

  14. Credential Management API An API that will let websites interact

    with a user agent’s password system so that websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials. https://developers.google.com/web/updates/2016/04/credential-management-api
  15. https://www.youtube.com/watch?v=O3mBdKYMsMY

  16. Browser Support

  17. Payments

  18. Payment Request API The Payment Request API is a system

    that is meant to eliminate checkout forms. It vastly improves user workflow during the purchase process, providing a more consistent user experience and enabling web merchants to easily leverage disparate payment methods. https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API
  19. https://www.youtube.com/watch?v=O3mBdKYMsMY

  20. Browser Support

  21. PWAs and Performance

  22. None
  23. Test on Real Hardware

  24. – Alex Russell, Software Engineer, Google “Your Laptop is a

    Filthy Liar”
  25. JavaScript on Desktop Alex Russell, “Progressive Performance” https://developer.chrome.com/devsummit/schedule/sessions/progressive-performance

  26. JavaScript on Mobile Alex Russell, “Progressive Performance” https://developer.chrome.com/devsummit/schedule/sessions/progressive-performance

  27. Get the Real Deal

  28. Measure Performance with the RAIL Model

  29. https://developers.google.com/web/fundamentals/performance/rail

  30. < 100 ms every 16 ms 50ms chunks < 1000

    ms https://developers.google.com/web/fundamentals/performance/rail
  31. Implement the PRPL Pattern

  32. None
  33. https://developers.google.com/web/fundamentals/performance/prpl-pattern/

  34. Use Client-Side Storage

  35. Storage Types • Cache Storage • Indexed DB • Cookies

    • Local Storage • Session Storage
  36. Cache Storage API The CacheStorage interface represents the storage for

    Cache objects. It provides a master directory of all the named caches that a ServiceWorker, other type of worker or window scope can access and maintains a mapping of string names to corresponding Cache objects.
  37. Browser Support 40 44

  38. IndexedDB IndexedDB is a low-level API for client-side storage of

    significant amounts of structured data.
  39. Browser Support

  40. Cache Storage API URL addressable data IndexedDB Structured data

  41. https://app.bitsofco.de/

  42. Try WebAssembly

  43. What is WebAssembly? • Source code: What a developer writes.

    • Compiler: An application that turns source code into assembly, bytecode or machine code (what other apps or hardware run). • Assembly: A low-level source-like language specific to a machine or an application. • Bytecode: A low-level binary representation of code that can be run by other applications. • Machine code: A binary representation of code that can be run directly by hardware. Auth0, “7 Things you should know about WebAssembly” https://auth0.com/blog/7-things-you-should-know-about-web-assembly/
  44. Why WebAssembly?

  45. http://webassembly.org/demo/

  46. Browser Support

  47. PWAs and Modern Frameworks

  48. PWA AMP Angular React Ember

  49. PWA + AMP = PWAMP

  50. Paul Bakaus, “From AMP to PWA” https://developer.chrome.com/devsummit/schedule/sessions/from-amp-to-pwa

  51. Paul Bakaus, “From AMP to PWA” https://developer.chrome.com/devsummit/schedule/sessions/from-amp-to-pwa

  52. Use Performance- Friendly Alternatives

  53. 3KB

  54. Advanced Service Worker

  55. What is a Service Worker? A service worker is a

    script that runs in the background that can provide features like intercepting and handling fetch requests, background sync, push notifications and more.
  56. None
  57. Browser Support

  58. Background Fetch

  59. Jake Archibald, “Future App Model” https://developer.chrome.com/devsummit/schedule/sessions/future-app-model

  60. Browser Support None Yet

  61. Navigation Transitions

  62. Jake Archibald, “Future App Model” https://developer.chrome.com/devsummit/schedule/sessions/future-app-model

  63. Browser Support None Yet

  64. Doing More with PWAs

  65. PWA Don’t Have to Look Like This… https://app.bitsofco.de/

  66. WebVR

  67. bit.ly/webvr-demos Created by Martin Splitt

  68. Browser Support https://iswebvrready.org/

  69. Physical Web

  70. None
  71. Turn On Physical Web (Now!) iOS Android 1. Install Google

    Chrome 2. Go to the Widgets Screen 3. Click on Edit 4. Add the Chrome Widget 5. Wait for the Physical Web Information, then click Enable 1. Install or Open Google Chrome 2. Go to Settings 3. Go to Privacy (under Advanced) 4. Click Physical Web 5. Toggle Enable Look for “bitsofcode” or “Building Modern PWA”
  72. Tools for Developing PWAs

  73. Web Starter Kit https://github.com/google/web-starter-kit

  74. Polymer Starter Kit https://github.com/PolymerElements/polymer-starter-kit

  75. SW Precache & SW Toolbox https://github.com/GoogleChrome/sw-precache & https://github.com/GoogleChrome/sw-toolbox

  76. Lighthouse https://github.com/GoogleChrome/lighthouse

  77. Chrome Dev Summit 2016 bit.ly/chrome-dev-summit-2016

  78. Thank You!