Embed Size (px)
Citation preview
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
Constitutional Monarchy
Last election: 2010
9 million people
56th largest country in the world
450,295 square kilometers
Constitutional Monarchy
Last election: 2010
Confidential & ProprietarySomething I recognize
Confidential & ProprietaryI am an IT professional
Confidential & Proprietary
The webA brief history lesson
HTML + HTTP and Documents
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
Common Gateway Interface
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
Peak CGI
19911993
19961997
2004 2007 20142005
No <iframes>, only <frameset>
2008
A brief history lesson2016
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
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
Gmail
19911993
19961997
2004 2007 20142005
Everyone learnt their tools over 7 years
2008
A brief history lesson2016
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.
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
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.
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
Mobile == Apps
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
Service Worker
19911993
19961997
2004 2007 20142005 2008
A brief history lesson2016
?
19911993
19961997
2004 2007 201420162005 2008
A brief history lesson
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
PerformanceOffline accessPeriodic background processingNotificationsSensorsOS-specific features
From Brett Cannon
Why do developers need a native app?
Confidential & Proprietary
PerformanceOffline accessPeriodic background processingNotificationsSensorsOS-specific features
Why do developers need a native app?
Confidential & Proprietary
Progressive Web Apps
Confidential & Proprietary
Reliable: Fast loading, works on flaky networksFast: Smooth animation, scrolling and navEngaging and integrated
On the home screen, no URL bar, icons, splashRe-engaging with push notifications
Consistent experience across browsers(still in progress, though)
The Progressive Web App Experience
Progressive Web Apps
Confidential & Proprietary
● Client-side proxy in JavaScript
● Net requests, but also push & sync
Service Workers
Progressive Web Apps
Confidential & ProprietaryProgressive Web Apps
Confidential & Proprietary
Web App Manifests
Progressive Web Apps
<meta name="theme-color" content="#303F9F">
<link rel="manifest" href="manifest.json">
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"
}]
}
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)
3
Progressive Web Apps
Confidential & Proprietary
Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
5
Progressive Web Apps
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
1
2
3
4
7
5
6
Progressive Web Apps
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
Confidential & Proprietary
Use cases
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
Confidential & Proprietary
Google Developer Experts
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
Confidential & Proprietary
ありがとうございました
Thank you
