The Case for Progressive Web Apps

The Case for
Progressive
Web Apps

Tweets during talk: @grigs_talks
Tweets after talk: @grigs
Our company: CloudFour.com

Have you heard
the Progressive
Web App hype?

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

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

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

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

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

What is a Progressive Web App?

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

https://developers.google.com/web/showcase/2017/forbes

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

Source: riorun.theguardian.com
Guardian’s
RioRun App

Source: https://blog.twitter.com/
2017/how-we-built-twitter-lite
Twitter Lite
Twitter Lite is interactive in less
than 5 seconds over 3G on most
devices, with average load times
reduced by over 30%.

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

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

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

Our internal metrics at Google show that for similar volume of prompting for
PWA banners and native app banners — the closest thing to an apples-to-
apples comparison we can find — PWA banners convert 5–6x more often.
More than half of users who chose to install a native app from these banners
fail to complete installing the app whereas PWA installation is near-instant.
—Alex Russell, Why Are App Install Banners Still A Thing?

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

in Bing Search Results
Source: 
https://www.slideshare.net/AaronGustafson/progressive-web-
apps-and-the-windows-ecosystem-build-2017

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

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

Sometimes we need to restate the obvious.

Plus, there
are cracks
in the app
store.

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

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

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

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

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

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 ▾

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

The Washington Post PWA shows big speed increase

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

4. Your web customers would benefit
from an offline experience

Service workers are
also key to
providing an offline
experience

5. Your web customers might benefit
from push notifications

Push notifications
can help increase
engagement

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

Manifest files are simple JSON documents

{ 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

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

Early PWA Returns are Promising

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

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

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

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

But iOS
doesn’t
support
PWAs…

PWAs work
fine on iOS.
They are
progressive.

Billions use browsers that support PWA features

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

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

The Washington Post saw 5x increase in user engagement

Why? Performance. PWA faster even on iOS.

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

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 offline experience
5. Your web customers might benefit
from push notifications
6. You can create a text file and some
icons for a Web Manifest

Simply making sense
!=
Simple to design and build

Unanswered questions from earliest days of the iPhone

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

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

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

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

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

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

Four related questions
and a few important details

1. How much does your design match
the platform?

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.

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

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

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

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

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

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

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!

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

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

Experimental Web Share API to Enable Native Sharing

3. To App Shell or not to App Shell?

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

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

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

Personally, I’m not a fan of the app-shell model. I feel that it
prioritises exactly the wrong stuff—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

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

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?

Great PWAs
will get the
details right.

Cache for performance and offline fallback

Cache recently viewed content for offline use

Let people choose what to cache offline

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

Don’t immediately
ask for permission
to send push
notifications

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

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

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

PWAs are progressive because…
They are built on
Progressive
Enhancement

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

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

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

https://www.youtube.com/watch?v=O3mBdKYMsMY

https://www.youtube.com/watch?v=hmqZxP6iTpo

https://developers.google.com/web/showcase/2017/wego

The Case for Progressive Web Apps

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à The Case for Progressive Web Apps

Similaire à The Case for Progressive Web Apps (20)

Plus de Jason Grigsby

Plus de Jason Grigsby (20)

Dernier

Dernier (20)

The Case for Progressive Web Apps