PWA - The hidden stories about the future of the web

PWA
@romulocintra
The hidden stories about the
future of the web...

I am Romulo Cintra
∎ Software Architect - Silk Caixabank
∎ TC39 Delegate
∎ OSS Enthusiast
∎ Teacher at Barcelona Tech School
@romulocintra

Web Apps
@romulocintra
The hidden stories about the
future of the web...

@romulocintra
Service
Worker
+ = PWA
?
Manifest

Bad
Web
Apps
@romulocintra
PWA !==

@romulocintra
Progressive
Web
Experience
Yeahhh it’s a
new thing

@romulocintra
PWA’s are only good
Web Apps ...

@romulocintra
How Many Apps did you
installed last week ?

@romulocintra
How Many Web pages
you visited last week ?

@romulocintra
Where I
spend my time...

@romulocintra
It’s Clear, our target is
the WEB

@romulocintra
Source: comScore MMX Multi-Platform, Dec 2017
From where ...

@romulocintra
It’s Clear, our target is
the WEBMobile
web

@romulocintra
our …
Web Apps must be ?

@romulocintra
Fast Integrated Reliable Engaging

@romulocintra
?What is a
Progressive Web Application

@romulocintra
Wait...
Just the short explanation …

@romulocintra
Asking... KENNETH
co-author of PWA

@romulocintra
https://bit.ly/2qvK6Tq
Shopping list
❏ Secure (HTTPS)
❏ Add Home Screen(Manifest)
❏ Oﬄine Ready (Service Worker)
❏ Be Fast (PRLP)
❏ Indexable SEO friendly
❏ Cross-browser (Responsive )

@romulocintra
PART II
our …
Web Apps must be ?

@romulocintra
Fast
Be the
est
from you neighborhood

@romulocintra
Reliable
& Never never oﬀ
Always

@romulocintra
Fast Reliable
Use App Shell
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.

@romulocintra
Engaging
User must return...
Let’s be

@romulocintra
INSTALL
EVERYWHERE

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

@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...
});

@romulocintra
https://web.dev/hands-on-portals
Portals
Cross domain smooth transitions
MPAs - Multi-page Applications
Two-way communication and
events flow
Embedded content
https://uskay-portals-demo.glitch.me/ → https://devfest.gdggalicia.com/

TWA - Trusted Web 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

@romulocintra
Credit : Extrated from, https://bit.ly/2MuVjh0

https://bit.ly/2oZnknZ
WASM - Camera Filters
When you need Super Powers for your PWA
Low-level bytecode for your web
Bridge Native capabilities NATIVE
-WEB (Fugu Project)

@romulocintra
Integrated
Must be
Use the
#Platform

@romulocintra
SMS RECEIVER
2 Step Verification
Phone number as identifier
OTP , and action confirmations
https://bit.ly/2qv00iv

@romulocintra
WEB SHARE
https://bit.ly/2N0r1BQ
Share and receive shares like in native
apps
Improve interactivity with users
Discover new uses cases for your
sales , social media and conversion

WEB SHARE
Please try it at
https://web-share-talk.glitch.me/

Web Bluethooth / USB
https://bit.ly/2oZhdjx
Peripheral Connectivity
Multiple integrations , health,
entertainment ...
iOT and much more...

Contact Picker
https://bit.ly/2Nfafkj
Allows user select entries from their contact
list and share limited details of the selected
entries with a website
# Unblocks Use Case

@romulocintra
WebAuthN
Biometric Auth for the web
Secure public key cryptographic
authentication instead of a
password.
Better and safer UX

Audio & Video Capture
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

@romulocintra
PW@MP
...Another new COOL
thing...

@romulocintra
Services workers are fast but works
from second page load

@romulocintra
+
Start fast Stay fast

@romulocintra
?What is a
Accelerated Mobile Pages

@romulocintra
Web Components framework to
create experiences that load instantly
“Cached in google servers to load fast”
Stories , Adds , Websites ,
Experiences

@romulocintra
TO
Warm up your PWA with...
amp-install-serviceworker

@romulocintra
USERS
Progressive Web Experiences

@romulocintra
Credits inspiration and special thanks to
@kennethrohde
@argyleink
Adam Argyle
Kenneth Rohde

@romulocintra
Moitas Grazas
Muchas Gracias
Thanks
Obrigado

PWA - The hidden stories about the future of the web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to PWA - The hidden stories about the future of the web

Similar to PWA - The hidden stories about the future of the web (20)

Recently uploaded

Recently uploaded (20)

PWA - The hidden stories about the future of the web