Progressive web apps have been around for some years now, but adoption rate appears to be slow. In this talk Nichola will review the baseline and enhanced PWA criteria to explore why this might be. In addition we’ll also cover what’s new, benefits experienced by early adopters, tracking tips, how to get into the Play Store; as well as some of the current downsides and security considerations.

1. The State of
Progressive Web Apps
01

2. Since 2015, PWA capabilities
for cross browser & platform
applications that provide fast,
& engaging web app experiences,
regardless of network state
@NicholaStott

3. App-like Experience
Without the
excess of local
device storage
Add to home
screen
Push notifications
Offline content
Modern APIs

4. Source: OneNorth

5. @NicholaStott
November 2017
Source:AddyOsmani – A Pinterest ProgressiveWeb App Performance Case Study

6. 0
10
20
30
40
50
60
Android iOS PWA
9.6MB 56MB
150KB home
feed load!
Source:AddyOsmani – A Pinterest ProgressiveWeb App Performance Case Study

7. PWAsOverTime
Source: HTTPArchive

8. Sizeoftheweb
5.6 BN
Pages/
Indexed
Web
Source: WordWideWebSize

9. Why (s)low adoption?
02

10. 01
02
03
Timing: brands invested in native
app strategy because existing site
poor mobile UX
Confusion: SPAs vs AMP vs
either/or native app mentality
Baseline requirements: can’t/wont’
be met to retro-fit

11. Benefits
03

12. Cached Assets Reduce Server Load
& Less Data Requirements
Chris Love– PWA benefits

13. BBC lost 10% of users
for every additional
second their site
took to load.

14. PWAs must have a
sub 10 second
TTFI
(on simulated 3G/first
visit)
Source: PWA

15. No apps for
app sake

16. 01 0201 02 03 04
No Store,
No
commission
No dev,
deploy &
maintain cost
Discoverable
via web
optimisation
Instant app
update
deployments

17. A majority of users (51%) still don’t download
any apps in a month. 60% of apps in the Google
Play app store have never been downloaded.
Comscore:The 2017 U.S. Mobile App Report
AdWords for App Promotion

18. Instead of
outsourcing your
success to Apple,
Google or Microsoft a
PWA puts you in
charge of your
ability to reach your
audience, reengage
them and improve your
business processes.
Chris Love: How Progressive Web Apps BenefitYour Ability to ImproveYour Business

19. Instantly Loads: Loads all
cached content instantly
Offline Loading: Site is accessible
in areas with low or no connectivity
Add to home screen: Access like a
nativeAPP
“App-like”
Desktop Support: Desktop PWAs
are now supported on all desktop
platforms (Chrome 73)

21. Service worker:
technically a MITM. Can
be compromised if not
HTTPS.

22. Source Mobify: 2017 Q1 Mobile Commerce Insights Report
Push notifications

23. SHITTY
LINKS
THIN
CONTENT
SPAMMY
SCHEMA
We
Can’t
Have
Nice
Thing
s

24. H/2
reduce latency
minimise protocol overhead
request prioritisation
HTML5
SECURE/MOBILE DEVICE
local storage
motion/
native-likereact

25. LighterFrameworks
Lower parse and
compile times. See
HNPWA for list of
live examples
frameworks/librarie
s.
Addy Osmani : Google I/O 17
Angular5
React
VueJS

26. Payment request API

27. Submit to
APP Store

28. All about the user
experience
“web apps are optimised to
help users accomplish tasks
quickly”
Source KarlyCyr: Everything you need to know about PWA’s for ecommerce

29. Making it
Happen
04

30. Baseline
Requirements.

31. 01
02
03
HTTPS: is the site served
over HTTPS?
HTTP2: Multiplexing
Service Worker: does the site
register a ServiceWorker?

32. 04
05
06
Speed: <10,000TTFI/CI
Add to Home Screen: user
prompt ‘‘Add to Home Screen’’?
Responsive design

33. Not all organisations can hit these
baseline requirements, particularly
non-HTTP/2 – therefore sub-10
secondTTFI is out of reach.

34. Tools
05

35. Lighthouse
Chrome Dev
Tools &
Extension

36. Clear cache to
ensure clean data

37. Run in incognito
mode to get clean data

38. Lighthouse audit report

39. Lighthouse
Performance
focused

40. Lighthouse
JS Diagnostics

41. Lighthouse
PWAValidation
Report

42. App
manifest for
name &
icons
Lighthouse

43. Check
service
worker
Force
disconnect
Lighthouse

44. Android Homescreen
Lighthouse

45. Source:Github User: Andreban
// Setup a listener to track Add to Homescreen events.
window.addEventListener('beforeinstallprompt', e => {
e.userChoice.then(choiceResult => {
ga('send', 'event', 'A2H', choiceResult.outcome);
});
});
Track Install Prompt and Outcome

46. Source:Andre Bandarra on Medium

47. Entire PWA
Course on
Google
Codelabs
Source:Codelabs. Google Developers Network

48. SEO for PWA

49. 01
02
03
04
Each page has its own URL
Use of canonical tags
Use of schema.org and social
meta data
Content is shareable
Just Good
Housekeeping

50. 01
02
03
04
Seamless page
transmission: History API
Content doesn’t jump when
page loads
Smooth scroll
App install prompts are not
excessive
UX
Requirements

51. EruditeWordPressPWA
Implementing specific fixes - https://github.com/o10n-x/

52. Progressive web
AMP’s (PWAMPS)
Making an even better
first impression
AMP: Start Fast
PWA: Stay Fast
Quote byAlex Russell

53. CodeLabs PWAMP
Tutorial
Source: https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/index.html?index=..%2F..io2019#0

54. We need to
talk about
JavaScript.
/Client side
rendering

55. 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 usuallySource: John Mueller, Google

56. Tom Greenaway Google/IO 18
Source: Jennifer Slegg,TheSEMPOST

57. Tom Greenaway Google/IO 18
So if the page has JavaScript in it, the rendering is
actually deferred until we have the resources ready to
render the client-side content and then we index the
content further. So Googlebot might index a page
before the rendering is complete and the final render
can actually arrive several days later. And when that
final render does arrive, then we perform another
wave of indexing on that client-side rendered content.
Source: Jennifer Slegg,TheSEMPOST

58. 01
02
03
Don’t over-use client side
rendering for JavaScript
Audit your PWA JS on and JS off
Possible to pass PWA Lighthouse
Audit but…

59. Fail Completely When JS
Disabled
Credit:Aleyda Solis PWA SEO

60. Live Examples

61. 3.8x
Faster
Load time
31%
Increase
in CR
part of ASDA Walmart
Source:Google developers - case study

62. 150%
increase
in add to
home
screen
67%
Increase
in
offline
usage
Source: PWA Stat

63. 50K
core app
when
gzipped
3sec
Load on
2G
network
Source: PWA Stat

64. Cut load
times from
11.91 secs
to 4.96
90%
Smaller
than its
Android
App
Source: PWA Stat

65. Progressive Web
Apps The Future of
the Mobile Web
Source: Google, Microsoft &* Awwwards Books

66. 01
02
03
Not many small(er) site examples.
Particularly full ecommerce.
Harder to retro-fit. Need to wait
for budget and appetite for
consolidation.
Watch out for client/server
rendering potential issues – highly
dynamic sites

67. ERUDITE
THANKS
FOR
LISTENING!
Nichola.stott@erudite.agency
N I C H O L A S T O T T
+44 (0) 1256 384890
https://erudite.agency
@Nichola.stott