SlideShare ist ein Scribd-Unternehmen logo
1 von 183
Downloaden Sie, um offline zu lesen
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: 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?
Coming Soon…
App Stores
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
SEO Benefits
Progressive Web Apps
in Bing Search Results
Source:

https://www.slideshare.net/AaronGustafson/progressive-web-
apps-and-the-windows-ecosystem-build-2017
Progressive Web Apps
Simply Make Sense
(Irrespective of what you do on native)
1. Not every customer or potential
customer will install your native app.
DUH!
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
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.flickr.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
What makes something an app?
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?
What about desktop browsers?
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"
What happens when you remove browser chrome?
display: "standalone" display: "fullscreen"
status bar
navigation bar
No URL, tabs, or menu
What happens when you remove browser chrome?
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
The warm comforts of the browser
info, refresh,
download
tabs
downloads
find in page
The warm comforts of the browser
sharing
printing
email
Roughing it in app land
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
PWA != SPA
4. What part of your site should be
made into a Progressive Web App?
Desktop
Facebook is
one app.
Whole site apps
Whole site apps
Whole site apps
Subdomain apps
Tearaway Apps
Tearaway Apps
Tearaway Apps
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?
What makes something an app?
How do user’s expectations
change when they consider
something to be an app?
Great PWAs
will get the
details right.
Caching and offline strategy
Cache for performance and offline fallback
Cache for performance and offline fallback
Cache recently viewed content for offline use
Cache recently viewed content for offline use
Cache recently viewed content for offline use
Let people choose what to cache offline
Let people choose what to cache offline
Cache app ahead of time
Cache app ahead of time
AMP to PWA Install Path
Accelerated Mobile Project
Accelerated Mobile Project
AMP to PWA Install Path
https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/
Push notification etiquette
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
Planning for
your PWA
Progressively
Punny
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
Every step on
the path to a
PWA makes
sense on its
own.
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
Thank You!

Weitere ähnliche Inhalte

Was ist angesagt?

Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Abdelrahman Omran
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
Mobile Web App & Google Apps Script
Mobile Web App & Google Apps ScriptMobile Web App & Google Apps Script
Mobile Web App & Google Apps ScriptIdo Green
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystifiededynamic
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web ApplicationsBartek Igielski
 
Web Forms The Right Way
Web Forms The Right WayWeb Forms The Right Way
Web Forms The Right WayIdo Green
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsAnjaliTanpure1
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web AppSubodh Garg
 
Business Values of PWAs
Business Values of PWAsBusiness Values of PWAs
Business Values of PWAsUXDXConf
 
The three most common mobile SEO challenges our clients are facing, by Mark T...
The three most common mobile SEO challenges our clients are facing, by Mark T...The three most common mobile SEO challenges our clients are facing, by Mark T...
The three most common mobile SEO challenges our clients are facing, by Mark T...SEO monitor
 
Sem days mobile 2015
Sem days mobile 2015Sem days mobile 2015
Sem days mobile 2015Anna Morrison
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Ido Green
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
De l'application mobile à l'application web progressive
De l'application mobile à l'application web progressiveDe l'application mobile à l'application web progressive
De l'application mobile à l'application web progressiveMacha DA COSTA
 
February 2018: Sustainable UX Conference
February 2018: Sustainable UX ConferenceFebruary 2018: Sustainable UX Conference
February 2018: Sustainable UX ConferenceLisa Huang
 

Was ist angesagt? (20)

Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
Mobile Web App & Google Apps Script
Mobile Web App & Google Apps ScriptMobile Web App & Google Apps Script
Mobile Web App & Google Apps Script
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
Web Forms The Right Way
Web Forms The Right WayWeb Forms The Right Way
Web Forms The Right Way
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Business Values of PWAs
Business Values of PWAsBusiness Values of PWAs
Business Values of PWAs
 
The three most common mobile SEO challenges our clients are facing, by Mark T...
The three most common mobile SEO challenges our clients are facing, by Mark T...The three most common mobile SEO challenges our clients are facing, by Mark T...
The three most common mobile SEO challenges our clients are facing, by Mark T...
 
Sem days mobile 2015
Sem days mobile 2015Sem days mobile 2015
Sem days mobile 2015
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
De l'application mobile à l'application web progressive
De l'application mobile à l'application web progressiveDe l'application mobile à l'application web progressive
De l'application mobile à l'application web progressive
 
February 2018: Sustainable UX Conference
February 2018: Sustainable UX ConferenceFebruary 2018: Sustainable UX Conference
February 2018: Sustainable UX Conference
 

Ähnlich wie The Case for Progressive Web Apps

From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWAIdo Green
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016Andy Davies
 
Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Andy Davies
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorIsrael Blancas
 
progressive web app
 progressive web app progressive web app
progressive web appRAGINI .
 
Tech Update Summary from Blue Mountain Data Systems September 2015
Tech Update Summary from Blue Mountain Data Systems September 2015Tech Update Summary from Blue Mountain Data Systems September 2015
Tech Update Summary from Blue Mountain Data Systems September 2015BMDS3416
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Globant Hybrid Mobile Development White Paper
Globant Hybrid Mobile Development White PaperGlobant Hybrid Mobile Development White Paper
Globant Hybrid Mobile Development White PaperAndrew Burgert
 
The Web Platform - State of the Union '17
The Web Platform - State of the Union '17The Web Platform - State of the Union '17
The Web Platform - State of the Union '17Abdelrahman Omran
 
Why your mobile site matters more than you think !!
Why your mobile site matters more than you think !!Why your mobile site matters more than you think !!
Why your mobile site matters more than you think !!Robert McFrazier
 
Why node.js for real time application development is a sage decision
Why node.js for real time application development is a sage decision Why node.js for real time application development is a sage decision
Why node.js for real time application development is a sage decision Katy Slemon
 
Top Mobile App Development Trends
Top Mobile App Development TrendsTop Mobile App Development Trends
Top Mobile App Development TrendsJane Brewer
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPRZasadzinski
 
What Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentWhat Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentApp Verticals
 
ur mobile - build your mobile world
ur mobile - build your mobile worldur mobile - build your mobile world
ur mobile - build your mobile worldurmobile
 
Best Web Development Trends For Business.pptx
Best Web Development Trends For Business.pptxBest Web Development Trends For Business.pptx
Best Web Development Trends For Business.pptxAlbiorix Technology
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfLucas Lagone
 
App Deep Linking Guide
App Deep Linking GuideApp Deep Linking Guide
App Deep Linking GuideAppindex
 

Ähnlich wie The Case for Progressive Web Apps (20)

From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016
 
Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
 
progressive web app
 progressive web app progressive web app
progressive web app
 
web app.pdf
web app.pdfweb app.pdf
web app.pdf
 
Tech Update Summary from Blue Mountain Data Systems September 2015
Tech Update Summary from Blue Mountain Data Systems September 2015Tech Update Summary from Blue Mountain Data Systems September 2015
Tech Update Summary from Blue Mountain Data Systems September 2015
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Globant Hybrid Mobile Development White Paper
Globant Hybrid Mobile Development White PaperGlobant Hybrid Mobile Development White Paper
Globant Hybrid Mobile Development White Paper
 
The Web Platform - State of the Union '17
The Web Platform - State of the Union '17The Web Platform - State of the Union '17
The Web Platform - State of the Union '17
 
Why your mobile site matters more than you think !!
Why your mobile site matters more than you think !!Why your mobile site matters more than you think !!
Why your mobile site matters more than you think !!
 
Why node.js for real time application development is a sage decision
Why node.js for real time application development is a sage decision Why node.js for real time application development is a sage decision
Why node.js for real time application development is a sage decision
 
Top Mobile App Development Trends
Top Mobile App Development TrendsTop Mobile App Development Trends
Top Mobile App Development Trends
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
 
What Are Progressive Web Application Development
What Are Progressive Web Application DevelopmentWhat Are Progressive Web Application Development
What Are Progressive Web Application Development
 
ur mobile - build your mobile world
ur mobile - build your mobile worldur mobile - build your mobile world
ur mobile - build your mobile world
 
Best Web Development Trends For Business.pptx
Best Web Development Trends For Business.pptxBest Web Development Trends For Business.pptx
Best Web Development Trends For Business.pptx
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdf
 
App Deep Linking Guide
App Deep Linking GuideApp Deep Linking Guide
App Deep Linking Guide
 

Mehr von Jason Grigsby

Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?Jason Grigsby
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and VideoJason Grigsby
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesJason Grigsby
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Jason Grigsby
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Jason Grigsby
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Jason Grigsby
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Jason Grigsby
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of MobileJason Grigsby
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad FedJason Grigsby
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
 
Google Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyGoogle Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyJason Grigsby
 
Get Me a Mobile Strategy or You're FIRED!
Get Me a Mobile Strategy or You're FIRED!Get Me a Mobile Strategy or You're FIRED!
Get Me a Mobile Strategy or You're FIRED!Jason Grigsby
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileJason Grigsby
 

Mehr von Jason Grigsby (20)

Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San Diego
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
The Immobile Web
The Immobile WebThe Immobile Web
The Immobile Web
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of Mobile
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark College
 
Google Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile StrategyGoogle Talk: DOs and DON'Ts of Mobile Strategy
Google Talk: DOs and DON'Ts of Mobile Strategy
 
Get Me a Mobile Strategy or You're FIRED!
Get Me a Mobile Strategy or You're FIRED!Get Me a Mobile Strategy or You're FIRED!
Get Me a Mobile Strategy or You're FIRED!
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 

Kürzlich hochgeladen

Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 

Kürzlich hochgeladen (20)

Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate AgentsRyan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
Ryan Mahoney - Will Artificial Intelligence Replace Real Estate Agents
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 

The Case for Progressive Web Apps

  • 2. Tweets during talk: @grigs_talks Tweets after talk: @grigs Our company: CloudFour.com
  • 3. Have you heard the Progressive Web App hype?
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. 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
  • 9. 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
  • 10.
  • 11.
  • 13. Time Visibility Technology Trigger Peak of Inflated Expectations Trough of Disillusionment Slope of enlightenment Plateau of Productivity Gartner Hype Cycle
  • 14. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497
  • 15.
  • 16. What is a Progressive Web App?
  • 17. Source: Google Developers, http://bit.ly/1X36bm2 | Original definition: http://bit.ly/1K8Tm4L Progressive Web App Features
  • 22. 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%.
  • 23. Browsers are providing incentives for PWAs. Photo by Stephen Korecky, http://bit.ly/2epjw48
  • 24. Add to home screen install banners Source: Google, http://bit.ly/2ejW2Rr
  • 25. Browsers hope they can increase install rates by observing user engagement and fine-tuning when they show the banner.
  • 26. 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?
  • 27.
  • 30. 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
  • 32. Progressive Web Apps in Bing Search Results Source:
 https://www.slideshare.net/AaronGustafson/progressive-web- apps-and-the-windows-ecosystem-build-2017
  • 33. Progressive Web Apps Simply Make Sense (Irrespective of what you do on native)
  • 34. 1. Not every customer or potential customer will install your native app.
  • 35. DUH!
  • 36. Sometimes we need to restate the obvious.
  • 37. Plus, there are cracks in the app store.
  • 38.
  • 39.
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. © 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.
  • 44. © 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.”
  • 45. 2. You should provide a secure site or app for your web customers
  • 46. Image by CHRISTOPHER DOMBRES, http://bit.ly/2fKjJoC
  • 47. Photo by Mario Antonio Pena Zapatería, http://bit.ly/2fuQ27D
  • 48. 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.
  • 50. 3. You should provide a fast experience for your web customers
  • 51. The Washington Post PWA shows big speed increase
  • 52. The Washington Post PWA shows big speed increase
  • 53. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
  • 54. 4. Your web customers would benefit from an offline experience
  • 55. Service workers are also key to providing an offline experience
  • 56. 5. Your web customers might benefit from push notifications
  • 57. Push notifications can help increase engagement
  • 58. 6. You can create a text file and some icons for a Web Manifest
  • 59. Manifest files are simple JSON documents
  • 60. { 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
  • 61. Every step on the path to a PWA makes sense on its own.
  • 62. Early PWA Returns are Promising
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67.
  • 69. PWAs work fine on iOS. They are progressive.
  • 70. Billions use browsers that support PWA features
  • 71. Billions use browsers that support PWA features Safari has hinted at supporting service workers which is the most critical feature.
  • 72. AliExpress • 104% for new users across all browsers in conversion • 82% increase in iOS conversion Source: Google, http://bit.ly/2fq2ckc
  • 73. The Washington Post saw 5x increase in user engagement
  • 74. Why? Performance. PWA faster even on iOS.
  • 75. PWAs are a trojan horse for performance. Photo by Hsing Wei, http://bit.ly/2fqmBFV
  • 76.
  • 77. 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
  • 78. Simply making sense != Simple to design and build
  • 79. Unanswered questions from earliest days of the iPhone
  • 80. Early on, web pages aped native apps http://smashingtops.com/wordpress/wordpress-plugins/
  • 81. The web has evolved its own language. http://www.wptouch.com/
  • 82. 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
  • 84. 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
  • 86. How do user’s expectations change when they consider something to be an app?
  • 87. Four related questions and a few important details
  • 88. 1. How much does your design match the platform?
  • 89. Do you switch design language between platforms? Material Design iOS Design
  • 90. How many platforms will you adapt to?
  • 91. What about desktop browsers?
  • 92. Will you jump every time the platform changes?
  • 93. Define your own design and be consistent. Tripcase maintains same design across platforms.
  • 94. 2. What impact does going chromeless have on our user experiences?
  • 95. What happens when you remove browser chrome? display: "standalone" display: "fullscreen"display: "browser"
  • 96. What happens when you remove browser chrome? display: "standalone" display: "fullscreen" status bar navigation bar No URL, tabs, or menu
  • 97. What happens when you remove browser chrome? display: "fullscreen" No URL, tabs, menu or back button!
  • 98. Full screen does have hidden controls Pull down for reload Swipe from bottom for navigation bar
  • 99. We’re spoiled by our browsers Photo by Garry Wilmore, http://bit.ly/2noXVxq
  • 100. The warm comforts of the browser navigation bar status bar address bar
  • 101. The warm comforts of the browser info, refresh, download tabs downloads find in page
  • 102. The warm comforts of the browser sharing printing email
  • 103. Roughing it in app land
  • 104. 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?
  • 105.
  • 106. Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?
  • 107. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query
  • 108. Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will install your PWA!
  • 109.
  • 111. 2 out of 1000 mobile users tap share buttons https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/
  • 112.
  • 113.
  • 114.
  • 115. Experimental Web Share API to Enable Native Sharing
  • 116. 3. To App Shell or not to App Shell?
  • 117. App Shell model of PWAs https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73
  • 118. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu
  • 119. App Shell means first paint happens quickly No PWA, No App Shell, 4G PWA with App Shell, 4G
  • 120. 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
  • 122.
  • 123. 4. What part of your site should be made into a Progressive Web App?
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 144. 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?
  • 146. How do user’s expectations change when they consider something to be an app?
  • 147. Great PWAs will get the details right.
  • 148. Caching and offline strategy
  • 149. Cache for performance and offline fallback
  • 150. Cache for performance and offline fallback
  • 151. Cache recently viewed content for offline use
  • 152. Cache recently viewed content for offline use
  • 153. Cache recently viewed content for offline use
  • 154. Let people choose what to cache offline
  • 155. Let people choose what to cache offline
  • 156. Cache app ahead of time
  • 157. Cache app ahead of time
  • 158. AMP to PWA Install Path
  • 161.
  • 162. AMP to PWA Install Path https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/
  • 163.
  • 165. Don’t immediately ask for permission to send push notifications
  • 166. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
  • 167.
  • 168. Twitter Lite handles push notifications well Browser prompt Confirm and CustomizeTwitter prompt
  • 169. Photo by Scott Hart, http://bit.ly/2or1K9Y
  • 170.
  • 173. PWAs are progressive because… They are built on Progressive Enhancement
  • 174. 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
  • 175. 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
  • 176. Every step on the path to a PWA makes sense on its own.
  • 177. Photo by Kerry J, http://bit.ly/2fuTKOx
  • 180.
  • 182.