Download as PDF, PPTX
![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"
}]
}](https://image.slidesharecdn.com/pwakeynote-introductiontoprogressivewebapps-southkorea-160428062504/85/Introduction-to-Progressive-Web-Apps-Google-Developer-Summit-Seoul-South-Korea-46-320.jpg)
Uploaded byRobert Nyman
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea
This document provides an introduction to progressive web apps (PWAs). It discusses the history of web technologies from HTML and HTTP in the early 1990s to more recent developments like service workers, push notifications, and web app manifests that enable PWAs. Features of PWAs are described like reliability, performance, engagement, and integration with the operating system. Case studies are presented showing the benefits some companies have seen from implementing PWAs.
More Related Content
![Progressive Web Apps and the Windows Ecosystem [Build 2017]](https://cdn.slidesharecdn.com/ss_thumbnails/progressivewebappsandthewindowsecosystembuild2017-170512062428-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea
- 1. Proprietary + Confidential Introductionto Progressive Web Apps @robertnyman
- 2. Confidential & ProprietaryHelloeveryone! 안녕하세요!
- 3. Confidential & Proprietary 로버트입니다 Iam Robert
- 4. Confidential & ProprietaryI’mfrom Sweden - 저는 스웨덴에서 왔어요
- 5. Confidential & Proprietary 9million 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 & ProprietarySomethingI recognize
- 7. Confidential & ProprietaryIam an IT professional
- 8. Confidential & Proprietary Theweb A brief history lesson
- 9. HTML + HTTPand Documents 1991 1993 1996 1997 2004 2007 2014 2005 2008 A brief history lesson 2016
- 10. Common Gateway Interface 1991 1993 1996 1997 20042007 2014 2005 2008 A brief history lesson 2016
- 11. Peak CGI 1991 1993 1996 1997 2004 20072014 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 20052008 A brief history lesson 2016
- 13. Gmail 1991 1993 1996 1997 2004 2007 2014 20052008 A brief history lesson 2016
- 14. AJAX 1991 1993 1996 1997 2004 2007 2014 20052008 A brief history lesson 2016
- 15. Mobile hits townwith the iPhone 1991 1993 1996 1997 2004 2007 2014 2005 2008 A brief history lesson 2016
- 16. Mobile == Apps 1991 1993 1996 1997 20042007 2014 2005 2008 A brief history lesson 2016
- 17. Service Worker 1991 1993 1996 1997 2004 20072014 2005 2008 A brief history lesson 2016
- 18. ? 1991 1993 1996 1997 2004 2007 2014 201620052008 A brief history lesson
- 19. Confidential & ProprietaryWebdeclared dead in 2010
- 20. Confidential & ProprietaryWebvery much alive in 2016
- 21. Confidential & ProprietaryNov2015, 800 million users
- 22. Confidential & ProprietaryApr2016, 1 Billion users
- 23. Confidential & ProprietaryWebis all browsers
- 24. Confidential & Proprietary Native& the web
- 25. Confidential & ProprietaryWebtraffic twice as much as native
- 26. Confidential & ProprietaryOnly10% time spent in browser
- 27. Confidential & ProprietaryThingscould be easier
- 28. Confidential & ProprietaryReducingfriction Every Step Costs You 20% of Users - Gabor Cselle
- 29. Confidential & Proprietary Impactof 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.
- 32. Confidential & Proprietary Buildinstantly engaging sites and apps without the need for a mandatory app download SLICE
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. Confidential & Proprietary Whydo developers need a native app?
- 39. Confidential & Proprietary Performance Offlineaccess Periodic background processing Notifications Sensors OS-specific features From Brett Cannon Why do developers need a native app?
- 40. Confidential & Proprietary Performance Offlineaccess Periodic background processing Notifications Sensors OS-specific features Why do developers need a native app?
- 41.
- 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-sideproxy in JavaScript Net requests, but also push & sync Service Workers Progressive Web Apps
- 44.
- 45. Confidential & Proprietary WebApp Manifests Progressive Web Apps <meta name="theme-color" content="#303F9F"> <link rel="manifest" href="manifest.json">
- 46. Confidential & Proprietary WebApp 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 Addto 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 Webpush 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 ProgressiveWeb 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 PWAscan 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.
- 52.
- 53. Source: Lorem ipsumdolor 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 AddingHTTPS to your web site
- 57. Adding HTTPS toyour web site
- 58. Adding HTTPS toyour web site
- 59.
- 60. Adding HTTPS toyour web site
- 61. Deployment Adding HTTPS toyour web site
- 62. Deployment Adding HTTPS toyour web site
- 63.
- 64. bit.ly/ssl-labs Adding HTTPS toyour web site
- 65. Localhost Adding HTTPS toyour web site
- 66. DevTools Adding HTTPS toyour 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.
- 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 GoogleDeveloper Experts
- 71. Confidential & Proprietary GitHubcontributions 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.
- 73.