1.
Planning Your
Progressive
Web App

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…

8.
How does the CEO even
know about progressive
web apps?

9.
eXtra Electronics
• 12% click-through rate
• 100% more sales from users
arriving via web push
• 4x increase in re-engagement
Source: Google, http://bit.ly/2eqSf18

10.
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

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

12.
What is a
progressive
web app?

13.
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.

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

15.
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

16.
service worker

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

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

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

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

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

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

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

24.
The hype can be a turn off
https://twitter.com/elliotecweb/status/864070806569066497

25.
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

26.
Do we need a
progressive
web app?

27.
If so, you would probably benefit from a PWA.
Does your organization have a website?

28.
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.

29.
FUDFear, Uncertainty, Doubt

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

31.
Reach people who don’t have your native app
installed or are on a different device.

32.
8+ apps
5-7 apps
4 apps
3 apps
2 apps
1 app
0 apps 49%
13%
11%
8%
6%
7%
6%
U.S. smartphone users’ number of apps downloads per month
Source: Comscore 2016 U.S. Mobile App Report, http://bit.ly/2d27iPI

33.
Average Android App Retention of Daily Active Users
Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR
PercentageofUsersStillActive
0%
25%
50%
75%
100%
Days Since App Install
0 1 3 7 14 30 60 90

34.
© comScore, Inc. Proprietary. 26
Advertising and marketing is becoming a more important driver of
app installs, while the app store’s influence may have peaked.
App acquisition
appears to be moving
from ‘pull’ to ‘push’.
App stores remain
the most important
method, but they are
no longer growing in
importance.
Meanwhile, more
users are now
discovering apps
from websites, digital
ads and traditional
media ads,
highlighting the
increasing
importance of
traditional push
marketing for user
acquisition.
Most Common App Discovery Channels Among Smartphone Users
Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2016 vs. June 2015
21%
14%
16%
9%
8%
9%
8%
6%
21%
14%
16%
11%
8%
11%
9%
9%
0%
5%
10%
15%
20%
25%
Searched app
store
Featured/ Top
List in app store
via friend/ family via comment/
review/ social site
via news/ print
review/ TV show
via a website via Ad on device
browser/ app
via Ad on TV/
print/ billboard
%ofSmartphoneUsers
Jun-2015 Jun-2016
App Store Word-of-Mouth/Opinion Advertising/Marketing
Being in the
app store is no
longer enough.
Cost of
acquisition
higher.

35.
© comScore, Inc. Proprietary. 15
And mobile audience growth is being driven more by mobile web
properties, which are actually bigger and growing faster than apps.
A comparison of the
Top 1000 Apps vs.
the Top 1000 Mobile
Web Properties
shows that despite
apps dominance in
usage time, mobile
web is responsible
for big audiences on
mobile. Mobile web
audiences are
almost 3x the size
and growing 2x as
fast as app
audiences.
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
Source: comScore Mobile Metrix, U.S., Age 18+
-
2,000
4,000
6,000
8,000
10,000
12,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 Sep-2015 Dec-2015 Mar-2016 Jun-2016
UniqueVisitors(000)
Apps Mobile Web +82%
vs. 2014
+45%
vs. 2014
“Mobile web
audiences are
almost 3x the
size and
growing 2x as
fast as app
audiences.”

36.
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.

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

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

39.
LET’S DO THIS!

40.
Offline InteractivityCache 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

41.
1. Making it feel like an app

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

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

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

45.
How many platforms will you adapt to?

46.
What about desktop browsers?

47.
Will you jump every time the platform changes?

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

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

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

51.
We’re spoiled by our browsers

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

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

54.
The warm comforts of the browser
sharing
printing
email

55.
Roughing it in app land

56.
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?

57.
Where does this button go?
Does it do the same thing as
the browser back button?
Should
there be an
app back
button?

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

59.
Fast, Fluid Experience

60.
Animate Transitions to
Support Wayfinding

61.
Smooth Pages — Avoid Jumps, Use Skeleton Pages

62.
App Shell model of PWAs

63.
Perceived performance matters most
By Addy Osmani,
http://bit.ly/2o0YBgu

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

65.
PWA != SPA

66.
Should feeling like an app be the goal?
Should feeling
like an app be
your goal?

67.
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

68.
2. Installation and Discovery

69.
Announcing Your PWA

70.
{manifest}

71.
{ name: "Cloud Four",
short_name: "Cloud Four",
description: "We design and develop responsive websites and progressive web apps.",
icons: [
{ src: "/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png" },
{ src: "/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png" } ],
theme_color: "#456BD9",
background_color: "#FFFFFF",
display: "standalone",
orientation: "natural",
start_url: "/",
gcm_sender_id: "482941778795" }
Manifest files are simple JSON documents

72.
Startup Screen with Background Color
Chrome Opera Samsung

73.
Theme Color
Chrome Default Theme Color
Chrome Custom Theme Color

74.
Theme Color

75.
Add to Home
Screen Prompts

76.
Add to Home Screen Badges
Firefox Samsung
Non PWA
PWA

77.
Add to Home Screen Badges
Firefox Samsung
Non PWA
PWA

78.
Chrome Changing Add-to-Homescreen Behavior

79.
Pick the Optimal Time to Ask for Install
Asking on order
confirmation page
resulted in 3x increase
in conversion for
Flipkart.
Controlling when the
prompt shows up is
now what every PWA
must do.

80.
App Stores

81.
PWAs don’t no
need an app store!

82.
Progressive Web Apps
in Microsoft Store
Two ways to get into store:
1. Active submission
2. Passive ingestion
Source:
https://www.slideshare.net/AaronGustafson/progressive-web-
apps-and-the-windows-ecosystem-build-2017

83.
PhoneGap

84.
Remember, your PWA is your website so
all the normal web marketing applies.

85.
What does installation of a PWA mean?
When is a PWA really installed?

86.
Why focus on this?Instead of all of this?

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

88.
Installation and Discovery
No Add to
Home Screen
Native
App Stores
Manifest
Spiders find PWA
Manually submit PWA PhoneGap
Trusted Web Activity
MORE COMPLEXLESS COMPLEX

89.
3. Offline Mode

90.
Cache for performance and offline fallback

91.
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

92.
Cache recently viewed content for offline use

93.
Cache recently viewed content for offline use

94.
Display the Information You Have

95.
Pre-cache Content and Apps

96.
Let User’s Choose What They Want Offline

97.
Offline Interactivity — Or Disallow Editing

98.
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

99.
4. Push Notifications

100.
Notification JS is
Relatively Easy

101.
Many
Hidden
Challenges

102.
3x Higher Conversion for Personalized Notifications

103.
Flowchart for how Slack
decides whether to send
a notification or not.
https://twitter.com/codevisuals/status/
838881724016787457

104.
Many people are annoyed by notifications
http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

105.
Don’t immediately
ask for permission
to send push
notifications

106.
Twitter Lite handles push notifications well
Browser prompt Confirm and CustomizeTwitter prompt

107.
Twitter Lite handles push notifications well
Browser prompt Confirm and CustomizeTwitter prompt

108.
62 63
https://cloudfour.com/thinks/time-to-update-your-permissions-ux/

109.
Push Notifications
No Push
Notifications
Personalized and
Integrated
Notifications
CMS
Plugin
Subscribe via
Push Provider
One-off Marketing
Push Notifications
Background
Updates
Notification
Design
Analytics and
Segmentation
Backend
Integration
MORE COMPLEXLESS COMPLEX

110.
5. Beyond PWAs

111.
Auto-login with
Credential
Management API

112.
Payment Request API

113.
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

114.
How do we
create a plan
for this?

115.
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

116.
Progressive Web App Blueprint
Planning &
Definition

117.
Define Your Ideal
Progressive Web App

118.
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

119.
Benchmark & Plan to Measure

120.
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap

121.
Assess Current Website

122.
Is Your Website
Reasonably Fast?

123.
Is it Usable?

124.
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

125.
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

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

127.
More details in the book!
Follow @thepwabook, @pwastats or
@grigs for updates.
https://abookapart.com/products/
progressive-web-apps
No
28
PROGRESSIVE
WEBAPPS
Jason Grigsby

128.
Thank You!

129.
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.