6. How does the CEO even
know about progressive
web apps?
7. Cool. I’ve been wanting to play with
service workers… Maybe we can use
Vue.js here as well… I wonder if this
can be used as excuse to switch to
node js…
9. How does the CEO even
know about progressive
web apps?
12. Ola Cabs
• 68% increase in mobile traffic
• Tier 2 cities conversion rate same as
native app. Tier 3 cities, conversion
rate is 30% higher with PWA.
• PWA is 200KB which 300x smaller
than Android and 500x than iOS.
• 20% of users who book in the PWA
had previously uninstalled app.
Source: Google, http://bit.ly/2q9D4EA
16. Original Definition by Frances Berriman and Alex Russell
Responsive
Fit any form factor. RWD FTW!
Connectivity Independent
Offline features thanks to service workers.
App-like interactions
App shell for apps navigation.
Fresh
Up-to-date thanks to service workers.
Safe
Served on HTTPS.
Discoverable
Manifest files identify them as apps.
Re-engageable
Push notifications bring people back to apps.
Installable
Can be installed to the home screen w/o app stores.
Linkable
Still part of the web—URLs still work.
Progressive
Use progressive enhancement for better experience.
25. PWA is a website that has been enhanced with:
{manifest}https service worker
Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098
36. The hype can be a turn off
https://twitter.com/elliotecweb/status/864070806569066497
37. The name isn’t for you and worrying about it is
distraction from just building things that work better for
everyone. The name is for your boss, for your investor,
for your marketeer.
—Frances Berriman, Naming Progressive Web Apps
40. If so, you would probably benefit from a PWA.
Does your organization have a website?
41. Does your organization make money on
your website via e-commerce,
advertising, or some other method?
If so, you definitely need a progressive web app.
44. Reach people who don’t have your native app
installed or are on a different device.
45. Your website is often a
customer’s first interaction
with your company.
A better web experience will likely mean
more revenue and more native app installs.
88. Adding a back button is harder than it seems
• Manage the browser history so back
button goes to right location.
• Back button in an app often implies
a hierarchy, not simply going to the
last screen you were on.
• Do you rearchitect your site to
create an app hierarchy?
90. Where does this button go?
Does it do the same thing as
the browser back button?
Should
there be an
app back
button?
103. Should feeling like an app be the goal?
Should feeling
like an app be
your goal?
104. Feel Like an App
Website with
Performance
Improvements
Full screen, app
shell with native
design language
Minimal-ui
Standalone
System Fonts Fullscreen
Animation and Polish App Shell
Native Design
MORE COMPLEXLESS COMPLEX
107. Offline Fallback Pages
Can Keep People
Engaged
• Trivago found that 67% of people
continue to browse the site when they
come back online.
Source: http://bit.ly/2GoXjCi
126. The goal isn’t offline; offline is just a special case
of flakiness (and the easiest one to detect
technically). PWAs and SWs give you the ability to
be reliable for your users. That’s the advantage
across all connection states (even online!)
—Alex Russell
143. Beyond PWAs
Basic PWA Multiple New APIs
Autofill Support
AMP to PWA
Credential Management API
Camera, other sensors Payment Request API
AMP in PWA
MORE COMPLEXLESS COMPLEX
145. PWAs are progressive because… Progressive Roadmap
{manifest}https
Jul 13
Redesign launches
Better security with HTTPS
Faster site via HTTP/2
Better bookmarks via manifest
Oct 3
Faster pages
Offline fallback
It’s a PWA!
service worker
Oct 18
Offline pages
Offline indicator
Improved font loading
Nov 22
Push notifications
HTTP/2 Link Preload
Dec 7
Small tweaks
PWA announced
148. Offline
Interactivity
Cache for
Perf Only
Offline
Native App
Stores
Website with Perf
Improvements
Full Screen,
App Shell
New APIs
No Add to
Home Screen
Basic PWA
Feels Like An App
Installation and Discovery
No Push
Notifications
Personalized and
Integrated Push
Push Notifications
Beyond PWAs
154. Coming November 12th!
Preorders available now. Follow
@abookapart, @grigs or sign up for the
A Book Apart newsletter for updates.
https://abookapart.com/products/
progressive-web-apps
No
28
PROGRESSIVE
WEBAPPS
Jason Grigsby
156. Thank You!
White Blank Notebook by Tirachard Kumtanom
Woman Executive Holding Tablet by Pixabay
Schedule Planning by Startup Stock Photos
Hackers by Christopher Dombres
NSA by by Mario Antonio Pena Zapatería
Map Location Symbol by Tumisa
Smartphone on Bridge by Jeremy Levin
Hype by Kerry J
Instagram App on iPhone by Pixabay
Man in Fuzzy Hat by Gratisography
Southbank - Samsung Galaxy S8 (1) by TaylorHerring
Now THIS is comfort! by Garry Wilmore
Trojan Horse by Hsing Wei
Cold Snow Man Person
Asphalt Blur Car City by Pixabay
Woman Listening to Music by bruce mars
Woman and Dog by Tookapic
Focus by Mark Hunter
Person Holding Silver iPhone by rawpixel.com
MacBook Air Beside Painting by rawpixel.com
Android Phone by freestocks.org
Smart Watch by Oliur Rahman
Apple Office Internet iPad by Pixabay
Woman Jumping by Quang Anh Ha Nguyen
SEM by Pixabay
Legs on Chair by kaboompics.com
In Hiding by Taylor McBride
Medusa Kill Switch by Scott Hart
White Auto Gauge by Mikes Photos
Blue and Silver Stethoscope by Pixabay
Tortoise by Frans Van Heerden
iPhone Photo on Railroad Tracks by Kaique Rocha
database by ✦ Shmidt Sergey ✦ from the Noun Project
Cloud by Blackwoodmedia.com.au from the Noun Project
Responsive Design by Delwar Hossain from the Noun Project
cogs by Gregor Cresnar from the Noun Project
Special thanks to these fabulous people who graciously
shared their work under Creative Commons.