The Progressive Web
and its New Challenges
Chris Heilmann @codepo8, Confoo Montréal, February 2017

PROGRESSIVE
WEB
APPS

PROGRESSIVE WEB APPS
Future facing - looking into
solving upcoming problems.

PROGRESSIVE WEB APPS
Not set in stone - improves
over time.

PROGRESSIVE WEB APPS
Not relying on an
environment…

PROGRESSIVE WEB APPS
Start with the most basic use
case and interface…

PROGRESSIVE WEB APPS
Improved experiences in
advanced environments…

PROGRESSIVE WEB APPS
Improved experiences with
subsequent visits…

PROGRESSIVE WEB APPS
The web has always been a
progressive environment…

PROGRESSIVE WEB APPS
We have forgotten about
that as we have become
used to it…

PROGRESSIVE WEB APPS
We’re building on great
hardware with fast
connections…

PROGRESSIVE WEB APPS
Developer convenience and
fast turnaround trumps too
often end user experience…

PROGRESSIVE WEB APPS
When the mobile factor
became the main use of the
web, the web showed its
issues…

PROGRESSIVE WEB APPS
Unreliable browser support
for accessing mobile
hardware…

PROGRESSIVE WEB APPS
Doesn’t work offline

PROGRESSIVE WEB APPS
Feels like a burden to
support all the possible
environments users may
have…

PROGRESSIVE WEB APPS
Native Apps promised to
solve all these issues.

PROGRESSIVE WEB APPS
They work offline, they give
you access to the hardware,
they give you control over
what the user can do.

PROGRESSIVE WEB APPS
A bespoke solution for a
closed environment.

PROGRESSIVE WEB APPS
Which means, its own
issues…

PROGRESSIVE WEB APPS
The “App revolution” isn’t
something worth mimicking…

PROGRESSIVE WEB APPS
Native apps as a form factor
have failed and are only kept
alive by VC injections and
hype…

Users spend 80% of their time
using just 5 apps.
marketingland.com/report-mobile-users-spend-80-percent-time-just-
five-apps-116858
“
PROGRESSIVE WEB APPS

80% of users who download
an app fail to become active
users.
http://andrewchen.co/new-data-shows-why-losing-80-of-your-
mobile-users-is-normal-and-that-the-best-apps-do-much-better/
“
PROGRESSIVE WEB APPS

…of the >1.5 million apps in
the Google Play store, only a
few thousand sustain
meaningful traffic.
http://andrewchen.co/new-data-shows-why-losing-80-of-your-
mobile-users-is-normal-and-that-the-best-apps-do-much-better/
“
PROGRESSIVE WEB APPS

94% of app revenue comes
from 1% of publishers
https://sensortower.com/blog/app-store-one-percent
“
PROGRESSIVE WEB APPS

60% of apps in the Google
Play app store have never
been downloaded.
https://www.youtube.com/watch?v=EUthgV-U05w&t=1m56s
“
PROGRESSIVE WEB APPS

The average user downloads
less than 3 apps per month.
Half of US smartphone users
download zero apps per
month.
http://www.recode.net/2016/9/16/12933780/average-app-downloads-per-month-comscore
“
PROGRESSIVE WEB APPS

Users try out a lot of apps but
decide which ones they want
to ‘stop using’ within the first
3-7 days.
http://andrewchen.co/new-data-shows-why-losing-80-of-your-
mobile-users-is-normal-and-that-the-best-apps-do-much-better/
“
PROGRESSIVE WEB APPS

The average app loses its
entire userbase within a few
months…
http://andrewchen.co/new-data-shows-why-losing-80-of-your-
mobile-users-is-normal-and-that-the-best-apps-do-much-better/
“
PROGRESSIVE WEB APPS

Native app install friction
blocks 74% of your potential
customers before they ever
see your app.
http://andrewchen.co/new-data-shows-why-losing-80-of-your-
mobile-users-is-normal-and-that-the-best-apps-do-much-better/
“
PROGRESSIVE WEB APPS

PROGRESSIVE WEB APPS
And even the money isn’t
what we’ve been promised…

PROGRESSIVE WEB APPS
▶ Pricing race to the bottom (99 cents)
▶ Lock-in into the store with its own rules
and restrictions
▶ Revenue share with store/OS provider
▶ Updates are hard and may be delayed
by the store rules

PROGRESSIVE WEB APPS
It is time to rethink the
concept of Apps and their
distribution outside of
stores…

▶ Frictionless installs / updates
▶ Small initial payload
▶ Form factor supporting content and
interfaces
▶ Offline/Flaky connection support
▶ Using the power of the device
PROGRESSIVE WEB APPS

PROGRESSIVE WEB APPS
And that is what Progressive
Web Apps are…

PROGRESSIVE WEB APPS
The distribution model is the
link…

PROGRESSIVE WEB APPS
The technology stack is web
standards that progressed…

PROGRESSIVE WEB APPS
The first step is to harden
your servers by moving away
from HTTP to more secure
protocols.

PROGRESSIVE WEB APPS
The second step is providing
an App Manifest.
https://developer.mozilla.org/en-US/docs/Web/Manifest

PROGRESSIVE WEB APPS
▶ Describes document as an app
▶ Defines look and feel (fullscreen, colours,
screen orientation)
▶ Access to platform-specific functionality
▶ Standardised version of older, similar
approaches
App Manifest

PROGRESSIVE WEB APPS
The big breakthrough is a
Service Worker…
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

PROGRESSIVE WEB APPS
Service Worker
▶ Intercept fetch events, respond with cache
▶ Intercept push events
▶ Intercept sync/periodic events
▶ Offline
▶ Push notifications
▶ Background Sync

PROGRESSIVE WEB APPS
Great things are happening
here. Google, Mozilla,
Microsoft, Apple, Samsung,
all take part in this…

PROGRESSIVE WEB APPS
So what does that mean for
you right now?

PROGRESSIVE WEB APPS
The web is coming back –
big time.

PROGRESSIVE WEB APPS
Time to brush up what you
have and slim it down…

PROGRESSIVE WEB APPS
It means you will reach lots of
of new users on badly
connected devices without
locking them out.

PROGRESSIVE WEB APPS
And you make your current
products work more reliably
for everybody.

PROGRESSIVE WEB APPS
This is proper web
technology - you can try it
out in parts of your products
and move the rest later.

PROGRESSIVE WEB APPS
Search engines can find your
solutions and flag them up as
PWAs (indexing manifests).

PROGRESSIVE WEB APPS
As with any web technology,
a lot can be automated…
http://www.pwabuilder.com

PROGRESSIVE WEB APPS
Don’t wait, don’t waste more
time on duplicating efforts
for closed environments…

PROGRESSIVE WEB APPS
…when there is a web to be
used that keeps you in
control!

THANKS
VERY
MUCH
Chris
Heilmann
@codepo8
christianheilmann.com