Why You Should Build a Progressive Web App Now

The Case for
Progressive
Web Apps

View Slide

During: @grigs_talks
After: @grigs
Slides: http://bit.ly/grigs-pwa-sf17

View Slide

Have you heard
the Progressive
Web App hype?

View Slide

View Slide

WAIT! THE WEB ISN’T DEAD AFTER
ALL. GOOGLE MADE SURE OF IT
IN 2010, THE web died. Or so said the publication you’re
CADE METZ BUSINESS 04.20.16 1:00 PM
GOOGLE
BUSINESS CULTURE DESIGN GEAR SCIENCE SECURITY TRANSPORTATION
Wait! The Web Isn't Dead After All. Google Made Sure of It SUBSCRIBE

View Slide

of building online services and delivering them across the
Internet, but of using these services. At the very least, it’s not
dead.
The Progressive Web App
The Weather Company offers a smartphone app, like any other
sane company that harbors aspirations on the Internet. But it
has seen more and more people visit its mobile website in
recent years. According to Sheri Bachstein, the Weather
Company’s vice president of web, about fifty percent of its
web traffic now arrives on mobile phones and tablets (as
opposed to the desktop). Yes, more people use the company’s
various apps, but increasingly, the mobile web is a vital way of
reaching its worldwide audience—not to mention maintaining
and expanding that audience.
The company now offers what Google calls a “progressive web
app.” Basically, this is a website that, in sometimes gradually
evolving ways, behaves like a native app. You visit it through a
browser, just like any other website. But as you continue to
use it, turning on certain tools, it transforms into something
more.
With a progressive
web app, you can set
up push notifications,
so you know when
new content arrives.
You can add an icon to
your phone’s home
screen, so you can
rapidly revisit the
service. And perhaps
most importantly, thanks to a technology called service
workers, it can operate both online and off, kinda like a web
app. Among other things, this means that when you visit the
web app a second time, it loads faster. It’s more like the thing
is sitting on your phone.
‘You use it. You like it. And
over time, you progressively
build a relationship with it.’
—ALEX KOMOROSKE, CHROME PRODUCT
MANAGER

View Slide

View Slide

Photo by helin,
http://bit.ly/2fg3eME

View Slide

Time
Visibility
Technology Trigger
Peak of Inflated Expectations
Trough of Disillusionment
Slope of enlightenment
Plateau of Productivity
Gartner Hype Cycle

View Slide

View Slide

What is a Progressive Web App?

View Slide

Source: Google Developers, http://bit.ly/1X36bm2 | Original definition: http://bit.ly/1K8Tm4L
Progressive Web App Features

View Slide

Source: FlipKart, http://bit.ly/2ejW2Rr
Flipkart’s
Progressive
Web App

View Slide

Browsers are providing
incentives for PWAs.
Photo by Stephen Korecky, http://bit.ly/2epjw48

View Slide

Add to home
screen install
banners
Source: Google, http://bit.ly/2ejW2Rr

View Slide

Browsers hope they can
increase install rates by
observing user engagement
and fine-tuning when they
show the banner.

View Slide

View Slide

Coming Soon…
(Likely)

View Slide

App Stores

View Slide

SEO Benefits

View Slide

Progressive Web Apps
Simply Make Sense
(Irrespective of what you do on native)

View Slide

1. Not every customer or potential
customer will install your native app.

View Slide

DUH!

View Slide

Sometimes we need to restate the obvious.

View Slide

Plus, there
are cracks
in the app
store.

View Slide

View Slide

Over 2 million apps available in iOS
and Android app stores.
Source: Statista, http://bit.ly/2fleesH | Photo by Blake Patterson, http://bit.ly/2foGNpj

View Slide

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

View Slide

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

View Slide

© 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
% of Smartphone Users
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.

View Slide

© 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
Unique Visitors (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.”

View Slide

2. You should provide a secure site
or app for your web customers

View Slide

Image by CHRISTOPHER DOMBRES, http://bit.ly/2fKjJoC

View Slide

Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D

View Slide

Let’s Encrypt is a free, automated, and open
Certificate Authority.
We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to
support our operations, please consider contributing now!
Get Started Donate
FROM OUR BLOG
Nov 1, 2016
Launching Our Crowdfunding Campaign
Today we kicked off our first crowdfunding campaign with
the goal of raising enough funds to cover about one
month of our operations - $200,000.
Read more
Oct 27, 2016
Our First Grant: The Ford Foundation
We are proud to announce that The Ford Foundation has
awarded us a grant to help our growing operations.
Read more
Oct 24, 2016
Squarespace OCSP Stapling
Implementation
MA JOR SPONSORS
Documentation Get Help Donate ▾ About Us ▾

View Slide

View Slide

3. You should provide a fast experience
for your web customers

View Slide

The Washington Post PWA shows big speed increase

View Slide

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

View Slide

4. Your web customers would benefit
from an oﬀline experience

View Slide

Service workers are
also key to
providing an oﬀline
experience

View Slide

5. Your web customers might benefit
from push notifications

View Slide

Push notifications
can help increase
engagement

View Slide

6. You can create a text file and some
icons for a Web Manifest

View Slide

Manifest files are simple JSON documents

View Slide

{ 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

View Slide

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

View Slide

Early PWA Returns are Promising

View Slide

Konga
• 92% less data for initial load, vs.
native app
• 82% less data to complete first
transaction, vs. native app
• 63% less data for initial load, vs.
previous mobile web experience
• 84% less data to complete first
transaction, vs. previous mobile
web experience
Source: Google, http://bit.ly/2f64lRo

View Slide

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

View Slide

5miles
• 50% decrease in bounce rates
• 30% increase in time spent on site
• 30% better conversion for users
who arrived via Add to Home screen
Source: Google, http://bit.ly/2eqS5a6

View Slide

But iOS
doesn’t
support
PWAs…

View Slide

PWAs work
fine on iOS.
They are
progressive.

View Slide

Billions use browsers that support PWA features

View Slide

Billions use browsers that support PWA features
Safari has hinted at supporting service workers which is the most critical feature.

View Slide

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

View Slide

The Washington Post saw 5x increase in user engagement

View Slide

Why? Performance. PWA faster even on iOS.

View Slide

PWAs are a trojan horse
for performance.
Photo by Hsing Wei, http://bit.ly/2fqmBFV

View Slide

Progressive Web Apps Simply Make Sense
1. Not every customer or potential
customer will install your native app.
2. You should provide a secure site or
app for your web customers
3. You should provide a fast experience
for your web customers
4. Your web customers would benefit
from an oﬀline experience
5. Your web customers might benefit
from push notifications
6. You can create a text file and some
icons for a Web Manifest

View Slide

Simply making sense
!=
Simple to design and build

View Slide

Unanswered questions from earliest days of the iPhone

View Slide

Early on, web pages aped native apps
http://smashingtops.com/wordpress/wordpress-plugins/

View Slide

The web has evolved its own language.
http://www.wptouch.com/

View Slide

When it comes to visual design and interaction patterns,
start by forgetting everything you know about
conventional web design, and instead imagine you’re
actually designing a native app.
—Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps

View Slide

http://www.ﬂickr.com/photos/adventuresof/111667571/
Say What?

View Slide

It’s important to pay attention to detail here since
native apps have given users expectations around
touch interactions and information hierarchy which are
important to match to avoid creating a jarring
experience.
—Owen Campbell-Moore, Designing Great UIs for Progressive Web Apps

View Slide

What makes something an app?

View Slide

How do user’s expectations
change when they consider
something to be an app?

View Slide

Four related questions
and few small details

View Slide

1. How much does your design match
the platform?

View Slide

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

View Slide

How many platforms will you adapt to?

View Slide

What about desktop browsers?

View Slide

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

View Slide

2. What impact does going chromeless
have on our user experiences?

View Slide

What happens when you remove browser chrome?
display: "standalone" display: "fullscreen"
display: "browser"

View Slide

display: "standalone" display: "fullscreen"
status bar
navigation bar
No URL, tabs, or menu

View Slide

display: "fullscreen"
No URL, tabs, menu or back button!

View Slide

Full screen does have hidden controls
Pull down for reload
Swipe from bottom
for navigation bar

View Slide

We’re spoiled by our browsers
Photo by Garry Wilmore, http://bit.ly/2noXVxq

View Slide

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

View Slide

info, refresh,
download
tabs
downloads
find in page

View Slide

sharing
printing
email

View Slide

Roughing it in app land

View Slide

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?

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

http://codepen.io/mariusbalaj/full/Jtqbm/

View Slide

2out of 1000
mobile users
tap share buttons
https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

View Slide

View Slide

Experimental Web Share API to Enable Native Sharing

View Slide

3. To App Shell or not to App Shell?

View Slide

App Shell model of PWAs
https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73

View Slide

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

View Slide

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

View Slide

Personally, I’m not a fan of the app-shell model. I feel that it
prioritises exactly the wrong stuﬀ—the interface is rendered quickly
while the content has to wait…I also notice it being used as a get-
out-of-jail-free card, much like the ol’ “Single Page App” descriptor;
“Ah, I can’t do progressive enhancement because I’m building an
app shell/SPA, you see.”
—Jeremy Keith, Regressive Web Apps

View Slide

PWA != SPA

View Slide

View Slide

4. What part of your site should be
made into a Progressive Web App?

View Slide

Desktop
Facebook is
one app.

View Slide

View Slide

Whole site apps

View Slide

Subdomain apps

View Slide

Tearaway Apps

View Slide

Four questions for PWAs
1. How much does your design match the platform?
2. What impact does going chromeless have on UX?
3. To App Shell or not to App Shell?
4. What part of your site should be made into a PWA?

View Slide

What makes something an app?

View Slide

How do user’s expectations
change when they consider
something to be an app?

View Slide

Great PWAs
will get the
details right.

View Slide

Caching and oﬀline strategy

View Slide

Cache for performance and oﬀline fallback

View Slide

Cache recently viewed content for oﬀline use

View Slide

Let people choose what to cache oﬀline

View Slide

Cache app ahead of time

View Slide

AMP to PWA Install Path

View Slide

Accelerated Mobile Project

View Slide

AMP to PWA Install Path
https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/

View Slide

Push notification etiquette

View Slide

Don’t immediately
ask for permission
to send push
notifications

View Slide

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

View Slide

View Slide

Photo by Scott Hart, http://bit.ly/2or1K9Y

View Slide

View Slide

Planning for
your PWA

View Slide

Progressively
Punny

View Slide

Progressive Roadmap to a PWA
{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
Wrench by Tony Gines from the Noun Project
Oct 18
• Offline pages
• Offline indicator
• Improved font loading
Nov 22
• Push notifications
• HTTP/2 Link Preload
Dec 7
• Small tweaks
• PWA announced

View Slide

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

View Slide

Photo by Kerry J, http://bit.ly/2fuTKOx

View Slide

View Slide

Thank You!

View Slide

Why You Should Build a Progressive Web App Now

Why You Should Build a Progressive Web App Now

Jason Grigsby

More Decks by Jason Grigsby

Other Decks in Technology

Featured

Transcript