Designing progressive web apps

Designing
Progressive
Web Apps

We need a
progressive
web app!

What is a
progressive
web app?

How do we
create a plan
for this?

Do we need a
progressive
web app?

How does the CEO even
know about progressive
web apps?

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…

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

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

Original Definition by Frances Berriman and Alex Russell
Responsive  
Fit any form factor. RWD FTW!
Connectivity Independent 
Oﬀline 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.

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

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

web site web server
http request
http response

web site web serverservice worker
service worker cache

Storing things oﬀline is what makes native
apps so fast. It is the primary reason to
download an app ahead of time.

Service workers give us control and
confidence that what we store will (likely)
still be there the next time someone visits.

And service workers don't require
someone to download an app BEFORE
they can use the app. The web continues
to be as frictionless as it has always been.

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

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

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

The hype can be a turn oﬀ
https://twitter.com/elliotecweb/status/864070806569066497

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

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

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.

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

Reach people who don’t have your native app
installed or are on a diﬀerent device.

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

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

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

© 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.”

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.

The web can’t do
[insert thing here]

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

Or PWAs can be incredibly complex…

PWAs can be used on small screens…

Or PWAs can be used on large screens…

Framework for thinking
about your PWA

Oﬀline InteractivityCache for Perf Only Oﬀline
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

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

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

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

How many platforms will you adapt to?

Will you jump every time the platform changes?

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

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

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

We’re spoiled by our browsers

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

info, refresh,
download
tabs
downloads
find in page

sharing
printing
email

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?

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

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

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

Animate Transitions to
Support Wayfinding

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

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

Attention to detail and polish

Animate Transitions for
Wayfinding and Polish
https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

Personality
Amazing SVG Animation
by Darin Senneﬀ
https://codepen.io/
dsenneﬀ/full/
2c3e5bc86b372d5424b00
edaf4990173/

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

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

{ 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 short JSON documents

Startup Screen with Background Color
Chrome Opera Samsung

Theme Color
Chrome Default Theme Color
Chrome Custom Theme Color

Chrome Changing Add-to-Homescreen Behavior

Pick the Optimal Time to Ask for Install
Asking on order
confirmation page
resulted in 3x
increase in
conversion for
Flipkart

PWAs don’t no
need an app store!

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

Why focus on this?Instead of all of this?

PWAs are progressive because…
They promote a
progressive
relationship with
your users
First page
• Page loads fast normally
• Service worker installs after core content
• Service worker pre-fetches assets
• Assets explicitly cached Second page
• Page loads even faster because of cache
• App shell loading pattern?
User indicates interest
• Check to see if browser supports push
• Ask if user wants notifications
• If yes, ask browser for permission.
User responds to notification
• We can provide an improved experience
Browser detects engagement
• Asks user if they want to add to home screen
• Now app may have better experience

No Add to
Home Screen
Native
App Stores
Manifest
Spiders find PWA
Manually submit PWA PhoneGap
Trusted Web Activity

Cache for performance and oﬀline fallback

Oﬀline 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

Cache recently viewed content for oﬀline use

Let User’s Choose What They Want Oﬀline

Oﬀline Interactivity — Or Disallow Editing

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

Notification JS is
Relatively Easy

3x Higher Conversion for Personalized Notifications

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

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

Don’t immediately
ask for permission
to send push
notifications

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

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

Push Notifications
No Push
Notifications
Personalized and
Integrated
Notifications
CMS
Plugin
Subscribe via
Push Provider
One-oﬀ Marketing
Push Notifications
Background
Updates
Notification
Design
Analytics and
Segmentation
Backend
Integration

Auto-login with
Credential
Management API

Beyond PWAs
Basic PWA Multiple New APIs
Autofill Support
AMP to PWA
Credential Management API
Camera, other sensors Payment Request API
AMP in PWA

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

Progressive Web App Blueprint
Planning &
Definition

Define Your Ideal
Progressive Web App

Oﬀline
Interactivity
Cache for
Perf Only
Oﬀline
Native App
Stores
Website with Perf
Improvements
Full Screen,
App Shell
New APIs
No Add to
Home Screen
Basic PWA
Feels Like An App
No Push
Notifications
Personalized and
Integrated Push
Push Notifications
Beyond PWAs

Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap

Is Your Website
Reasonably Fast?

Planning &
Definition
Technical Debt
(if Necessary)
Baseline
PWA
Front-end
Additions
Larger
Initiatives
Gather team
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Oﬀline 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

Baseline
PWA
Front-end
Additions
Larger
Initiatives
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Oﬀline 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

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

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 Oﬀice 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.

Designing progressive web apps

Recomendados

Recomendados

Más contenido relacionado

Más de Jason Grigsby

Más de Jason Grigsby (20)

Último

Último (20)

Designing progressive web apps