Progressive web apps (PWAs) can transform websites by making them more like native apps through the use of service workers, web app manifests, and other modern web capabilities. Some key benefits of PWAs include providing fast and reliable experiences even on slow mobile networks, working regardless of a network connection, and engaging users through web app banners and push notifications. Early results show that PWAs can significantly reduce data usage and increase user engagement, conversion rates, and sales compared to mobile websites. While PWAs work across browsers, including on iOS, their full capabilities are still progressively being adopted.
9. 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
10. 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
24. Add to home
screen install
banners
Source: Google, http://bit.ly/2ejW2Rr
25. 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?
29. 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
39. 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
40. 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
41. 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
46. Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D
47. 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 ▾
49. 3. You should provide a fast experience
for your web customers
62. 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
63. 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
64. 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
65. 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
74. PWAs are a trojan horse
for performance.
Photo by Hsing Wei, http://bit.ly/2fqmBFV
75. 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
79. 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
80. 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