Keynote from the Progressive Web Apps event in Seoul, South Korea

1. Proprietary + Confidential
Introduction to
Progressive Web Apps
@robertnyman

2. Confidential & ProprietaryHello everyone!
안녕하세요!

3. Confidential & Proprietary
로버트입니다
I am Robert

4. Confidential & ProprietaryI’m from Sweden - 저는 스웨덴에서 왔어요

5. Confidential & Proprietary
9 million people
If I lived in South Korea, I would:
- Be 60.49% less likely to be unemployed
- Spend 67.99% less money on health care
- Use 34.47% less electricity
- Be 11.11% less likely to be murdered
50 million people
If you lived in Sweden, you would:
- Have 28.87% more free time
- Make 23.19% more money
- Consume 30.7% less oil
- Live 2.09 years longer
South Korea - Sweden

6. Confidential & ProprietarySomething I recognize

7. Confidential & ProprietaryI am an IT professional

8. Confidential & Proprietary
The web
A brief history lesson

9. HTML + HTTP and Documents
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

10. Common Gateway Interface
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

11. Peak CGI
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

12. XMLHTTP
web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

13. Gmail
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

14. AJAX
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

15. Mobile hits town with the iPhone
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

16. Mobile == Apps
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

17. Service Worker
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016

18. ?
1991
1993
1996
1997
2004 2007 2014
20162005 2008
A brief history lesson

19. Confidential & ProprietaryWeb declared dead in 2010

20. Confidential & ProprietaryWeb very much alive in 2016

21. Confidential & ProprietaryNov 2015, 800 million users

22. Confidential & ProprietaryApr 2016, 1 Billion users

23. Confidential & ProprietaryWeb is all browsers

24. Confidential & Proprietary
Native & the web

25. Confidential & ProprietaryWeb traffic twice as much as native

26. Confidential & ProprietaryOnly 10% time spent in browser

27. Confidential & ProprietaryThings could be easier

28. Confidential & ProprietaryReducing friction
Every Step Costs You 20% of Users
- Gabor Cselle

29. Confidential & Proprietary
Impact of speed on bounce rates
Source: SOASTA; September, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sessions
Load time (in seconds)
Bouncerate(%)
Sessions Bounce rate
13%
bounce
rate
20%
bounce
rate
58%
bounce
rate
Performance

30. Confidential & Proprietary
RAIL: Instant loading and smooth navigation
For first visitors, load pages in <10s on 3G net
Aspirational goal: <3s to first paint
For repeat visitors, loading of page in <500 ms
Always scrolling at 60 frames/second
Content shouldn’t jump as images are loaded
Performance

31. Confidential & Proprietary
SLICE

32. Confidential & Proprietary
Build instantly engaging sites
and apps without the need for a
mandatory app download
SLICE

33. Confidential & Proprietary
Secure

34. Confidential & Proprietary
Linkable

35. Confidential & Proprietary
Indexable

36. Confidential & Proprietary
Composable

37. Confidential & Proprietary
Ephemeral

38. Confidential & Proprietary
Why do developers need a native app?

39. Confidential & Proprietary
Performance
Offline access
Periodic background processing
Notifications
Sensors
OS-specific features
From Brett Cannon
Why do developers need a native app?

40. Confidential & Proprietary
Performance
Offline access
Periodic background processing
Notifications
Sensors
OS-specific features
Why do developers need a native app?

41. Confidential & Proprietary
Progressive Web Apps

42. Confidential & Proprietary
Reliable: Fast loading, works on flaky networks
Fast: Smooth animation, scrolling and nav
Engaging and integrated
On the home screen, no URL bar, icons, splash
Re-engaging with push notifications
Consistent experience across browsers
(still in progress, though)
The Progressive Web App Experience
Progressive Web Apps

43. Confidential & Proprietary
Client-side proxy in
JavaScript
Net requests, but
also push & sync
Service Workers
Progressive Web Apps

44. Confidential & ProprietaryProgressive Web Apps

45. Confidential & Proprietary
Web App Manifests
Progressive Web Apps
<meta name="theme-color"
content="#303F9F">
<link rel="manifest" href="manifest.json">

46. Confidential & Proprietary
Web App Manifests
Progressive Web Apps
{
"short_name": "Air Horner",
"name": "Air Horner",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"icons": [{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}]
}

47. Confidential & Proprietary
Add to Homescreen and launch in full-screen mode
User who visits 2x in a
given time period will be
prompted with “add to
homescreen”
One tap to add to
homescreen
Opens full screen (no
URL bar)
Progressive Web Apps

48. Confidential & Proprietary
Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
Progressive Web Apps

49. Confidential & Proprietary
Progressive Web App technologies
Required Recommended Features
Service Worker Push notifications
Web App Manifest
App shell caching
Splash screen
Advanced Offline Support
Smooth navigation
“Progressive enhancement” with
cross browser support
Progressive Web Apps

50. Confidential & Proprietary
PWAs can work across browsers
PWAs should work across all modern browsers
Service Worker available in Chrome, Opera, and Firefox;
“High priority roadmap” for Microsoft Edge,
Safari and UC Web exploring
7
Progressive Web Apps

51. Confidential & Proprietary
Security - HTTPS

52. Alex Martinez
unsplash.com
Security - HTTPS

53. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Do you know if any ISP’s
or other services are
injecting Ads or anything
else in to your site?
Paul Kinlan | bit.ly/content-injection
“
”
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS

54. Features
Service workers
● Offline
● Push
● Background Sync
● ....???
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS

55. Features
Add to homescreen
HTTP2
Brotli
getUserMedia()
Geolocation
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS

56. Confidential & Proprietary
Adding HTTPS to your web site

57. Adding HTTPS to your web site

58. Adding HTTPS to your web site

59. letsencrypt.org
letsencrypt.readthedocs.org
Adding HTTPS to your web site

60. Adding HTTPS to your web site

61. Deployment
Adding HTTPS to your web site

62. Deployment
Adding HTTPS to your web site

63. Source: http://bit.ly/ssl-config-gen
bit.ly/ssl-config-gen
Adding HTTPS to your web site

64. bit.ly/ssl-labs
Adding HTTPS to your web site

65. Localhost
Adding HTTPS to your web site

66. DevTools
Adding HTTPS to your web site

67. More Info
Security Docs
bit.ly/security-docs
HTTPS: The Green Lock and Beyond
bit.ly/green-lock-beyond
Adding HTTPS to your web site

68. Confidential & Proprietary
Use cases

69. Confidential & Proprietary
Flipkart: Early results
App
3x time spent on site, from 1 minute to 3.5 minutes
Seeing 40% visitors return week over week
Users love smooth experience on 2G & flaky networks
Use cases

70. Confidential & Proprietary
Google Developer Experts

71. Confidential & Proprietary
GitHub contributions to open source projects
StackOverflow reputation
Conference Speaker
Event Organizer
Well versed in the fundamentals of Web Development
Familiarity with new standards as they’re coming into web browsers

72. Confidential & Proprietary

73. Confidential & Proprietary
robertnyman.com
nyman@google.com
@robertnyman
감사합니다!
Thank you!