An in-depth look at progressive web apps (PWAs) as the immediate future of the mobile experience.

1. Are PWA’s the future of
the Web?
01

2. Progressive Web Apps are cross browser
& platform applications that provide fast,
reliable & engaging web app experiences,
regardless of the network state

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

4. 0
10
20
30
40
50
60
Android iOS PWA
9.6MB 56MB
150KB
home feed
load!
Source Addy Osmani – A Pinterest Progressive Web App Performance Case Study

5. Why should you care?
02

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

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

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

9. Native apps
are doomed

10. 01 0201 02 03 04
No Store,
No
commission
Cheaper to
develop,
deploy &
maintain
Discoverable
via web
optimisation
Instant
Application
Update
Deployments

11. 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

12. 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 Benefit Your Ability to Improve Your Business

13. 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 native APP
Benefits
Desktop Support: Desktop PWAs
are now supported on all desktop
platforms (Chrome 73)

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

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

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

18. Payment request API

19. Submit to
APP Store

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

21. Making it
Happen
03

22. Baseline
Requirements.

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

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

25. Lighthouse Tools
04

26. Lighthouse
Chrome Dev Tools
& Extension

27. Clear cache to
ensure clean data

28. Run in incognito
mode to get clean data

29. Lighthouse audit report

30. Metrics that Matter.

31. Lighthouse
Performance
focused

32. Lighthouse
JS Diagnostics

33. Lighthouse
PWA Validation
Report

34. App
manifest for
name &
icons
Lighthouse

35. Check
service
worker
Force
disconnect
Lighthouse

36. 100 PWA Score
Lighthouse

37. Speed + Performance Optimisation
=
Improved Time to Task Completion

38. 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

39. 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

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

41. PWAsOverTime
HTTP Archive

42. Progressive
web AMP’s
Making an even better
first impression
AMP: Start Fast
PWA: Stay Fast
Quote by Alex Russell

43. The web
always wins.

44. Developers don’t want to build 3 separate
apps for the major platforms. Companies
don’t want to pay for development of 3
apps.
The answer to all this is the web. We can
build rich web apps—Progressive Web
Apps—and package them for all the app
stores.”
J U D A H G A B R I E L H I M A N G O

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

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

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

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

49. ERUDITE
Ready to
talk to us?
miracle.inameti@erudite.agency
M I R A C L E I N A M E T I - A R C H I B O N G
+44 (0) 1256 384890
https://erudite.agency
@mira_inam