Presented at performance.now() conference

1. PWA Challenges

2. We need a
progressive
web app!

3. What is a
progressive
web app?

4. How do we
create a plan
for this?

5. Do we need a
progressive
web app?

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

13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

15. What is a
progressive
web app?

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.

24. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

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

26. {manifest}https service worker

27. service worker

28. Progressive Web App Service Worker
Cache
Network
Explicit control of network requests and cache

29. Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr

30. Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr

31. Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr

32. Service workers are
also key to
providing an offline
experience and
push notifications

33. PWA is a website that has been enhanced with:
{manifest}https service worker
But PWAs can be much more…

34. Progressive web
apps allow us to
build experiences
that previously
required a native
application.

35. https://www.youtube.com/watch?v=3tb-1MWg44Y

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

39. Do we need a
progressive
web app?

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.

42. FUDFear, Uncertainty, Doubt

43. We already
have a native
app, why do we
need a PWA?

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.

46. The web can’t do
[insert thing here]

60. https://www.flickr.com/photos/ashleyrosex/2861690380
The web can do more
than we think.

61. But iOS
doesn’t
support
PWAs…

63. PWAs work
fine on older
browers.
They are
progressive.

64. AliExpress
• 104% for new users across all
browsers in conversion
• 82% increase in iOS conversion
Source: Google, http://bit.ly/2fq2ckc

65. Wego
• 50% increase in iOS conversion
• 35% increase in average iOS session
duration
Source: Google, https://bit.ly/2uOsoNM

66. The Washington Post saw 5x increase in user engagement

67. Why? Performance. PWA faster even without SW.

68. PWAs are a trojan horse
for performance.

69. LET’S DO THIS!

70. 1. Making it feel like an app
2. Installation and Discovery
3. Offline mode
4. Push Notifications
5. Beyond PWAs

71. 1. Making it feel like an app
2. Installation and Discovery
3. Offline mode
4. Push Notifications
5. Beyond PWAs

72. Making it feel like an app

74. Like obscenity and brunch, web apps can be
described but not defined.
—Jeremy Keith, By any other name

75. Make it look
native?
https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

76. Do you switch design language between platforms?
Material Design iOS Design

77. How many platforms will you adapt to?

78. What about desktop browsers?

79. Will you jump every time the platform changes?

80. Define your own design and be consistent.
Tripcase maintains same design across platforms.

81. More immersive experience
https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

82. Manifest file display options
display: "standalone" display: "fullscreen"display: "browser" display: “minimal-ui”

83. We’re spoiled by our browsers

84. The warm comforts of the browser
navigation bar
status bar
address bar

85. The warm comforts of the browser
info, refresh,
download
tabs
downloads
find in page

86. The warm comforts of the browser
sharing
printing
email

87. Roughing it in app land

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?

92. .backButton {
display: none;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
.backButton {
display: block;
}
}
Display mode media query

93. Not every customer or potential customer will add
your Progressive Web App to their home screen
…but every visitor will “install” your PWA!

94. Fast, Fluid Experience

95. Provide Immediate Feedback

96. Animate Transitions to
Support Wayfinding

97. Smooth Pages — Avoid Jumps, Use Skeleton Pages

98. App Shell model of PWAs

99. App Shell means first paint happens quickly
No PWA, No App Shell, 4G PWA with App Shell, 4G

100. WARNING: App Shell model often assumes
you’re building a single page application

102. PWA != SPA

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

105. Offline Mode

106. Cache for performance and offline fallback

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

108. Many
Hidden
Challenges

109. DOMException: Quota exceeded.

111. WHAT?
THE BROWSER ONLY
DOWNLOADED 15
THUMBNAIL IMAGES!

112. When 7 KB = 7 MB!

113. https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses

114. <img src='https://cors.example.com/path/to/image.jpg'
crossorigin=‘anonymous’>
<link rel='stylesheet' href='https://cors.example.com/
path/to/styles.css' crossorigin='anonymous'>

115. Cache recently viewed content for offline use

116. Cache recently viewed content for offline use

117. Highlight Stale Information

118. Display the Information You Have

119. Let User’s Choose What They Want Offline

120. Pre-cache Content and Apps

121. Give People Trasparency and Control

122. Offline Interactivity — Background Sync
https://developers.google.com/web/updates/2015/12/background-sync

123. Offline Interactivity — Or Disallow Editing

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

127. 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 COMPLEXLESS COMPLEX

128. Beyond PWAs

129. Accelerated Mobile Project

130. I have some opinions about AMP…

131. 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/

132. Auto-login with
Credential
Management API

133. Payment Request API

134. Redefining Perceived Performance

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

144. How do we
create a plan
for this?

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

146. Progressive Web App Blueprint
Planning &
Definition

147. Define Your Ideal
Progressive Web App

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

149. Benchmark & Plan to Measure

150. Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Baseline
PWA
Front-end
Additions
Larger
Initiatives
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell

151. Baseline
PWA
Front-end
Additions
Larger
Initiatives
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell

152. Every step on
the path to a
PWA makes
sense on its
own.

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

155. Thank You!

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.