Building Modern Progressive Web Apps

My talk at GDG SouthWest Nigeria DevFest 2016

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
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
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
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.
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
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!