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

Building Modern Progressive Web Apps

Ire Aderinokun
November 25, 2016

Building Modern Progressive Web Apps

My talk at GDG SouthWest Nigeria DevFest 2016

Ire Aderinokun

November 25, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Technology

Transcript

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

    View Slide

  2. !
    • Ire Aderinokun
    • UI/UX Designer and Front-End
    Developer
    • Head of Technology, Big Cabal
    • Google Developer Expert,
    Web Technologies

    View Slide

  3. bit.ly/chrome-dev-summit-2016

    View Slide

  4. What are Progressive Web Apps?

    View Slide

  5. Giving PWAs the
    Powers of Native

    View Slide

  6. Add to Homescreen
    Install Application

    View Slide

  7. View Slide

  8. Browser Support
    Coming Soon

    View Slide

  9. Sharing

    View Slide

  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

    View Slide

  11. https://www.youtube.com/watch?v=lhUzYxCvWew

    View Slide

  12. Browser Support
    Chrome 55

    View Slide

  13. Account Management

    View Slide

  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

    View Slide

  15. https://www.youtube.com/watch?v=O3mBdKYMsMY

    View Slide

  16. Browser Support

    View Slide

  17. Payments

    View Slide

  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

    View Slide

  19. https://www.youtube.com/watch?v=O3mBdKYMsMY

    View Slide

  20. Browser Support

    View Slide

  21. PWAs and Performance

    View Slide

  22. View Slide

  23. Test on Real Hardware

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Get the Real Deal

    View Slide

  28. Measure Performance
    with the RAIL Model

    View Slide

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

    View Slide

  30. < 100 ms every
    16 ms
    50ms
    chunks
    < 1000 ms
    https://developers.google.com/web/fundamentals/performance/rail

    View Slide

  31. Implement the
    PRPL Pattern

    View Slide

  32. View Slide

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

    View Slide

  34. Use Client-Side Storage

    View Slide

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

    View Slide

  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.

    View Slide

  37. Browser Support
    40 44

    View Slide

  38. IndexedDB
    IndexedDB is a low-level API for client-side storage of significant
    amounts of structured data.

    View Slide

  39. Browser Support

    View Slide

  40. Cache Storage API
    URL addressable data
    IndexedDB
    Structured data

    View Slide

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

    View Slide

  42. Try WebAssembly

    View Slide

  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/

    View Slide

  44. Why WebAssembly?

    View Slide

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

    View Slide

  46. Browser Support

    View Slide

  47. PWAs and Modern
    Frameworks

    View Slide

  48. PWA
    AMP
    Angular
    React
    Ember

    View Slide

  49. PWA + AMP = PWAMP

    View Slide

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

    View Slide

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

    View Slide

  52. Use Performance-
    Friendly Alternatives

    View Slide

  53. 3KB

    View Slide

  54. Advanced
    Service Worker

    View Slide

  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.

    View Slide

  56. View Slide

  57. Browser Support

    View Slide

  58. Background Fetch

    View Slide

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

    View Slide

  60. Browser Support
    None Yet

    View Slide

  61. Navigation Transitions

    View Slide

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

    View Slide

  63. Browser Support
    None Yet

    View Slide

  64. Doing More with PWAs

    View Slide

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

    View Slide

  66. WebVR

    View Slide

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

    View Slide

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

    View Slide

  69. Physical Web

    View Slide

  70. View Slide

  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”

    View Slide

  72. Tools for Developing
    PWAs

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  78. Thank You!

    View Slide