Download as PDF, PPTX
Uploaded byRomulo Cintra
PWA - The hidden stories about the future of the web
This document contains a Twitter thread by @romulocintra discussing Progressive Web Applications (PWAs). It includes definitions of PWAs, examples of how to make web apps fast and reliable using techniques like service workers and app shells, and new web platform features that allow PWAs to integrate more closely with devices and operating systems, such as home screen installation, web sharing, and web authentication. There is also brief discussion of related topics like Accelerated Mobile Pages and Web Components.
More Related Content
Similar to PWA - The hidden stories about the future of the web
PWA - The hidden stories about the future of the web
- 1. PWA @romulocintra The hidden storiesabout the future of the web...
- 2.
- 3. I am RomuloCintra ∎ Software Architect - Silk Caixabank ∎ TC39 Delegate ∎ OSS Enthusiast ∎ Teacher at Barcelona Tech School @romulocintra
- 4.
- 5.
- 6. PWA @romulocintra The hidden storiesabout the future of the web...
- 7. Web Apps @romulocintra The hiddenstories about the future of the web...
- 8.
- 9.
- 10.
- 11. @romulocintra PWA’s are onlygood Web Apps ...
- 12.
- 13. @romulocintra How Many Appsdid you installed last week ?
- 14.
- 15.
- 16.
- 17.
- 18. @romulocintra How Many Webpages you visited last week ?
- 19.
- 20.
- 21.
- 22. @romulocintra It’s Clear, ourtarget is the WEB
- 23. @romulocintra Source: comScore MMXMulti-Platform, Dec 2017 From where ...
- 24. @romulocintra It’s Clear, ourtarget is the WEBMobile web
- 25. @romulocintra our … Web Appsmust be ?
- 26.
- 27. @romulocintra ?What is a ProgressiveWeb Application
- 28. @romulocintra Wait... Just the shortexplanation …
- 29.
- 30. @romulocintra https://bit.ly/2qvK6Tq Shopping list ❏ Secure(HTTPS) ❏ Add Home Screen(Manifest) ❏ Offline Ready (Service Worker) ❏ Be Fast (PRLP) ❏ Indexable SEO friendly ❏ Cross-browser (Responsive )
- 31. @romulocintra PART II our … WebApps must be ?
- 32. @romulocintra Fast Be the est from youneighborhood
- 33. @romulocintra Reliable & Never neveroff Always
- 34. @romulocintra Fast Reliable Use AppShell Push critical resources need at boot time Render the initial route Pre-cache remaining resources Lazy-load next resources and routes Never show the Downsaur Have fallback experiences , low connectivity , using cached resources Detect connectivity and fetch according it.
- 35.
- 36.
- 37. Home Screen Install ,in the best moment , “Be timely”. Have a good reason to be installed in users device. Take real advantage that user trusted you , be fast , be resilient … Guide the user over the process
- 38. @romulocintra window.addEventListener('beforeinstallprompt', (e) =>{ // Stash the event so it can be triggered later. deferredPrompt = e; // 1. HERE IS THE PLACE WHERE WE CAN SCREW UP... // 2. Take a deep breath... });
- 39. @romulocintra https://web.dev/hands-on-portals Portals Cross domain smoothtransitions MPAs - Multi-page Applications Two-way communication and events flow Embedded content https://uskay-portals-demo.glitch.me/ → https://devfest.gdggalicia.com/
- 40. TWA - TrustedWeb Activities Seamless integration of your web content into Android app Shared session state - it’s just Chrome Deploy your PWA in Market’s - Play Store Cryptographic security to ensure ownership of content Credit : Extrated from, https://bit.ly/31uHYd3
- 41. @romulocintra Credit : Extratedfrom, https://bit.ly/2MuVjh0
- 42. https://bit.ly/2oZnknZ WASM - CameraFilters When you need Super Powers for your PWA Low-level bytecode for your web Bridge Native capabilities NATIVE -WEB (Fugu Project)
- 43.
- 44. @romulocintra SMS RECEIVER 2 StepVerification Phone number as identifier OTP , and action confirmations https://bit.ly/2qv00iv
- 45. @romulocintra WEB SHARE https://bit.ly/2N0r1BQ Share andreceive shares like in native apps Improve interactivity with users Discover new uses cases for your sales , social media and conversion
- 46. WEB SHARE Please tryit at https://web-share-talk.glitch.me/
- 47. Web Bluethooth /USB https://bit.ly/2oZhdjx Peripheral Connectivity Multiple integrations , health, entertainment ... iOT and much more...
- 48. Contact Picker https://bit.ly/2Nfafkj Allows userselect entries from their contact list and share limited details of the selected entries with a website # Unblocks Use Case
- 49. @romulocintra WebAuthN Biometric Auth forthe web Secure public key cryptographic authentication instead of a password. Better and safer UX
- 50. @romulocintra WebAuthN Biometric Auth forthe web Secure public key cryptographic authentication instead of a password. Better and safer UX
- 51. @romulocintra WebAuthN Biometric Auth forthe web Secure public key cryptographic authentication instead of a password. Better and safer UX
- 52. Audio & VideoCapture Advanced Camera Controls Recording Media Real-Time Communication USB Credentials Payments API Network Type & Speed Online State Vibration Battery Status Local Notifications Push Messages Home Screen Installation Foreground Detection Permissions File Reading Touch Settings Speech RecognitionPointing Device Adaptation Offline Mode Background Sync Geolocation Device Position Device Motion Virtual & Augmented Reality Fullscreen Screen Orientation & Lock Presentation Features Vibration Device Memory Bluetooth Real-Time Communication Touch Gestures Storage Quotas 👉@kennethrohde Installed Apps Badging for App Icons WakeLock
- 53.
- 54. @romulocintra Services workers arefast but works from second page load
- 55.
- 56. @romulocintra ?What is a AcceleratedMobile Pages
- 57. @romulocintra Web Components frameworkto create experiences that load instantly “Cached in google servers to load fast” Stories , Adds , Websites , Experiences
- 58. @romulocintra TO Warm up yourPWA with... amp-install-serviceworker
- 59.
- 60.
- 61. @romulocintra Credits inspiration andspecial thanks to @kennethrohde @argyleink Adam Argyle Kenneth Rohde
- 62.