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. ! • Ire Aderinokun • UI/UX Designer and Front-End Developer

    • Head of Technology, Big Cabal • Google Developer Expert, Web Technologies
  2. 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
  3. 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
  4. 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
  5. < 100 ms every 16 ms 50ms chunks < 1000

    ms https://developers.google.com/web/fundamentals/performance/rail
  6. Storage Types • Cache Storage • Indexed DB • Cookies

    • Local Storage • Session Storage
  7. 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.
  8. 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/
  9. 3KB

  10. 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.
  11. 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”