Slide 1
Slide 1 text
PWA Challenges
Slide 2
Slide 2 text
We need a
progressive
web app!
Slide 3
Slide 3 text
What is a
progressive
web app?
Slide 4
Slide 4 text
How do we
create a plan
for this?
Slide 5
Slide 5 text
Do we need a
progressive
web app?
Slide 6
Slide 6 text
How does the CEO even
know about progressive
web apps?
Slide 7
Slide 7 text
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…
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
How does the CEO even
know about progressive
web apps?
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
What is a
progressive
web app?
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
{manifest}
https service worker
Slide 27
Slide 27 text
service worker
Slide 28
Slide 28 text
Progressive Web App Service Worker
Cache
Network
Explicit control of network requests and cache
Slide 29
Slide 29 text
Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr
Slide 30
Slide 30 text
Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr
Slide 31
Slide 31 text
Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr
Slide 32
Slide 32 text
Side note: Measuring the impact of your
own service worker using synthetic data
is a pain (right now?).
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Service workers are
also key to providing
an offline experience
and push notifications
Slide 35
Slide 35 text
PWA is a website that has been enhanced with:
{manifest}
https service worker
But PWAs can be much more…
Slide 36
Slide 36 text
Progressive web
apps allow us to
build experiences
that previously
required a native
application.
Slide 37
Slide 37 text
The hype can be a turn off
https://twitter.com/elliotecweb/status/864070806569066497
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Do we need a
progressive
web app?
Slide 41
Slide 41 text
If so, you would probably benefit from a PWA.
Does your organization have a website?
Slide 42
Slide 42 text
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.
Slide 43
Slide 43 text
FUD
Fear, Uncertainty, Doubt
Slide 44
Slide 44 text
We already
have a native
app, why do we
need a PWA?
Slide 45
Slide 45 text
Reach people who don’t have your native app
installed or are on a different device.
Slide 46
Slide 46 text
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.
Slide 47
Slide 47 text
The web can’t do
[insert thing here]
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
https://www.flickr.com/photos/ashleyrosex/2861690380
The web can do more
than we think.
Slide 62
Slide 62 text
But iOS
doesn’t
support
PWAs…
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
PWAs work
fine on older
browers.
They are
progressive.
Slide 65
Slide 65 text
AliExpress
• 104% for new users across all
browsers in conversion
• 82% increase in iOS conversion
Source: Google, http://bit.ly/2fq2ckc
Slide 66
Slide 66 text
Wego
• 50% increase in iOS conversion
• 35% increase in average iOS session
duration
Source: Google, https://bit.ly/2uOsoNM
Slide 67
Slide 67 text
The Washington Post saw 5x increase in user engagement
Slide 68
Slide 68 text
Why? Performance. PWA faster even without SW.
Slide 69
Slide 69 text
PWAs are a trojan horse
for performance.
Slide 70
Slide 70 text
LET’S DO THIS!
Slide 71
Slide 71 text
1. Making it feel like an app
2. Installation and Discovery
3. Offline mode
4. Push Notifications
5. Beyond PWAs
Slide 72
Slide 72 text
1. Making it feel like an app
2. Installation and Discovery
3. Offline mode
4. Push Notifications
5. Beyond PWAs
Slide 73
Slide 73 text
Making it feel like an app
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Like obscenity and brunch, web apps can be
described but not defined.
—Jeremy Keith, By any other name
Slide 76
Slide 76 text
Make it look
native?
https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
Slide 77
Slide 77 text
Do you switch design language between platforms?
Material Design iOS Design
Slide 78
Slide 78 text
How many platforms will you adapt to?
Slide 79
Slide 79 text
What about desktop browsers?
Slide 80
Slide 80 text
Will you jump every time the platform changes?
Slide 81
Slide 81 text
Define your own design and be consistent.
Tripcase maintains same design across platforms.
Slide 82
Slide 82 text
More immersive experience
https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
Slide 83
Slide 83 text
Manifest file display options
display: "standalone" display: "fullscreen"
display: "browser" display: “minimal-ui”
Slide 84
Slide 84 text
We’re spoiled by our browsers
Slide 85
Slide 85 text
The warm comforts of the browser
navigation bar
status bar
address bar
Slide 86
Slide 86 text
The warm comforts of the browser
info, refresh,
download
tabs
downloads
find in page
Slide 87
Slide 87 text
The warm comforts of the browser
sharing
printing
email
Slide 88
Slide 88 text
Roughing it in app land
Slide 89
Slide 89 text
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?
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Where does this button go?
Does it do the same thing as
the browser back button?
Should
there be an
app back
button?
Slide 92
Slide 92 text
.backButton {
display: none;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
.backButton {
display: block;
}
}
Display mode media query
Slide 93
Slide 93 text
Not every customer or potential customer will add
your Progressive Web App to their home screen
…but every visitor will “install” your PWA!
Slide 94
Slide 94 text
Fast, Fluid Experience
Slide 95
Slide 95 text
Provide Immediate Feedback
Slide 96
Slide 96 text
Smooth Pages — Avoid Jumps, Use Skeleton Pages
Slide 97
Slide 97 text
App Shell model of PWAs
Slide 98
Slide 98 text
App Shell means first paint happens quickly
No PWA, No App Shell, 4G PWA with App Shell, 4G
Slide 99
Slide 99 text
WARNING: App Shell model often assumes
you’re building a single page application
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
PWA != SPA
Slide 102
Slide 102 text
Should feeling like an app be the goal?
Should feeling
like an app be
your goal?
Slide 103
Slide 103 text
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 COMPLEX
LESS COMPLEX
Slide 104
Slide 104 text
Offline Mode
Slide 105
Slide 105 text
Cache for performance and offline fallback
Slide 106
Slide 106 text
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
Slide 107
Slide 107 text
Many
Hidden
Challenges
Slide 108
Slide 108 text
DOMException: Quota exceeded.
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
WHAT?
THE BROWSER ONLY
DOWNLOADED 15
THUMBNAIL IMAGES!
Slide 111
Slide 111 text
When 7 KB = 7 MB!
Slide 112
Slide 112 text
https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses
Slide 113
Slide 113 text
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Cache recently viewed content for offline use
Slide 116
Slide 116 text
Cache recently viewed content for offline use
Slide 117
Slide 117 text
Display the Information You Have
Slide 118
Slide 118 text
Let User’s Choose What They Want Offline
Slide 119
Slide 119 text
Pre-cache Content and Apps
Slide 120
Slide 120 text
Give People Transparency and Control
Slide 121
Slide 121 text
Offline Interactivity — Or Disallow Editing
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
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
Slide 124
Slide 124 text
Offline
Cache for
Performance
Only
Offline
Interactivity
Offline
Fallback
Offline
Indicator
Cache Recently
Viewed Pages
Disable
Interactivity
Pre-cache
Predetermined Pages
Pre-cache
Dynamic Items
User Choose
What to Cache
MORE COMPLEX
LESS COMPLEX
Slide 125
Slide 125 text
Beyond PWAs
Slide 126
Slide 126 text
Accelerated Mobile Project
Slide 127
Slide 127 text
I have some opinions about AMP…
Slide 128
Slide 128 text
But if you must AMP, then AMP to PWA Install Path
https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/
Slide 129
Slide 129 text
Auto-login with
Credential
Management API
Slide 130
Slide 130 text
Payment Request API
Slide 131
Slide 131 text
Redefining Perceived Performance
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
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 COMPLEX
LESS COMPLEX
Slide 141
Slide 141 text
How do we
create a plan
for this?
Slide 142
Slide 142 text
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
Slide 143
Slide 143 text
Every step on
the path to a
PWA makes
sense on its
own.
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
Available now!
Follow @thepwabook for updates.
https://abookapart.com/products/
progressive-web-apps
No
28
PROGRESSIVE
WEB APPS
Jason Grigsby
Slide 146
Slide 146 text
Thank You!
Slide 147
Slide 147 text
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.