Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Proprietary + Confidential
Introduction to
Progressive Web Apps
@robertnyman
Confidential & ProprietaryHello everyone!
안녕하세요!
Confidential & Proprietary
로버트입니다
I am Robert
Confidential & ProprietaryI’m from Sweden - 저는 스웨덴에서 왔어요
Confidential & Proprietary
9 million people
If I lived in South Korea, I would:
- Be 60.49% less likely to be unemployed
-...
Confidential & ProprietarySomething I recognize
Confidential & ProprietaryI am an IT professional
Confidential & Proprietary
The web
A brief history lesson
HTML + HTTP and Documents
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
Common Gateway Interface
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
Peak CGI
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
XMLHTTP
web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm
1991
1993
1996
1997
2004 2007 2014
2005 ...
Gmail
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
AJAX
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
Mobile hits town with the iPhone
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
Mobile == Apps
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
Service Worker
1991
1993
1996
1997
2004 2007 2014
2005 2008
A brief history lesson
2016
?
1991
1993
1996
1997
2004 2007 2014
20162005 2008
A brief history lesson
Confidential & ProprietaryWeb declared dead in 2010
Confidential & ProprietaryWeb very much alive in 2016
Confidential & ProprietaryNov 2015, 800 million users
Confidential & ProprietaryApr 2016, 1 Billion users
Confidential & ProprietaryWeb is all browsers
Confidential & Proprietary
Native & the web
Confidential & ProprietaryWeb traffic twice as much as native
Confidential & ProprietaryOnly 10% time spent in browser
Confidential & ProprietaryThings could be easier
Confidential & ProprietaryReducing friction
Every Step Costs You 20% of Users
- Gabor Cselle
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...
Confidential & Proprietary
RAIL: Instant loading and smooth navigation
For first visitors, load pages in <10s on 3G net
As...
Confidential & Proprietary
SLICE
Confidential & Proprietary
Build instantly engaging sites
and apps without the need for a
mandatory app download
SLICE
Confidential & Proprietary
Secure
Confidential & Proprietary
Linkable
Confidential & Proprietary
Indexable
Confidential & Proprietary
Composable
Confidential & Proprietary
Ephemeral
Confidential & Proprietary
Why do developers need a native app?
Confidential & Proprietary
Performance
Offline access
Periodic background processing
Notifications
Sensors
OS-specific fea...
Confidential & Proprietary
Performance
Offline access
Periodic background processing
Notifications
Sensors
OS-specific fea...
Confidential & Proprietary
Progressive Web Apps
Confidential & Proprietary
Reliable: Fast loading, works on flaky networks

Fast: Smooth animation, scrolling and nav

Eng...
Confidential & Proprietary
Client-side proxy in
JavaScript
Net requests, but
also push & sync
Service Workers
Progressive ...
Confidential & ProprietaryProgressive Web Apps
Confidential & Proprietary
Web App Manifests
Progressive Web Apps
<meta name="theme-color"
content="#303F9F">
<link rel="m...
Confidential & Proprietary
Web App Manifests
Progressive Web Apps
{
"short_name": "Air Horner",
"name": "Air Horner",
"sta...
Confidential & Proprietary
Add to Homescreen and launch in full-screen mode
User who visits 2x in a
given time period will...
Confidential & Proprietary
Web push notifications
System level notifications, like apps
Ask to notify users with specific ...
Confidential & Proprietary
Progressive Web App technologies
Required Recommended Features
Service Worker Push notification...
Confidential & Proprietary
PWAs can work across browsers
PWAs should work across all modern browsers

Service Worker avail...
Confidential & Proprietary
Security - HTTPS
Alex Martinez
unsplash.com
Security - HTTPS
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Do you know if any ISP’s
or other servi...
Features
Service workers
● Offline
● Push
● Background Sync
● ....???
Source: https://paul.kinlan.me/detecting-injected-co...
Features
Add to homescreen
HTTP2
Brotli
getUserMedia()
Geolocation
Source: https://paul.kinlan.me/detecting-injected-conte...
Confidential & Proprietary
Adding HTTPS to your web site
Adding HTTPS to your web site
Adding HTTPS to your web site
letsencrypt.org
letsencrypt.readthedocs.org
Adding HTTPS to your web site
Adding HTTPS to your web site
Deployment
Adding HTTPS to your web site
Deployment
Adding HTTPS to your web site
Source: http://bit.ly/ssl-config-gen
bit.ly/ssl-config-gen
Adding HTTPS to your web site
bit.ly/ssl-labs
Adding HTTPS to your web site
Localhost
Adding HTTPS to your web site
DevTools
Adding HTTPS to your web site
More Info
Security Docs
bit.ly/security-docs
HTTPS: The Green Lock and Beyond
bit.ly/green-lock-beyond
Adding HTTPS to you...
Confidential & Proprietary
Use cases
Confidential & Proprietary
Flipkart: Early results
App
3x time spent on site, from 1 minute to 3.5 minutes
Seeing 40% visi...
Confidential & Proprietary
Google Developer Experts
Confidential & Proprietary
GitHub contributions to open source projects
StackOverflow reputation
Conference Speaker
Event ...
Confidential & Proprietary
Confidential & Proprietary
robertnyman.com
nyman@google.com
@robertnyman
감사합니다!
Thank you!
Upcoming SlideShare
Loading in …5
×

Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea

12,674 views

Published on

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

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to Progressive Web Apps, Google Developer Summit, 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!

×