Learn what are PWAs, all their benefits, pros and cons vs. native apps, how you can easily build and optimize one for growth.

1. #pwaseo by @aleyda from #orainti at #applausebcn#pwaseo by @aleyda from #orainti at #applausebcn
Why you want one & how to optimize them
Progressive Web Apps

2. #pwaseo by @aleyda from #orainti at #applausebcn
Mobile
Apps are
broken
#pwaseo by @aleyda from #orainti at #applausebcn

3. #pwaseo by @aleyda from #orainti at #applausebcn
They eat
your
mobile
battery

4. #pwaseo by @aleyda from #orainti at #applausebcn
Take a lot
of phone
space

5. #pwaseo by @aleyda from #orainti at #applausebcn
Require
constant
updates

6. #pwaseo by @aleyda from #orainti at #applausebcn
App Store
search is
broken

7. #pwaseo by @aleyda from #orainti at #applausebcn
Provide a
Fragmented
and vertical
specific app
experience

8. #pwaseo by @aleyda from #orainti at #applausebcn
Can be expensive to develop
https://www.consagous.com/blog/how-much-does-it-cost-to-build-an-app/

9. #pwaseo by @aleyda from #orainti at #applausebcn
Sorry!
#pwaseo by @aleyda from #orainti at #applausebcn

10. #pwaseo by @aleyda from #orainti at #applausebcn
And yet we
end up
installing a lot
of apps
Think With Google

11. #pwaseo by @aleyda from #orainti at #applausebcn
Why do we keep using apps then?

12. #pwaseo by @aleyda from #orainti at #applausebcn
It’s easier to
access apps
through the
home screen

13. #pwaseo by @aleyda from #orainti at #applausebcn
Apps can
use
additional
phone
features

14. #pwaseo by @aleyda from #orainti at #applausebcn
Mobile
Websites
speed &
usability is
shitty
https://developers.google.com/speed/pagespeed/insights/

15. #pwaseo by @aleyda from #orainti at #applausebcn
You need
internet
connection to
access Web
content

16. #pwaseo by @aleyda from #orainti at #applausebcn
Yeah.
The Mobile
Web is
broken
too!
#pwaseo by @aleyda from #orainti at #applausebcn

17. #pwaseo by @aleyda from #orainti at #applausebcn
Sigh.
#pwaseo by @aleyda from #orainti at #applausebcn

18. #pwaseo by @aleyda from #orainti at #applausebcn
Because of
this we’re
also
sometimes
forced to
download
apps

19. #pwaseo by @aleyda from #orainti at #applausebcn
Again and again.
Sigh.

20. #pwaseo by @aleyda from #orainti at #applausebcn
At the end,
we only use
1/3 of the
apps we
install

21. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report
Although we
spent most of
our mobile
time in them

22. #pwaseo by @aleyda from #orainti at #applausebcn
There’s an obvious gap between
the mobile Web vs. apps
https://www.slideshare.net/greenido/from-amp-to-pwa

23. #pwaseo by @aleyda from #orainti at #applausebcn
The App vs.
Mobile
Web status
is broken
#pwaseo by @aleyda from #orainti at #applausebcn

24. #pwaseo by @aleyda from #orainti at #applausebcn
But their
destruction
it’s not really
a reasonable
solution…
#pwaseo by @aleyda from #orainti at #applausebcn

25. #pwaseo by @aleyda from #orainti at #applausebcn
It’s time to
welcome PWAs!
A web app that
provides a
native app
experience to
Web users
https://developers.google.com/web/progressive-web-apps/

26. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.appypie.com/progressive-web-apps-the-future-of-mobile-web-app-development
PWAs provide
the benefits of
an app without
abandoning
the Web

27. #pwaseo by @aleyda from #orainti at #applausebcn
While providing an improved
Web user experience
https://developers.google.com/web/progressive-web-apps/

28. #pwaseo by @aleyda from #orainti at #applausebcn
PWAs close the gap between
Websites and apps
https://www.onenorth.com/blog/post/whats-next-in-mobile-progressive-web-apps

29. #pwaseo by @aleyda from #orainti at #applausebcn
This is possible thanks to
the use of 4 technologies
https://dzone.com/articles/pwa-technology

30. #pwaseo by @aleyda from #orainti at #applausebcn
All modern
browsers
now support
PWAs
https://twitter.com/firt/status/1105840379117662209

31. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/web/progressive-web-apps/desktop
Not only on
mobile but
also on
desktop

32. #pwaseo by @aleyda from #orainti at #applausebcn
Which is why many top mobile
focused services are releasing PWAs
https://appsco.pe/

33. #pwaseo by @aleyda from #orainti at #applausebcn
Uber

34. #pwaseo by @aleyda from #orainti at #applausebcn
Twitter

35. #pwaseo by @aleyda from #orainti at #applausebcn
9GAG

36. #pwaseo by @aleyda from #orainti at #applausebcn
Add them to your home screen now

37. #pwaseo by @aleyda from #orainti at #applausebcn
“The Web is
going to be
the new app
store”

38. #pwaseo by @aleyda from #orainti at #applausebcn
You can also
feature
PWAs in App
Stores too,
although
with a bit of
extra work
https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b

39. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/web/updates/2019/02/using-twa
Trusted Web
Activities
highly
facilitate this
for the Play
Store now

40. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/firt/status/1127971459434000385
Enjoying the
same native
apps benefits

41. #pwaseo by @aleyda from #orainti at #applausebcn
“PWAs are a
natural
evolution of
how we
distribute and
consume
software”
https://www.awwwards.com/PWA-ebook/

42. #pwaseo by @aleyda from #orainti at #applausebcn
… and at some
point they’ll be
also the future
of native apps!
https://www.smashingmagazine.com/2018/12/pwa-native-mobile-apps/

43. #pwaseo by @aleyda from #orainti at #applausebcn
There’s this feeling going on…
#pwaseo by @aleyda from #orainti at #applausebcn
PWAs Native Apps
Brands

44. #pwaseo by @aleyda from #orainti at #applausebcn
However, there are still limitations
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

45. #pwaseo by @aleyda from #orainti at #applausebcn
The evolution will also be progressive

46. #pwaseo by @aleyda from #orainti at #applausebcn
How can
you create
a PWA
then?
#pwaseo by @aleyda from #orainti at #applausebcn

47. #pwaseo by @aleyda from #orainti at #applausebcn
You’ll see
is not that
hard…
#pwaseo by @aleyda from #orainti at #applausebcn

48. #pwaseo by @aleyda from #orainti at #applausebcn
In the case of existing Websites,
there are 3 main steps to follow
Set up a
Service Worker, a
JS that runs in the
background, defining
what data to store
or update and
notifications
3
Create a web
manifest, a JSON file
that informs about the
PWA to be
installable
2
Use a responsive
website (that can be
AMP based too) that
will be your
application
1
https://www.awwwards.com/PWA-ebook/

49. #pwaseo by @aleyda from #orainti at #applausebcn
Check out
this step by
step guide
to migrate
your site to
a PWA
https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/

50. #pwaseo by @aleyda from #orainti at #applausebcn
As well as
to develop
a PWA
from
scratch
https://codelabs.developers.google.com/codelabs/workbox-indexeddb/

51. #pwaseo by @aleyda from #orainti at #applausebcn
Or build a
Progressive
Web AMP
site
https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/

52. #pwaseo by @aleyda from #orainti at #applausebcnhttps://codelabs.developers.google.com/codelabs/amp-pwa-workbox/
There’s a full training provided
by Google Developers
https://codelabs.developers.google.com/dev-pwa-training/

53. #pwaseo by @aleyda from #orainti at #applausebcn
And video tutorials in the Google’s
Chrome Developers YouTube Channel
https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X87Hh

54. #pwaseo by @aleyda from #orainti at #applausebcn
You can also use the “ready to
customize and use” PWA Builder files
https://www.pwabuilder.com/publish

55. #pwaseo by @aleyda from #orainti at #applausebcn
Check “How
PWAMP Works”
which I created
following the
Codelabs guide
for AMP based
PWAs
https://www.howpwampworks.com/

56. #pwaseo by @aleyda from #orainti at #applausebcn
You can also enable PWA features to
your Wordpress sites with Plugins
https://superpwa.com/

57. #pwaseo by @aleyda from #orainti at #applausebcn
Which is the one
I’ve used with
“Why my Web
Traffic Dropped”
https://www.whymywebtrafficdropped.com/

58. #pwaseo by @aleyda from #orainti at #applausebcn
Magento
now also
supports
AMP with
its PWA
Studio
https://magento.com/products/magento-commerce/pwa

59. #pwaseo by @aleyda from #orainti at #applausebcn
How can
you
validate
your
PWAs?
#pwaseo by @aleyda from #orainti at #applausebcn

60. #pwaseo by @aleyda from #orainti at #applausebcn
PWAs features
should follow
best practices
specified in the
PWA checklist
https://developers.google.com/web/progressive-web-apps/checklist

61. #pwaseo by @aleyda from #orainti at #applausebcn
Served over
HTTPS
Responsive
on Mobile &
Tablets
There are baseline PWA features
that you’ll need to enable
URLs should
load while
offline
Metadata
provided to
add to the
home screen
Time to
interactive
should be <10
sec in 3G
Should work
across different
browsers
Pages
transitions
shouldn’t be
blocked
Each page
should have a
URL
https://developers.google.com/web/progressive-web-apps/checklist

62. #pwaseo by @aleyda from #orainti at #applausebcn
You can verify them with the
Lighthouse PWA validation in Chrome
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

63. #pwaseo by @aleyda from #orainti at #applausebcn
Like this

64. #pwaseo by @aleyda from #orainti at #applausebcn
You can also
use Chrome
DevTools
Application
panel to
verify service
workers
https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

65. #pwaseo by @aleyda from #orainti at #applausebcn
As well as
the App
Manifest
https://developers.google.com/web/fundamentals/web-app-manifest/

66. #pwaseo by @aleyda from #orainti at #applausebcn
Or use the PWA Builder to validate too
https://www.pwabuilder.com/

67. #pwaseo by @aleyda from #orainti at #applausebcn
Which also
allows to
revise and
edit your app
manifest and
service
worker
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool

68. #pwaseo by @aleyda from #orainti at #applausebcn
But, do
PWAs
help
SEO?
#pwaseo by @aleyda from #orainti at #applausebcn

69. #pwaseo by @aleyda from #orainti at #applausebcn
I knew that
question
was
coming…
#pwaseo by @aleyda from #orainti at #applausebcn

70. #pwaseo by @aleyda from #orainti at #applausebcn
Websites that adopt PWA see benefits
due to the App like functionality
https://www.pwastats.com/

71. #pwaseo by @aleyda from #orainti at #applausebcn
However, PWA
usage won’t help
SEO as it’s not a
ranking factor
though…
https://www.seroundtable.com/google-pwas-seo-24956.html

72. #pwaseo by @aleyda from #orainti at #applausebcn
On the other
hand, PWA
shouldn’t hurt
SEO since a
PWA doesn’t
need to be a
SPA
https://love2dev.com/blog/pwa-spa/

73. #pwaseo by @aleyda from #orainti at #applausebcn
Your Website
Your Web App
(SPA or MPA)
PWA
You can develop a PWA from scratch,
or migrate your SPA, MPA or Website

74. #pwaseo by @aleyda from #orainti at #applausebcn
It’s then critical
to make sure
that all these
types of PWAs
are also search
friendly
SEO
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

75. #pwaseo by @aleyda from #orainti at #applausebcn
While
configuring
your Google
Analytics
tracking to
effectively
measure its
usage
https://builtvisible.com/google-analytics-for-pwas-tracking-offline-behaviour-and-more/

76. #pwaseo by @aleyda from #orainti at #applausebcn
How can
you
optimize
PWAs for
search?
#pwaseo by @aleyda from #orainti at #applausebcn

77. #pwaseo by @aleyda from #orainti at #applausebcn
The PWA checklist includes some
SEO related best practices too
Each page has
a URL
Site’s
content is
indexed by
Google
Canonical
URLs are
provided when
necessary
Avoid usage
of fragment
identifiers
schema.org
metadata is
included
https://developers.google.com/web/progressive-web-apps/checklist

78. #pwaseo by @aleyda from #orainti at #applausebcn
Sorry, no SPAs!
Each page has
a URL
Site’s
content is
indexe day
Google
Canonical
URLs are
provided when
necessary
Avoid usage
of fragment
identifiers
schema.org
metadata is
included
https://developers.google.com/web/progressive-web-apps/checklist

79. #pwaseo by @aleyda from #orainti at #applausebcn
Lighthouse doesn’t validate them
automatically at the moment though
https://developers.google.com/web/progressive-web-apps/checklist

80. #pwaseo by @aleyda from #orainti at #applausebcn
It’s then
necessary to
also validate
these SEO best
practices along
the ones
provided by
Google
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

81. #pwaseo by @aleyda from #orainti at #applausebcn
Which are mostly the same and
common to any Website SEO validation
Make Your
Content
Crawlable
Design for
multiple
devices
Provide Clean
URLs
Use
progressive
enhancement
Specify
Canonical
URLs
Page load
speed should
be fast
Use
schema.org
structured
data
Cross-
browser
support
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

82. #pwaseo by @aleyda from #orainti at #applausebcn
It’s specially important to validate if
the PWA is a Web app relying on JS
John Mueller from Google
“One common approach to creating PWAs is to use client-side-
rendering (essentially a bare-bones HTML page with JavaScript that
creates all of the content & functionality); these kinds of sites can
be rendered and indexed by Google, but it's usually much trickier
than a static HTML site.”
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

83. #pwaseo by @aleyda from #orainti at #applausebcn
You want the pizza delivered ready
to be eaten, not cooked at home!

84. #pwaseo by @aleyda from #orainti at #applausebcn
Unless the chef
is Jon Snow!
#pwaseo by @aleyda from #orainti at #applausebcn

85. #pwaseo by @aleyda from #orainti at #applausebcn
Like the Magento PWA Demo Store,
which passes the PWA validation…
https://inchoopwa.com/

86. #pwaseo by @aleyda from #orainti at #applausebcn
…but it looks like this when JS is
disabled since it’s Client Side Rendering

87. #pwaseo by @aleyda from #orainti at #applausebcn
Which can
cause
content
indexing
and
rendering
issues
https://search.google.com/test/mobile-friendly

88. #pwaseo by @aleyda from #orainti at #applausebcnhttp://www.thesempost.com/google-indexes-ranks-javascript-pages-two-waves-days-apart/
This happens because JS reliant
content is indexed in a second wave

89. #pwaseo by @aleyda from #orainti at #applausebcn
“Rendering is expensive and cannot
be done immediately”
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

90. #pwaseo by @aleyda from #orainti at #applausebcn
Let’s better avoid Client Side Rendering
https://www.deepcrawl.com/blog/webinars/making-javascript-work-for-search-martin-splitt/

91. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/i/web/status/1102906582961213441
Server side
rendering is also
supported by
Magento too, but
is not the default

92. #pwaseo by @aleyda from #orainti at #applausebcn
A full SEO audit by crawling both
with & without JS is necessary

93. #pwaseo by @aleyda from #orainti at #applausebcn
To identify,
assess and
close
the existing
gaps

94. #pwaseo by @aleyda from #orainti at #applausebcnhttps://github.com/google/indexable-pwa-samples
Check out
Google's
examples of
Indexable PWAs
using server,
client side and
hybrid rendered
sites

95. #pwaseo by @aleyda from #orainti at #applausebcnhttps://www.youtube.com/watch?v=LXF8bM4g-J4
Google’s
JavaScript
SEO Series
w/ Martin
Splitt

96. #pwaseo by @aleyda from #orainti at #applausebcnhttps://developers.google.com/search/docs/guides/fix-search-javascript
As well as the
JavaScript
search issues
& fixes
documentation
by Google

97. #pwaseo by @aleyda from #orainti at #applausebcnhttps://twitter.com/firt
And follow
Maximiliano
Firtman to
keep
updated on
PWA
evolution

98. #pwaseo by @aleyda from #orainti at #applausebcn
There’s no excuse to not enjoy of app
features on an SEO friendly Website
https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70

99. #pwaseo by @aleyda from #orainti at #applausebcn
Let’s make the Web progressive!
#pwaseo by @aleyda from #orainti at #applausebcn

100. #pwaseo by @aleyda from #orainti at #applausebcn
I’m Aleyda Solis
* SEO Consultant & Founder at Orainti
* Crawling Mondays Host
* SEO Speaker at +100 Events in +20 countries
* Author “SEO. Las Claves Esenciales.”
* Blogger in Search Engine Land & Search Engine Journal
* Featured in Forbes, Entrepreneur, Huffington Post
* European Search Personality of the Year in 2018
https://www.aleydasolis.com/

101. #pwaseo by @aleyda from #orainti at #applausebcn
If you liked
it, you can
watch me
weekly by
subscribing
to Crawling
Mondays
https://youtube.com/c/crawlingmondaysbyaleyda