An introduction to Progressive Web Apps

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