Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Proprietary + Confidential
Introduction to
Progressive Web Apps
@robertnyman
Confidential & Proprietary
こんにちは東京のみなさん
Hello everyone!
Confidential & Proprietary
私の名前はロバートです
I am Robert
Confidential & ProprietaryI’m from Sweden - スウェーデン
Confidential & ProprietaryJapan - Sweden
127 million people
62nd largest country in the world
377,915 square kilometers
Co...
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
No <iframes>, only <frameset>
2008
A brief history lesson
2016
XMLHTTP
web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm
Building Outlook Web Access was really r...
Gmail
1991
1993
1996
1997
2004 2007 2014
2005
Everyone learnt their tools over 7 years
2008
A brief history lesson
2016
AJAX
Ajax is not a technology, but a group of technologies. HTML and CSS can be used
in combination to mark up and style i...
Mobile hits the town
Web Platform jumped forward with the iPhone
● Appcache,
● Insert list here.
But when you look at it, ...
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
SLICE
Confidential & Proprietary
Build instantly engaging sites
and apps without the need for a
mandatory app download
SLICE
Confidential & ProprietarySecure
Confidential & ProprietaryLinkable
Confidential & ProprietaryIndexable
Confidential & ProprietaryComposable
Confidential & ProprietaryEphemeral
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
Engag...
Confidential & Proprietary
● Client-side proxy
in JavaScript
● Net requests, but
also push & sync
Service Workers
Progress...
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 availa...
Confidential & Proprietary
Use cases
Confidential & Proprietary
Flipkart: Early results
App
● 3x time spent on site, from 1 minute to 3.5 minutes
● Seeing 40% ...
Confidential & Proprietary
Google Developer Experts
Confidential & Proprietary
GitHub contributions to open source projects
StackOverflow reputation
Conference Speaker
Event ...
Confidential & Proprietary
ありがとうございました
Thank you
Confidential & Proprietary
robertnyman.com
nyman@google.com
@robertnyman
Prochain SlideShare
Chargement dans…5
×

Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan

An introduction to Progressive Web Apps

  • Identifiez-vous pour voir les commentaires

Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan

  1. Proprietary + Confidential Introduction to Progressive Web Apps @robertnyman
  2. Confidential & Proprietary こんにちは東京のみなさん Hello everyone!
  3. Confidential & Proprietary 私の名前はロバートです I am Robert
  4. Confidential & ProprietaryI’m from Sweden - スウェーデン
  5. Confidential & ProprietaryJapan - Sweden 127 million people 62nd largest country in the world 377,915 square kilometers Constitutional Monarchy Last election: 2010 9 million people 56th largest country in the world 450,295 square kilometers Constitutional Monarchy Last election: 2010
  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 No <iframes>, only <frameset> 2008 A brief history lesson 2016
  12. XMLHTTP web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm Building Outlook Web Access was really really very very hard, and even so the results were not comparable to the real thing (Outlook). You can't take it offline, you can't use it with multiple mail accounts in a coordinated way, and the UI is just somewhat more clunky. This doesn't take away from the core value of OWA in being something you can get to from anywhere 1991 1993 1996 1997 2004 2007 2014 2005 2008 A brief history lesson 2016
  13. Gmail 1991 1993 1996 1997 2004 2007 2014 2005 Everyone learnt their tools over 7 years 2008 A brief history lesson 2016
  14. AJAX Ajax is not a technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads. 1991 1993 1996 1997 2004 2007 2014 2005 2008 A brief history lesson 2016
  15. Mobile hits the town Web Platform jumped forward with the iPhone ● Appcache, ● Insert list here. But when you look at it, mobile developers wanted more and web couldn’t keep up. At this point it wasn’t clear to many developers that mobile is the future. 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 SLICE
  30. Confidential & Proprietary Build instantly engaging sites and apps without the need for a mandatory app download SLICE
  31. Confidential & ProprietarySecure
  32. Confidential & ProprietaryLinkable
  33. Confidential & ProprietaryIndexable
  34. Confidential & ProprietaryComposable
  35. Confidential & ProprietaryEphemeral
  36. Confidential & Proprietary Why do developers need a native app?
  37. Confidential & Proprietary Performance Offline access Periodic background processing Notifications Sensors OS-specific features From Brett Cannon Why do developers need a native app?
  38. Confidential & Proprietary Performance Offline access Periodic background processing Notifications Sensors OS-specific features Why do developers need a native app?
  39. Confidential & Proprietary Progressive Web Apps
  40. 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
  41. Confidential & Proprietary ● Client-side proxy in JavaScript ● Net requests, but also push & sync Service Workers Progressive Web Apps
  42. Confidential & ProprietaryProgressive Web Apps
  43. Confidential & Proprietary Web App Manifests Progressive Web Apps <meta name="theme-color" content="#303F9F"> <link rel="manifest" href="manifest.json">
  44. 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", "density": "4.0" }] }
  45. 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
  46. 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
  47. 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
  48. 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
  49. Confidential & Proprietary Use cases
  50. 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
  51. Confidential & Proprietary Google Developer Experts
  52. 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
  53. Confidential & Proprietary ありがとうございました Thank you
  54. Confidential & Proprietary robertnyman.com nyman@google.com @robertnyman

×